menu

Figma

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

Channels
# All channels
view-forward
# General
view-forward
# Start Here
view-forward
# Announcements
view-forward
# Design Systems
view-forward
# Plugins & API
view-forward
# Made with Figma
view-forward
# Prototyping
view-forward
Team

Flutter Generator: A Figma to Flutter generator plugin

May 17, 2020 at 12:42am

Flutter Generator: A Figma to Flutter generator plugin

May 17, 2020 at 12:42am (Edited 8 months 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!
  • reply
  • like

May 24, 2020 at 2:11pm
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!
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.
  • reply
  • like
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
  • reply
  • like
but no worries, I will keep searching
  • reply
  • like
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
  • reply
  • like

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
  • reply
  • like