for developers
The debug view of the Builder Figma plugin's Design System tab demonstrates how your mapped components appear during code generation.
The debug view can aid you in troubleshooting component mapping issues, testing components across different frameworks, and seeing immediate updates from code changes.
- To utilize debug view, you must have already published mapped components to your Builder Space. See Map Components for more details.
- Preview your mapped components by selecting your design and then clicking the debug view icon on the Design System tab.
To open the debug view:
- Open the Builder Figma plugin.
- Select a design within Figma that uses one or more mapped components.
- Click the Design System tab.
- Next to the Mappings in Selection heading, click the small bug icon.
The window will expand to show the debug view.
Once the debug view has been opened, you will be able to see a preview for mapped components within the design.
The preview shows both the .mapper file as well as how the mapped component will be rendered based on the Figma component's properties.
For example, in the image below the SimpleButton component has key-value pairs of buttonText="Buy Now" and variant="dark".
Within the debug view, toggle the code generation framework by clicking the dropdown menu above the Generated Code panel. This will adjust the generated code to be in the specified front-end framework.
If your designs are not importing correctly, you may benefit from using Precise Mode. To learn more, see Export Modes and Precise Mode Configuration.
With your design in a Publish Space, Get Started with Publish and create interactive pages through the Visual Editor, or Integrate Pages with your codebase.