Design to code Workflows
shadcn/studio Figma UI Kit helps you move from design to code faster using the shadcn/studio Figma Plugin.
You can design your UI in Figma using ready-made components, blocks, templates, and themes, then convert selected frames into React + shadcn/ui code with AI support using Figma Plugin.
Figma to React Code guide
For full plugin setup, usage and generate code, refer to the shadcn/studio Figma Plugin documentation.
Follow these guidelines to get the best results from the AI code generation.
- Design in Figma : Create your layout using shadcn/studio components, blocks, templates, and variables.
- Customize your theme: Apply your brand colors, light/dark mode, radius, typography, and theme variables.
- Select your frame: Choose the frame, section, or component you want to convert into code.
- Open the Figma Plugin: Launch the shadcn/studio Figma Plugin and use the design-to-code feature.
- Generate code with AI : Convert your selected design into React + shadcn/ui code using AI support.
- Copy and refine: Copy the generated code into your project and refine it based on your real data, states, and functionality.
Import/Export Themes
Use shadcn/studio theme tools to keep your Figma design and shadcn/ui project visually aligned.
With the Figma plugin, you can import shadcn/ui themes into Figma, export Figma variables for your project, and apply themes created with the shadcn/studio Theme Generator. This helps you maintain consistent colors, radius, and design tokens across design and code.
Recommended flow:
- Create or choose your theme.
- Import the theme into Figma using the plugin.
- Apply the theme to your design.
- Export variables when needed for your shadcn/ui project.
For detailed steps, refer to the Advanced Variable Management section in the Figma plugin docs.
Using Blocks CLI
Use Blocks CLI when you want to install the exact shadcn/studio block from Figma into your code project.
Select an original block frame in Figma, open the shadcn/studio Figma plugin, go to the Blocks CLI tab, and copy the generated CLI command. This is best when you are using unmodified Pro or Free blocks from the Figma file. If you have changed the block design, use the Generate Code feature instead.
Recommended flow:
- Select an original block frame from the Figma file.
- Open the shadcn/studio Figma plugin.
- Go to the Blocks CLI tab.
- Copy the generated CLI command.
- Run it inside your project terminal.
For detailed steps, refer to the Blocks CLI Integration section in the Figma plugin docs.
Using Drag and Drop Builder in Figma Plugin
Use the Drag and Drop Builder when you want to quickly build layouts (pages) inside Figma without manually assembling every section.
The plugin lets you browse and insert production-ready blocks, dashboards, and landing pages directly into your Figma canvas. You can use it in a blank file or inside an existing project, then customize text, colors, images, and layout based on your brand.
Recommended flow:
- Open the shadcn/studio Figma plugin.
- Choose Drag & Drop Blocks or Drag & Drop Landing Pages.
- Browse or search the available designs.
- Drag and drop the selected block or page into your canvas.
- Customize it based on your project needs.
For detailed steps, refer to the Figma Blocks Drag and Drop Builder section in the Figma plugin docs.