Generating code

Instructions

Make sure your Follow these steps to generate production-ready code using the Figma to shadcn/ui plugin:

1. Open the shadcn/ui kit for Figma file.
2. Open the Figma to shadcn/ui plugin.
3. Select the frame or instance you wish to export (note: the plugin does not work on main components).
4. Make sure your design follows our best practices from the previous lesson.
5. In the plugin interface, click the "plus" icon to add the desktop variant. For mobile versions, select and add them separately.
6. Monitor the token count to stay within API limits. Split larger components if needed.
7. 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.