Figma to Code: what the plugin actually generates, and what it refuses to

The gap between a Figma frame and a first commit

The project targets one specific moment: a design is approved, and someone has to start writing markup. Selecting a frame, component, group or single layer produces an editable visual scaffold that can be copied or downloaded as a starter project. The README frames this as "a readable visual scaffold that you can copy, refine, or download as a starter project", which is a narrower promise than the phrase Figma to code usually carries.

The audience follows from that. It suits engineers who will own the markup afterwards, and teams whose design files cannot leave Figma: the README notes the plugin is useful "for quick handoffs as well as teams where external design processing is not allowed". It does not suit anyone hoping to skip the implementation step, because the README says the output is a starting point, not a generated production application.

A compiler in the plugin sandbox, not a screenshot-to-code service

The README describes five stages: read the selected nodes and their layout and style metadata, normalize them into an internal tree that can be transformed without modifying the source document, optimize parent-child relationships and Auto Layout, sizing, alignment and positioning, generate through the selected backend, then explain by returning code, preview data, extracted assets and conversion warnings.

That pipeline is why the plugin runs offline. The repository manifest.json declares an empty permissions array and a networkAccess block with allowedDomains set to "none", so the published plugin has no network destination to send a selection to. The README is careful about the scope of that claim: Figma itself is a connected product, and the plugin simply does not add another destination.

The generator is deterministic TypeScript rather than a model call. The README states the conversion rules are public TypeScript that can be inspected, tested and improved. In practice that means the same selection and the same options produce the same output, which is a property a prompt-based tool cannot offer, and it also means the plugin will never guess a component name, an interaction or a redesign.

Installing the plugin and generating your first component

There is no package to install. Distribution is through the Figma Community listing linked from the README, and the plugin runs inside Figma Design or as a code generator in Dev Mode.

Start by installing it from the Figma Community page:

open https://www.figma.com/community/plugin/842128343887142055

Select a frame, component, group or individual layer in your file, then run the plugin. The README's own sequence is: select a layer, run the plugin in Figma Design or pick a codegen output in Dev Mode, choose a target, adjust the options that apply to that target, then review the preview and warnings before copying the code or downloading a starter project.

The README gives one piece of advice worth repeating: smaller selections usually create better component boundaries, and generating one reusable section or control and integrating it yourself tends to work better than converting a whole page. If you want to build the plugin from source rather than install it, the repository is a pnpm and Turborepo workspace pinned to Node 24.x:

pnpm install
pnpm build

The root package.json exposes build, build:watch, dev, lint, test, format and format:check through turbo, so the monorepo layout under apps/ and packages/ is where the framework backends live.

The warnings panel is the honest part of the interface

The README states that target-specific gaps are surfaced in the interface rather than silently guessed. Vector support is optional for web and limited in native targets, and stars, polygons, lines, gradients and effects do not always have an equivalent API in the destination framework. When a detail cannot translate cleanly, the plugin reports a warning.

Treat that panel as the real quality signal. A clean conversion with no warnings is a scaffold you can trust structurally; a conversion with several warnings is telling you which layers you will rebuild by hand in Flutter or SwiftUI. The README also notes that large selections cost more memory, that images and complex layer trees take longer to process, and that focused selections are more reliable. That is a practical constraint on how you use the tool: one section at a time, not a whole page.

What it cannot do, by design

The limitations list is unusually explicit, and it is the main reason to read the README before adopting anything. There is no AI inference, so the plugin does not invent semantics or interactions. There is no codebase connection: it cannot inspect a repository, map existing components, import an application into Figma, synchronize generated files, or push later design changes into your code. There is no application logic, so state management, data loading, navigation, backend behaviour and business rules are out of scope. Accessibility is not invented either: semantics, labels, keyboard behaviour, dynamic type and responsive breakpoints still need human review.

If any of those is the reason you were looking at a Figma-to-code tool, this is the wrong tool. A design document describes visual structure, and the README says so directly. The output is a scaffold of divs, styles and layout, not a feature.

How it differs from Anima, Locofy and model-based converters

The closest alternatives are Anima and Locofy, and the difference is architectural rather than cosmetic. Both of those products are built around a hosted service that inspects your design and produces code, typically with an account and a mapping step that links Figma components to components in your repository. FigmaToCode does the opposite: the conversion runs in Figma's plugin sandbox, the manifest allows no network domains, and there is no repository mapping at all.

That trade is legible. You give up component reuse and any hope of keeping generated files in sync with later design changes. You get a generator you can read, a conversion that is deterministic, and a selection that never leaves Figma. For a team with a strict rule about design data leaving the tenant, the second property decides the question. For a team trying to keep a large codebase aligned with a moving design system, the first one does.

Licence, maintenance and the cost of upgrading

The project is licensed GPL-3.0, as stated in the repository. That covers the generator source. It does not automatically attach to the HTML, Tailwind, Flutter or SwiftUI you generate from your own design, but the boundary between a tool and its output is a legal question rather than a technical one, and the README does not address it. If you plan to embed the plugin's code in a proprietary product, that is the point to raise with counsel.

On maintenance, no last push date and no release information is available, so there is no basis for describing the project as actively developed or regularly updated. What can be said is that the repository is not archived and that it is a pnpm workspace with turbo scripts for build, test and lint, which is the shape of a project set up for ongoing work. The upgrade cost is low by construction: the plugin installs from Figma Community, so there is no dependency in your application to bump, and generated files are yours to edit. The cost that does accumulate is the one the README warns about, namely that later design changes are not pushed into your code, so every subsequent design revision is another manual pass.

Editorial conclusion

Adopt Figma to Code if you want a deterministic, offline scaffold you will edit by hand, and if your team is comfortable with the GPL-3.0 licence on the generator source. Do not adopt it expecting component mapping, state, navigation or accessibility to appear: the README states plainly that it cannot infer any of those. Before you commit, select one real component from your own design system, run the plugin in Dev Mode, and read the warnings panel; that output is the honest sample of what you will get for the rest of the file.

Frequently asked questions

Official sources

1. Official documentation
2. Official README
3. Project repository