# Code to Canvas: Codex Source: https://www.youtube.com/watch?v=peHL-0u-pVs Recap page: https://rapidrecap.app/video/peHL-0u-pVs Generated: 2026-03-12T12:01:39.64+00:00 --- ## Quick Overview The video demonstrates how to bring designs from a local codebase into a Figma canvas and push updates back to the code using two methods: starting from code to Figma canvas, and Figma canvas to code, leveraging Figma's Multi-Component Plugin (MCP) servers for seamless integration and iteration. **Key Points:** - The process involves two main directions: code to Figma canvas and Figma canvas to code, facilitated by Figma's MCP servers. - Code to Canvas: The process starts by running the local app via 'npm run dev' and sending the design to a specific Figma file using a capture URL generated by the tool. - Figma to Code: After setting up the Figma MCP server (e.g., using the 'Figma Implement Design' skill), users can select design elements (like the filter panel) and copy a link to the selection to use in Codex. - The demonstration highlights iterating on the filter panel design, showing the ability to directly manipulate elements in Figma and see those structural/styling updates reflected in the code. - The speaker confirms that the tool supports sending full screens or specific parts of the design (like the filter menu) to Figma. - Best practices include having a well-structured design hierarchy in Figma and utilizing auto layout where possible for easier AI interpretation. - The demonstration concludes by showing the command 'Figma MCP get_design_context tool' being used to pull design context from Figma node 2177 to compare against the current filter panel component. ![Screenshot at 00:28: The screen displays a list of recipes on a local web application, demonstrating the initial state of the UI before code-to-canvas synchronization is shown.](https://ss.rapidrecap.app/screens/peHL-0u-pVs/00-00-28.jpg) **Context:** Ana Boyer, a Designer Advocate from Figma, introduces a workflow demonstrating how developers and designers can synchronize their work between a local codebase and Figma using Codex, which relies on Figma's Multi-Component Plugin (MCP) servers to bridge the gap between design files and running application code. This capability allows for iterative design refinement where changes made in one environment can be easily transferred to the other. ## Detailed Analysis Ana Boyer explains the two-way synchronization process between a local codebase and Figma using Codex and MCP servers. First, demonstrating Code to Canvas (00:03), she shows a local app running, specifically a recipe listing page. She navigates to the 'Skills' section (00:55) and enables the 'Figma Implement Design' skill. She then runs a command to send the current local app state to a Figma file, confirming the capture was added to the 'Further explorations' area in the specified Figma file (00:38). Second, demonstrating Canvas to Code (01:20), she navigates to the MCP servers settings and installs and authenticates the Figma server. She then navigates to a specific Figma page showing various iterations of a 'Filters' panel design (03:04). She selects the 'Panel Filter - Variation 4' design, copies a link to the selection (04:46), and pastes it into Codex, prompting an update to match the new design structure (05:04). The terminal output confirms the tool is exploring files and aligning the Figma structure with the existing filter panel implementation (05:22). Finally, she previews the updated design locally (07:25) to show the changes reflected in the running application, such as updated filter options and styling. ### Code to Canvas Workflow - Running the local app via 'npm run dev' - Enabling 'Figma Implement Design' skill - Executing the capture command to push the running UI to a Figma file ### Figma to Code Setup - Navigating to MCP servers settings - Installing and authenticating the 'Figma' server - Using the 'Figma Implement Design' skill for bidirectional sync ### Design Iteration Example - Selecting a specific design variant ('Panel Filter - Variation 4') in Figma - Copying a link to the selection - Prompting Codex to update the existing code to match the selected design structure ### Post-Update Validation - Running 'npm run build' successfully - Observing that the updated filter panel in the local host now matches the new Figma design structure, including updated labels and styles ![Screenshot at 00:00: Ana Boyer introduces the topic while seated in front of a laptop, setting the stage for a technical demonstration.](https://ss.rapidrecap.app/screens/peHL-0u-pVs/00-00-00.jpg) ![Screenshot at 00:28: A live preview of the local application displays a scrollable recipe listing, which is the UI element being synchronized.](https://ss.rapidrecap.app/screens/peHL-0u-pVs/00-00-28.jpg) ![Screenshot at 01:15: The MCP servers settings screen shows the available recommended servers, including the one for Figma, which is enabled via a toggle switch.](https://ss.rapidrecap.app/screens/peHL-0u-pVs/00-01-15.jpg) ![Screenshot at 03:53: The Figma canvas displays multiple component variations for the 'Filters' panel, illustrating the design exploration phase.](https://ss.rapidrecap.app/screens/peHL-0u-pVs/00-03-53.jpg)