Development

Implementing themes

Use our Figma Plugin (recommended)

You can use our Figma to shadcn/ui plugin to quickly convert Figma variables to CSS code that you can use in your project's globals.css file. Check our documentation for more details.

Implement themes manually

Before implementing the theme, familiarize yourself with how theming works in shadcn/ui by reading their official documentation.

1. In dev mode, navigate to the Plugins tab.
2. Search for "Variables exporter for dev mode" in the search bar.
3. Run the plugin and click the "Export Variables" button.
4. Locate the '/ 2. Theme.Default.tokens.json /' section in your exported JSON.
5. Update your project's CSS variables based on the exported data. Check for the color values in the TailwindCSS section if they are referenced. See the example below how ‘primary-light’ and ‘primary-light’ JSON variables were translated to the CSS variables. Make sure to convert the hex values into hsl values.
6. For other theme settings like font family, update your CSS according to the JSON variables.
7. To edit the styling of the components, check which components were marked as modified by designers.
8. Adjust the styling of components in your code to match the designs in Figma.

JSON

/* 2. Theme.Default.tokens.json */

{
  "colors": {
    { . . . }
    "primary-light": {
      "type": "color",
      "value": "{tailwind colors.blue.600}"
    },
    "primary-dark": {
      "type": "color",
      "value": "{tailwind colors.blue.700}"
    },
   { . . . }
  },

CSS

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 221 83% 53%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 224 76% 48%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

Implementing components

Implement components with our plugin (recommended)

Our Figma to shadcn/ui plugin can help you generate shadcn/ui components based on your designs in Figma. Make sure to check our our documentation for more details.

‍

Implement components manually

Implementing shadcn/ui components based on your Figma designs can be an efficient way to bridge the gap between design and development. Here's a step-by-step guide on how you can do this:

1. Analyze the Figma design: Start by thoroughly examining your Figma design. Take note of the components, layout, colors, typography, and any custom elements.
2. Identify matching shadcn/ui components: shadcn/ui offers a wide range of pre-built components. Identify which ones closely match the elements in your Figma design. Common components include Button, Card, Input, Dropdown, etc.
3. Set up your project: Ensure you have a Next.js project set up with shadcn/ui installed. More details here.
4. Implement the components: Create React components that use shadcn/ui components as building blocks. Here's an example of how you might implement a card from your Figma design.
5. Style your components: Use Tailwind CSS classes to style your components to match your Figma design. shadcn/ui is built with Tailwind, so you can easily customize the appearance.
6. Customize theme: Adjust your Tailwind configuration to match your Figma design system. More details on theming here.
7. Handle responsive design: Use Tailwind's responsive classes to make your components responsive, matching any breakpoints defined in your Figma design.
8. Implement interactions: Use React hooks to add any interactions specified in your Figma prototype.
9. Accessibility: Ensure your implementation maintains accessibility. shadcn/ui components are built with accessibility in mind, but double-check that your usage and any customizations preserve this.
10. Iterate and refine: Compare your implemented components with the Figma design. Make adjustments as needed, possibly creating custom components or extending shadcn/ui components for perfect alignment with your design.

Remember, while shadcn/ui provides a great starting point, you may need to create custom components or extend existing ones to perfectly match your Figma designs. The goal is to use shadcn/ui as a foundation and customize as needed to achieve your specific design requirements.

By following these steps, you can efficiently implement shadcn/ui components based on your Figma designs, creating a cohesive and visually appealing user interface that closely matches your design specifications.