Introducing Grida Embeddings - Figma designs made alive. (with production-ready code)
Introducing Grida Embeddings. Youtube, Google Maps and Live Camera in your Figma designs & prototypes (with-production ready code).
It’s Alive!
Today, we’re releasing our latest development — embeddings.
With embeddings, you can now make your design more interactive and production-ready, instantly.
What is Embeddings?
We love Figma too, but let’s be honest with ourselves here. We’ve all had our moments wishing Figma could do just a little more. Embeddings feature was created to fill in the gap between our wishes and Figma.
Embeddings will help transform your Figma designs into live and interactive prototypes — and it comes with production-ready codes across your favorite frameworks (React, Flutter, Vanilla, etc.).
How Does it Work?
With just a few extra steps on your existing Figma designs, you can supercharge them into “working prototypes” that’s no longer static.
We don’t want to leave Figma. We don’t want to add another layer of tools. And we definitely don’t want to sync files every time there’s a design modification.
So…
Well you couldn’t. Until today.
Once you’ve installed our Figma Plugin, simply click your design on Figma and that’s it! Grida will instantly generate readable codes with our new feature embeddings included. Install Figma Plugin or Start with Figma file url.
We generate readable code and render it instantly
It’s end-to-end code based, code-first prototype. When you are ready for handoff, click on the “Code” tab and the corresponding code will be instantly generated ready-to-go.
What’s Embeddable?
Youtube Videos
This feature works across all layers-Group, Frame and Rectangle Node.
To use this feature, add the --x-youtube-view flag with Youtube video ID as a value. For example, on your existing frame layer “video”, change the layer’s name into “video --x-youtube-view=LOZuxwVk7TU”
i.e If you want to embed this youtube video — “The Strumbellas — Spirits” (https://www.youtube.com/watch?v=F9kXstb9FF4), the ID you’ll be passing will be F9kXstb9FF4
This will replace the static contents with embedded Youtube video, preserving all the styles.
Learn more on our docs: docs/ — x-youtube-view
Google Maps
This feature also works across all layers-Group, Frame and Rectangle Node.
To use this feature, add --x-google-maps-view flag with the location’s name as a value. For example, on your existing Frame layer “Maps”, change the layer’s name into “Maps --x-google-maps-view=San Francisco” This will show you the same result as shown on Google Maps search.
Learn more on our docs: docs/ — x-google-maps-view
Live Camera
Note: This feature only works on the Grida editor (unfortunately, Figma plugins cannot access your webcam).
👉 Quick guide for opening your Figma files in the Grida editor
As mentioned above, the live camera feed only works on the Grida editor (due to security concerns). Nevertheless you can still get the same codes on Grida Assistant (our Figma plugin).
To use this feature, add the --camera flag. For example, on your existing Frame layer “Cam”, change the layer’s name into “Cam --camera” This will show you the live camera feed from your device’s webcam.
Learn more on our docs: docs/ — camera
Open street maps (for open source enthusiasts)
Coming this Saturday, with --x-osm-view=lat,lng
Any and all websites
Coming this Saturday, with --webview=https://grida.co
Your Favorite Tweets from Twitter
Coming this Saturday, with --x-tweet-view=status-id
Few Extra Bonuses
See the slider and the checkbox in the demo? Yes, those all come in native html (compatible with any web based frameworks — React, Vue, Svelte, etc.).
Here are some extra commands to change your static components into interactive components ready for production:
- Input (text field) with
--as-input(docs) - Slider with
--as-slider(docs) - Checkbox with
--as-checkbox(docs) - Button with
--as-button(docs) - …find out for more!
Working on It…
Since we are dedicated to keeping the HTML/CSS standard, we did not introduce any custom / 3rd party libraries to bring this components alive. Which means, some components may not be fully customizable to your design.
For example, checkbox’s border radius (corner radius) and check icons are not customizable. (It’s sad and we know but this is the limitation of the HTML/CSS standard).
We are aware of this problem and we’re working on few ideas around it.
- Supporting “standard” libraries: like bootstrap, mui (material-ui) or TailwindCSS. It’s an arduous process but we are getting there.
- Reflect-UI: we’re building our own universal design system. An ultimate design system that accurately reflects design for each component and is available for all major frameworks.
- Extending CSS (in a dirty way): extending the css with custom styles and disabling native appearance. This is our least favorite option as it will make the css a lot longer and harder to read. Let us know your thoughts on how to resolve this on the comment section below!
We will talk about this in more detail on our next post along with couple of newly added components. Subscribe to our Medium to stay posted!
Starter Kit
Here is our official sample Figma file, we’ve made some updates to make it work with the new embeddings feature (click duplicate).
Contribute on Github
We’re on a journey to making designers’ and developers’ lives easier. And we’ releasing new features every week. Join our open source projects on Github and be a part of building the tools you need.
What’s Next?
On our next release,
- We’ll be adding a friendly interface for designers to interact with flags: click-and-select, drag-and-drop.
- We’ll be adding a CSS optimization feature for shorter & cleaner style generation.
- We’ll be adding support for embeddings on the Flutter framework (it’s currently only available for web platforms)
- Star & watch our design-to-code engine repo & assistant repo and be the first to access the latest updates.
Until then… enjoy prototyping & coding with Grida!
At Grida, we make open source design-to-code solutions
- Don’t forget to share this blog and ⭐️🌟💫star & 👀⌚️watch the repo so we can know that you care 😉
- We are hiring, email or slack me if you want to join our adventure.
Follow us
Please subscribe / follow our medium, github, youtube, facebook, twitter and instagram for latest updates and releases.
#make #grida
References
Starbucks Coupon Giveaway! (~4/10/22)
We’re giving out $10 Starbucks coupons to everyone who fills out the below user survey. Help us improve and drink a free coffee!
- For developers: https://forms.gle/uPmfnWdDNxQxmCSC7
- For designers: https://forms.gle/G1bBoaJHAjz4aRvU8
- After submitting, Join our slack and ask us for the coffee
