Enigra CodeGen

Generate code from your Figma designs straight into your workspace, as a new project or inside a project you already have.

Preview. This is an early version. Review the generated code before you use it, and tell us what goes wrong at support@enigra.co.

What it does

• Reads your designs from Figma: browse teams, folders, files and pages, then pick the screens you want.
• Generates code for six targets, with the layout, styles, assets and navigation of your screens.
• Creates a new project, or adds the screens to your existing one without overwriting your work.
• Lets you say what a layer is: tag layers as buttons, inputs, tables, charts or maps, and define reusable components.
• Fills in charts and tables with AI if you want it, using your own API key.

Supported targets

Web options include plain CSS, CSS Modules, Tailwind, shadcn/ui, MUI, Ant Design, Zustand, Redux and NgRx, depending on the target.

Getting started

1. Click the Enigra icon in the activity bar, or run Enigra: Open Codegen from the Command Palette.
2. In Figma, open Settings → Security → Personal access tokens. Create a token with read access to File content, File metadata, Current user, Folders (or Projects) and Library assets, and paste it into Enigra.
3. Add a Figma team or paste a file URL.
4. Pick your screens and start the wizard.
5. Choose a folder and generate.

Figma limits how often a design can be read, so a large first run can wait for several minutes. Later runs use a local cache and are much faster.

Adding screens to an existing project

Choose a folder that already holds a project, and Enigra detects its framework and settings.

• Generated code goes into its own folder, such as src/enigra/. Your other files stay as they are.
• Generated styles apply only to the generated screens, so your own pages keep their look.
• If your own files need a change for the screens to show, such as a new route or package, Enigra lists the changes first. You can apply them all, review each one in a diff, or skip them.
• Skipped changes and any manual steps are written to .enigra/INTEGRATION.md.
• A file that Enigra did not write, or that you changed, is never overwritten without asking.

The project needs React 18, React Router 6, Angular 17, expo-router 4 or iOS 16, or newer. A webpack project needs TypeScript. Enigra tells you before generating if a project does not qualify.

AI support

Graph Enhancing reads the charts in your design and Table Enhancing reads the tables, so the generated code gets real chart and table definitions instead of static shapes.

Both are optional and work with your own Claude, OpenAI or Gemini API key, billed to your account by that provider. Add the key under Default configuration → AI support.

Enigra AI, which needs no key of your own, is shown in the settings but is not available yet.

Plans

The Free plan starts automatically when you connect. One license covers this extension and the Enigra CodeGen Figma plugin, tied to your Figma account.

Each plan also has generation and download quotas. Every screen you pick counts against both. See pricing for quotas and prices.

Data and privacy

Here is what the extension does with your data. Enigra Yazılım Mühendislik Danışmanlık A.Ş. is responsible for this processing.

• Your Figma token stays in VS Code's secret storage and is sent only to api.figma.com.
• Your designs are read from Figma and processed on your computer. They are cached in the extension's storage, and Enigra: Clear Figma Cache removes the cache. They are not sent to Enigra.
• License check: api.enigra.co receives a one-way hash of your Figma user ID, when you connect and when a token is renewed, and a count of the screens you generate. It returns your plan and remaining quota. Register and upgrade links carry the same hash.
• AI support: only when you start it, the layer model and an image of the charts or tables you chose go directly to the provider you selected, under your key and that provider's terms. Your API keys stay in VS Code's secret storage and are sent only to that provider.
• Generated code is written to the folder you choose. A .enigra folder there keeps your settings, tags and file hashes, and you can share it through git.
• No analytics. The extension contains no telemetry or analytics.

To ask about or delete your data, write to support@enigra.co.

Support and legal

• Support: support@enigra.co
• Enigra website
• Refund policy
• The terms of use are in the license of this extension.

Figma is a trademark of Figma, Inc. Enigra CodeGen is not affiliated with or endorsed by Figma.