Repolode
Submit
bernaferrari

bernaferrari/FigmaToCode

A Figma plugin that converts a selected design into editable HTML, React, Svelte, Tailwind, Flutter, or SwiftUI code, running locally.

Open-source alternative to:LocofyAnima

View on GitHubWebsite
Stars
5,265
Forks
507
Open issues
53
Last commit
3 months ago

What is it?

Figma to Code is a Figma plugin that turns a selected frame, component, group, or layer into starter code for web and native targets. Supported outputs include HTML, React (JSX), Svelte, styled-components, Tailwind CSS (with Tailwind 3 and 4 syntax), Flutter widgets, and SwiftUI views. It can also package the generated code and local image assets into small starter projects such as Vite, Next.js, Flutter, or SwiftUI setups.

The generator is deterministic and runs inside Figma's plugin sandbox. It reads the selection through the Figma Plugin API, converts it to an internal tree, and produces code without calling an AI model or sending design data to another service. The published plugin manifest requests no permissions and allows no network domains.

The output is intended as editable scaffolding rather than production code. Auto Layout, nesting, typography, fills, borders, and many effects are mapped, while semantics, interactions, state, and accessibility still need manual work. Conversion gaps are shown as warnings in the interface.

Key features

  • 01Generates HTML, React, Svelte, styled-components, Tailwind, Flutter, and SwiftUI code from a Figma selection.
  • 02Maps Auto Layout, nested frames, alignment, and mixed absolute positioning.
  • 03Supports Tailwind 3 and Tailwind 4 output with optional class prefixes.
  • 04Uses Figma color variables and embeds images as Base64 in HTML output.
  • 05Shows a live preview and warnings for elements that do not translate cleanly.
  • 06Exports Vite, Next.js, Flutter, or SwiftUI starter projects with local assets.

Use cases

  • Handing off a finished Figma component to developers as a first-pass implementation.
  • Prototyping a section of a page in Tailwind or React before wiring up application logic.
  • Creating a Flutter or SwiftUI starting point from an existing mobile design.
  • Working in environments where design files cannot be sent to external AI or cloud services.

Quick start

  1. 1

    Install the free plugin from the Figma Community

  2. 2

    Select a frame, component, group, or layer in Figma and run the plugin, then pick a target

Things to know

  • Requires Figma; the plugin only works inside Figma's plugin environment.
  • Generated code is a visual scaffold that needs human review for semantics, accessibility, and application logic.
  • Licensed under GPL-3.0, a copyleft license that affects how derived code can be distributed.

In collections

Open-source Mac apps

Topics

#figma#figma-plugin#code-generation#tailwind#react#flutter#swiftui#design-to-code#conversion#figma-plugins

FAQ

What is FigmaToCode?
A Figma plugin that converts a selected design into editable HTML, React, Svelte, Tailwind, Flutter, or SwiftUI code, running locally. Figma to Code is a Figma plugin that turns a selected frame, component, group, or layer into starter code for web and native targets. Supported outputs include HTML, React (JSX), Svelte, styled-components, Tailwind CSS (with Tailwind 3 and 4 syntax), Flutter widgets, and SwiftUI views. It can also package the generated code and local image assets into small starter projects such as Vite, Next.js, Flutter, or SwiftUI setups.
Is FigmaToCode free to use? What license does it have?
FigmaToCode is open source under the GPL-3.0 license. Check the license terms before using it in commercial products.
Is FigmaToCode still maintained?
Updated within 6 months. The last commit to FigmaToCode was on Aug 5, 2026.
What can I use FigmaToCode for?
Handing off a finished Figma component to developers as a first-pass implementation. Prototyping a section of a page in Tailwind or React before wiring up application logic. Creating a Flutter or SwiftUI starting point from an existing mobile design. Working in environments where design files cannot be sent to external AI or cloud services.
How do I install FigmaToCode?
Install the free plugin from the Figma Community Select a frame, component, group, or layer in Figma and run the plugin, then pick a target
Where can I get FigmaToCode?
The source code and installation instructions are on GitHub: https://github.com/bernaferrari/FigmaToCode

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects