menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Figma

Figma is the first collaborative UI design tool built in the browser. Join our growing community and kick off a conversation!

Channels
Team

Flutter Generator: A Figma to Flutter generator plugin

May 17, 2020 at 12:42am
The Figma community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

Flutter Generator: A Figma to Flutter generator plugin

May 17, 2020 at 12:42am (Edited 2 years ago)
I'm working on a plugin that will convert a figma selection and return a flutter markup representation of that object.
There's a lot to be done with such a plugin, but I will be launching May 31 with the following:
  • Font Management: Fonts used in figma have their google links and pubspec code generated (Google Fonts only)
  • Images: Images associated with figma selections will be prepped and renamed ready for export (from the Plugin), so you won't have to close the plugin to export the image
  • All rendered code have their Stateless/Stateful equivalents. Or if you want just the widget code, that's available too
  • Dedicated Render Methods: Do you want an image inside a container or do you want an image background for the container? The plugin has dedicated render methods to handle edgecases based on flutter's approach markup. So what you're getting is based on best practice.
For more info, you can head to https://audacitus.com/figmaflutter/
desktop-app-4x.jpg

May 24, 2020 at 6:48am
Hi, this looks really awesome and I'm looking forward for it. I see you generate images, could you please share how do you get the image filename extension? I am trying to export images used in layers. The image fills API (GET/v1/files/:key/images) returns a map of [imageRef , URL] but there's no way to know the image file type. For example, the URL doesn't have the file type.
Thanks!

May 24, 2020 at 2:11pm
Hi . Thanks for the feedback.
The method I'm using is a bit different - I'm using the plugin API and that gives me the raw bytes to convert to base64 to export as a file. So I can decide the filename extension.
But for your case, you're using the REST-API. I've gone through a previous project and realized I didn't have the need for the file type extension. So the best thing you could do (for now), is still fetch the image, bind it to a canvas, and then get the base64 version. That way, when saving the file (which is what I'm assuming you want to do), you can then explicitly use the image/png MIME type.
Thanks for your reply. I need the original file type, not exported version. For example, if designer selected a JPG file for a RECTANGLE, I need a way to know it's a JPG
but no worries, I will keep searching
Here's another question if you don't mind. Do you know a way to get the rich text representation? For example, in a text layer, as a designer, you can select some characters and press Ctrl+B to make it bold. I don't see a way by the API to know the range of text which is bold. In fact, I haven't seen any mention of idea of 'bold' in the API

June 7, 2020 at 10:22pm
Just a quick update - the plugin is now available on figma: https://www.figma.com/community/plugin/844008530039534144/FigmaToFlutter
Do give a try. Open to feedback