Building Frontend UIs with Codex and Figma | Figma Blog (opens in new tab)

Figma’s Codex integration creates a two-way workflow between coding and visual design. Using the Figma MCP server, developers can turn Figma designs into implementation context for Codex, then bring running interfaces back into editable Figma files. The result is a faster cycle for building, comparing, refining, and collaborating on frontend experiences.

Starting an Application from a Design

• Developers can select frames or nodes in Figma Design, Figma Make, or FigJam.
• They copy a direct selection link by right-clicking a frame and choosing Copy as → Copy link to selection.
• The link is provided to Codex with an implementation prompt, such as using existing design-system components.
• Codex calls the MCP server’s get_design_context tool to retrieve:
  • Layout information
  • Styles and visual properties
  • Component details
  • Other design context needed for code generation
• The MCP server supports additional tools and prompts for extracting information from Figma files.

Bringing Code Back to the Canvas

After iterating on the implementation, developers can import the live interface into Figma rather than recreating it manually.

• The application must be rendered locally or on a publicly accessible web server.
• Codex uses the generate_figma_design tool to convert the running UI into editable Figma frames.
• Codex guides users through:
  1. Creating or selecting a Figma file
  2. Choosing a workspace
  3. Setting up the application for capture
  4. Opening the application in a browser session
• The capture toolbar supports:
  • Entire screen: Captures the currently displayed screen
  • Select element: Captures a specific UI component
  • Open file: Opens the resulting Figma design for inspection

Iterating Between Code and Design

Once the interface is in Figma, teams can use the canvas to explore and refine the product.

• Add design-system components.
• Convert styles, fonts, and colors into variables.
• Adjust layouts and add annotations.
• Design interactions, empty states, and alternative flows.
• Collaborate on multiple visual directions.
• Send the refined design back to Codex through the same MCP workflow.

The article presents this round trip as a continuous loop: design informs code, code produces a working interface, and the interface returns to Figma for further exploration. This lets teams begin from either a design or an implementation while preserving context and reducing the friction between developers and designers.