Back to Plugins
FigmaToFlutter

FigmaToFlutter

<p>GET FLUTTER CODE FOR FIGMA SELECTIONS</p><p>Flutter generator will look through what you select and write out the flutter equivalent</p><p><br></p><p>EASY COPY AND PASTE</p><p>Stateless code? Stateful? Or just the widget code? Flutter generator renders them all for easy copy and paste</p><p><br></p><p>RENDER WHAT YOU NEED</p><p>Flutter Generator will do a one-to-one conversion of what you select in Figma into Flutter code (v1.12.13+hotfix.8).</p><p><br></p><p>SENSIBLE EDGECASES</p><p>So, do you want your image inside a Container()? Or the background of the Container()? Or just an AssetImage()? Flutter generator has dedicated options for edge cases like these, so there will be more than one way (and more in the future) of rendering an item.</p><p><br></p><p>ASSET MANAGEMENT</p><p>- Exporting images from the UI to match the flutter code. No need for a roundtrip</p><p>- Font Names and their data are prepared/formatted for your convenience in your <a href="http://pubspec.yaml" rel="noreferrer noopener nofollow ugc" target="_blank">pubspec.yaml</a> file</p><p><br></p><p>Flutter Generator is starting in Beta, with the following functionality out of the box (More to come in updates):</p><p><br></p><p>- Rectangles/Ovals/Lines (Basic shapes)</p><p>- Solid colors</p><p>- Images (AssetImage, Container Backgrounds)</p><p>- Google fonts generation</p><p>- Pubspec code snippet for third party dependencies</p>

generatorflutterhandoffcodeconvertercode-generators

Plugin Preview

FigmaToFlutter preview

About this plugin

GET FLUTTER CODE FOR FIGMA SELECTIONS

Flutter generator will look through what you select and write out the flutter equivalent


EASY COPY AND PASTE

Stateless code? Stateful? Or just the widget code? Flutter generator renders them all for easy copy and paste


RENDER WHAT YOU NEED

Flutter Generator will do a one-to-one conversion of what you select in Figma into Flutter code (v1.12.13+hotfix.8).


SENSIBLE EDGECASES

So, do you want your image inside a Container()? Or the background of the Container()? Or just an AssetImage()? Flutter generator has dedicated options for edge cases like these, so there will be more than one way (and more in the future) of rendering an item.


ASSET MANAGEMENT

- Exporting images from the UI to match the flutter code. No need for a roundtrip

- Font Names and their data are prepared/formatted for your convenience in your pubspec.yaml file


Flutter Generator is starting in Beta, with the following functionality out of the box (More to come in updates):


- Rectangles/Ovals/Lines (Basic shapes)

- Solid colors

- Images (AssetImage, Container Backgrounds)

- Google fonts generation

- Pubspec code snippet for third party dependencies

Plugin Details

Version8
CreatedMay 18, 2020
Last UpdatedJanuary 1, 2021
CategorySoftware development
CreatorSeme Mojugbe
Stats27355 installs, 1079 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js