Generating code
Learn how to generate production-ready code using our plugin in Figma. This step-by-step guide will walk you through the entire process of generating code with the Figma to shadcn/ui plugin.
Instructions
Make sure your Follow these steps to generate production-ready code using the Figma to shadcn/ui plugin:
- Open the shadcn/ui kit for Figma file.
- Open the Figma to shadcn/ui plugin.
- Select the frame or instance you wish to export (note: the plugin does not work on main components).
- Make sure your design follows our best practices from the previous lesson.
- In the plugin interface, click the "plus" icon to add the desktop variant. For mobile versions, select and add them separately.
- Monitor the token count to stay within API limits. Split larger components if needed.
- Click "Generate Code" and wait for the component generation to complete.
After generation, you have three options:
- Copy the code directly into your project.
- Use "Copy CLI" to get the installation command with dependencies.
- Open the component in 'v0' for further customization.
Important - select only instances or frames
The plugin won't generate code for the main components. Make sure that you select a frame or an instance in order for it to generate the code properly.
