0
100
200
300
400
500
600
700
800
900
1000
1100
0
100
200
300
400
500
600
700
800
900
1000
1100

FigmaToFlutter

by Seme Mojugbe

users
79K
likes
1.2K
saves
28K
comments
14
FreeWorks inFigma Design
Price
Free
Latest version
v8 ยท Jan 1, 2021
First published
May 18, 2020
Publisher
Seme Mojugbe
Features

What FigmaToFlutter does

Summarised from Seme Mojugbe's description on the Figma Community.

  • 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()?

  • ASSET MANAGEMENT

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

On this page
Overview

About FigmaToFlutter

FigmaToFlutter is a free Figma plugin published by Seme Mojugbe in 2020. It works in Figma Design and has 78,724 users and 1,218 likes on the Figma Community. It ranks #18 in Figma to Code on our lists.

In the developer's words

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

Changelog

What's new

Version 8 ยท released Jan 1, 2021

  • Misc changes
Trust

Permissions and privacy

Network access

This plugin's manifest doesn't declare its network access, which is common for older plugins. Figma shows a warning on the Community page for plugins like this.

Extra permissions

None beyond the standard access to the file you run it in.

Read from the plugin's published manifest.

Rankings

Where FigmaToFlutter ranks

Compare

FigmaToFlutter alternatives

  1. 1

    Figma to Code

    by Bernardo Ferrari

    2.3M users8.5KFree

    Code Conversion Made Easy: Figma to Web & Apps

  2. 2

    Anima

    by Anima

    1.8M users17KFree

    Anima - AI Powered Design to code

  3. 3

    Builder.io

    by Steve Sewell

    1.3M users23KFree

    Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.

  4. 4

    Figma to HTML

    by Figma2HTML

    670K users6.7KFree

    Convert Figma design to HTML

  5. 612K users11KFree

    Convert your Figma design to HTML code in seconds with Framer.

  6. 6

    Locofy Lightning

    by Locofy.ai

    594K users5.3KFree

    Convert Figma designs to code in a flash: React, React Native, Flutter, HTML/CSS, Angular, Next, Vue

FAQ

FigmaToFlutter FAQ

What does FigmaToFlutter do?

It's a Figma plugin by Seme Mojugbe that runs in Figma Design.

Is FigmaToFlutter free?

Yes. FigmaToFlutter is free to install and run from the Figma Community, with no paid tier listed.

How do I install FigmaToFlutter?

Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.

What are the best alternatives to FigmaToFlutter?

By user count, the closest alternatives are Figma to Code, Anima and Builder.io. Compare all of them on the best Figma plugins for figma to code.

For developers

Built this plugin?

Use this page as a landing page for FigmaToFlutter: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.

FigmaToFlutter on figmaplugins.co

Style

Label

Size

Code

<a href="https://figmaplugins.co/plugins/figmatoflutter/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="FigmaToFlutter on figmaplugins.co" width="220" height="48"></a>