Figma To Code

The Figma to Code function enables the AI programming in agent mode to convert your input Figma design drafts into corresponding frontend webpage implementations. Compared with the function of Figma MCP, our restoration of design drafts is more accurate and clear.

Steps

1. Open the IDE and select a project directory.
2. On the Figma page, select the corresponding design draft node in Figma, then right-click and select Copy/Paste as > Copy link to selection.
3. Paste the copied URL into the input of the agent mode in CodeFlicker.
4. Enter your requirements and send them, then complete the Figma authorization as prompted.
5. Wait for the agent to finish restoring the Figma design draft.