Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.
Alternatives To Figmatocode
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
22 days ago23gpl-3.0TypeScript
Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.
14 days ago10bsdDart
Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple. Demo:
Layout635112 months ago14November 11, 20208mitDart
Flutter | Create responsive layouts for mobile, web and desktop
Responsive_builder4106716 days ago20August 31, 202216mitDart
A set of widgets to make responsive UI building in flutter more readable
33 years ago11July 02, 201911mitDart
:bar_chart: [wip] Create beautiful, responsive, animated charts using a simple and intuitive API.
Responsive_scaffold28941a year ago23February 05, 202026mitDart
Responsive Scaffold - On mobile it shows a list and pushes to details and on tablet it shows the List and the selected item. Maintainer: @rodydavis
Flutter Ui Designs221
4 months ago1mitDart
Just collection of UI designs build with flutter. Can run on any mobile, web & desktop.
Flutter Web Demo207
6 months agomitC++
🌍 Responsive web app powered by Flutter and Dart
2 years agomitDart
Flutter | Create responsive layouts for mobile, web and desktop
Sizer1391a year ago32September 15, 202126mitDart
A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.
Alternatives To Figmatocode
Select To Compare

Alternative Project Comparisons

Figma to Code

Figma to Code


Most design to code plugins are bad, some are even paid. This project aims to raise the bar by generating responsive layouts in Tailwind, Flutter and SwiftUI. The plan is to eventually add support for Jetpack Compose and possibly standard HTML or other frameworks like React Native, Bootstrap or Fluent. Feedback, ideas and partnerships are appreciated!

Gif showing the conversion

How it works

This plugin takes an unconventional approach to improve code quality: it optimizes the layout before the conversion to code even begins. The standard Figma Nodes (what represents each layer) is a joy to work with, but it can't modify a layer without modifying the user project. For this reason, I decided to virtualize it, remaking the official implementation and naming them AltNodes. During the process of converting a Node into an AltNode, the plugin does the following:

Conversion Workflow

That process can also be seen as an Intermediate Representation and might allow this plugin to, one day, live outside Figma.

Hard cases

When finding the unknown (a Group or Frame with more than one child and no vertical or horizontal alignment), Tailwind mode uses insets for best cases and left, top from standard CSS for the worst cases. Flutter mode uses Stack and Positioned.fill. Both are usually not recommended and can easily defeat the responsiveness. In many scenarios, just wrapping some elements in a Group or Frame can solve:

Conversion Workflow

Tip: Instead of selecting the whole page, you can also select individual items. This can be useful for both debugging and componentization. For example: you can use the plugin to generate the code of a single element and then replicate it using a for-loop.


  • Vectors (tricky in HTML, unsupported in Flutter)
  • Images (they are local, how to support them?)
  • Line/Star/Polygon (todo. Rectangle and Ellipse were prioritized and are more common)
  • The source code is fully commented and there are more than 30 "todo"s there

Tailwind limitations

  • Width: Tailwind has a maximum width of 384px. If an item passes this, the width will be set to w-full (unless it is already relative like w-1/2, w-1/3, etc). This is usually a feature, but be careful: if most layers in your project are larger than 384px, the plugin's result might be less than optimal.

Flutter limits and ideas

  • Stack: in some simpler cases, a Stack could be replaced with a Container and a BoxDecoration. Discover those cases and optimize them.
  • Material Styles: text could be matched to existing Material styles (like outputting Headline6 when text size is 20).
  • Identify Buttons: the plugin could identify specific buttons and output them instead of always using Container or Material.

How to build the project

The project is configured to be built with Webpack or Rollup. The author couldn't find a way to correctly configure Svelte in Webpack, so Rollup was added. But Rollup is a lot less stable than Webpack and crashes regularly in watch mode when editing Typescript files. So, if you are going to work with Typescript only, I recommend sticking with Webpack. If you are going to make changes in the UI, you need to use Rollup for now.


The Figma file for this README and icon is also open and welcome to changes! Check it here.

I took decisions thinking about how it would benefit the majority of people, but I can (and probably will!) be wrong many times. Found a bug? Have an idea for an improvement? Feel free to add an issue or email me. Pull requests are also more than welcome.

Popular Flutter Projects
Popular Responsive Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.