FROM FIGMA TO CODE

Reinvented by AI

THE PROBLEM

Design-to-code is still slow, manual, and painfully repetitive

• Figma gives us beautiful interfaces — but not production-ready code
• Developers spend hours (sometimes days) rebuilding UI by hand
• Endless pixel-pushing, layout reconstruction, naming cleanup, refactoring…
• Anyway, Matt will instantly spot the place where it's 6px instead of 7px
• It’s one of the biggest bottlenecks between ideas and shipped product

​

Bottom line:�Today, converting Figma into real code is expensive, tedious, and far from automated — even in 2025

GOAL

Turn a Figma layout into real, working WP admin code — automatically

• PHP + CSS + JS output
• Minimal manual work
• AI does the heavy lifting

STARTING POINT

• Junie built a minimal WordPress plugin with one admin page
• It is a target surface where AI will insert the generated UI

CHOOSING A FIGMA SOURCE

• Took an open-source UI from Figma Community
• Why not our internal designs?
• No edit rights, and the pipeline is the same
• Used the local Figma app
• Local app works faster

FIGMA MCP

• Configured Figma MCP to extract design structure automatically
• Settings are simple
• It works — but only up to a point…

​

{� "mcpServers": {� "Framelink_MCP_for_Figma": {� "command": "cmd",� "args": [� "/c",� "npx",� "-y",� "figma-developer-mcp",� "--figma-api-key=my-secret-key",� "--stdio"� ]� }� }

MCP PROBLEM AND SWITCHING STRATEGY

Problem

• MCP quickly hit rate limits with error 429
• Automatic extraction became unreliable

Solution

• The Figma plugin “Figma to JSON Exporter”
• I export exactly what I need — specific layers or groups

FROM JSON TO CODE

Then I asked Junie: ��“Make the PHP + CSS from this JSON as admin page content.”

�Junie generated:

• Clean PHP markup
• CSS for layout
• JS for interactions

​

HELPING JUNIE

Manual CSS tuning

• Dev Tools -> Sources ->Workspace -> Add Folder
• Elements -> Styles -> change and control the result
• Sources->CSS file-> Save (Ctrl+S)

Manual SCSS tuning

• Elements -> Styles -> change and control the result
• See on the map the line number in SCSS
• Fix SCSS -> Save
• Watcher rebuilds CSS

​

​

​

RESULT

A fully working admin UI page inside WordPress —�generated end-to-end from a Figma design, using only JSON + AI

​

CONCLUSION

• Figma → Code is no longer a dream
• With the proper workflow, AI can generate production-ready admin interfaces in minutes — not days
• In my opinion, this approach makes Figma implementation 3x-5x times faster

​

RESOURCES

Resources

• Open-source Figma design
• Figma plugin “Figma to JSON Exporter”
• WP Sample Plugin repository

Prompts

1. duo_render_admin_page() contains dummy admin page content. The attached JSON is the Figma design for this page. Replace the dummy content with the provided FIgma design. Create PHP and CSS code by WordPress standards. Read this design thoroughly and implement each element on the page.��2. Change the order of <aside and <main��3. Check width of <aside and <main and correct. Then, check their internal content and make it exactly as in Figma��4. Update the content of the duo-panel__row duo-panel__row--picture with the attached Figma JSON��5. Update `duo-toggle__ui` styles in accordance with Figma attached��6. Add Navigation as the leftmost column to the `duo-layout`. The Figma design is attached.

​