AI Dev

How to Use

In Figma, open the plugin.
Click the gear icon (Settings).
Configure settings:
- License Key: required (you will find your license key in Customer Portal after logging in)
- Anthropic API Key: required. (Used to call Claude.) You will find it in your Anthropic account API keys after logging in.
- Model: choose Claude Sonnet 4.6 or Claude Opus 4.6.
Go back to the plugin UI and select one layer/frame in your Figma file (the plugin uses the first selected item).
(Optional) Enter Extra details (e.g., dropdown items that should appear).
Click Generate React Code.
The generated React code appears in the output box—click copy and paste it into your AntD React project.

Tips for Better Results

Start with simpler components (generate in smaller chunks like header/cards/table rather than entire pages).
Add concrete “extra details” when the UI has dynamic lists (table rows, dropdown items, tabs, etc.).
If the result doesn’t match expectations, refine your Figma selection and/or add more extra details, then re-generate.

Questions and answers

Do I need an API key?

Yes. You must provide an Anthropic API Key. Without it, code generation is disabled and the backend returns an error ("API key is required").

Do I need a License Key?

Yes. The plugin requires a License Key and validates it before enabling generation.

How much will I pay for code generation?

You pay for code generation via your Anthropic account (Claude usage). The plugin sends your selected layer plus your prompt to Claude. Exact cost depends on:

the selected model (Sonnet vs Opus),
the size/complexity of the design you select,
and the amount of code Claude generates.

Where is my API key stored?

The plugin stores the API key locally.

Which model should I choose?

Sonnet 4.6: typically faster/cheaper for most UI generation.
Opus 4.6: may produce higher-quality results for complex layouts.

If you’re unsure, start with Sonnet and switch to Opus when you need more accuracy.

What should I write in “Extra details”?

Add specifics that aren’t obvious from the image alone (dropdown/tab items, button labels, table columns, empty-state text, etc.). The plugin appends your text to its generation prompt.

Why is “Generate React Code” disabled?

Common reasons:

no layer is selected,
License Key is missing/unvalidated,
Anthropic API Key is missing,
or you’re still on the default “No layer selected” state.

What if I get “Invalid API key”?

Double-check that your Anthropic API key is correct and active, then save it again in Settings.

Can I generate code for multiple layers at once?

No. The plugin uses the first selected layer only. Select one component at a time, generate, then repeat for other parts of your UI.

The output box is empty—what happened?

The plugin expects the server response to contain a fenced jsx code block. If the response doesn’t match that format, the plugin may not extract the code. Try generating again with a clearer selection and more “Extra details”.

Will the generated code compile immediately?

Most outputs are meant to be copy/paste-ready, but you may need to install or import dependencies based on what appears in the design (for example, charts).