How to Integrate Bolt.new with Figma

The simplest way to use Figma with Bolt.new is also the most powerful: take a screenshot of your design and paste it directly into your Bolt prompt. Bolt's AI is multimodal — it can see and interpret images you attach. When you combine a screenshot with text instructions, Bolt attempts to reproduce the visual layout in React/Tailwind. To take the best screenshot for Bolt: in Figma, select the frame you want to reproduce, press Ctrl+Shift+H (or Cmd+Shift+H on Mac) to fit the frame to the screen, then use your OS screenshot tool to capture it. Alternatively, right-click the frame in Figma → Copy/Paste as → Copy as PNG to copy a clean frame screenshot directly to your clipboard. For effective prompts, combine the screenshot with specific context: your color palette (as hex codes), which Tailwind classes to use for spacing, the font stack, and any behavior or interactivity the design implies. The more context you provide alongside the visual, the closer Bolt's first attempt will be to your design. Here is an effective prompt structure for screenshot-based design translation: start with what you want ('Build this landing page hero section'), describe the layout briefly ('two-column layout with text on left, illustration on right'), provide your brand colors ('use #1E3A5F for the navy background, #4A9BE3 for the accent blue'), specify the font ('use the Inter font family'), and note any interactive elements ('the CTA button should have a hover state that lightens the background'). For complex pages, break the design into sections and build them one at a time. Prompting Bolt to build a full 8-section landing page from a single screenshot often results in less accurate code than building each section individually with dedicated screenshots.

Screenshots give Bolt the overall design but not precise measurements. Figma Dev Mode (formerly the Inspect panel) exposes the exact CSS values behind every design decision: spacing, font sizes, colors, border radius, shadows, and opacity. These values let you craft prompts that specify exact style values rather than relying on Bolt to estimate from a screenshot. To access design values: in Figma, press Shift+D (or use the toolbar icon) to enter Dev Mode. Click any element to see its CSS properties in the right panel. Key values to extract: - Colors: Figma shows hex codes and opacity. Copy hex values (e.g., #1E3A5F) for use in Tailwind's arbitrary value syntax ([#1E3A5F]) or add them to your tailwind.config.js as named colors. - Spacing: Figma shows pixel values for padding, margin, and gap. Convert to Tailwind by dividing by 4: 16px → 4 (p-4), 24px → 6 (p-6), 32px → 8 (p-8). Non-standard values use arbitrary syntax: 18px → p-[18px]. - Border radius: Figma shows radius in pixels. Tailwind equivalents: 4px → rounded, 8px → rounded-lg, 16px → rounded-2xl, 9999px → rounded-full. - Typography: Figma shows font-family, font-size, line-height, font-weight, and letter-spacing. Convert sizes: 16px → text-base, 18px → text-lg, 24px → text-2xl, 32px → text-3xl. - Shadows: Figma's drop shadow values (x, y, blur, spread, color, opacity) can be translated to Tailwind shadow utilities or custom CSS shadow values. For building a consistent design system in Bolt, extract your Figma color and spacing tokens once and provide them upfront in your Bolt project: 'Here is my design system — please use these exact values throughout the project.' Then reference the design system in subsequent component prompts.

1// tailwind.config.js — add your Figma design tokens
2import type { Config } from 'tailwindcss';
3
4const config: Config = {
5  content: ['./src/**/*.{ts,tsx}'],
6  theme: {
7    extend: {
8      colors: {
9        // Paste your Figma color tokens here
10        brand: {
11          navy: '#1E3A5F',
12          blue: '#4A9BE3',
13          'light-blue': '#E8F4FE',
14        },
15        neutral: {
16          50: '#FAFAFA',
17          100: '#F5F5F5',
18          900: '#171717',
19        },
20      },
21      spacing: {
22        // Custom spacing from your Figma grid
23        // Add non-standard values that don't map to default Tailwind scale
24        '18': '4.5rem',  // 72px
25        '22': '5.5rem',  // 88px
26      },
27      fontFamily: {
28        // Match your Figma font choices
29        sans: ['Inter', 'system-ui', 'sans-serif'],
30        heading: ['Cal Sans', 'Inter', 'sans-serif'],
31      },
32      borderRadius: {
33        // If your design uses non-standard radii
34        'xl2': '1rem',   // 16px
35        'xl3': '1.5rem', // 24px
36      },
37    },
38  },
39};
40
41export default config;

Figma is an excellent source for production-ready design assets. Icons, illustrations, logos, and background graphics can be exported directly from Figma and used in your Bolt project without any API integration — just file export and upload. To export SVG icons from Figma: select the icon component or frame, click the '+' button in the Export section of the right panel (visible in Design mode), select SVG as the format, and click Export. Figma exports clean, optimized SVG markup. For multiple icons, select all of them (hold Shift and click), and export them all at once — Figma generates a ZIP file with individual SVG files named after the component/layer names. For SVGs, prefer exporting the icon as SVG markup rather than a file link, then paste the markup directly into a React component. This allows you to control fill color via CSS (currentColor) and avoids an additional HTTP request: For PNG images (illustrations, product images, background graphics): right-click the frame or element → Copy/Paste as → Copy as PNG for quick one-time use. For production assets, use the Export panel and choose 2x or 3x scale for retina screen support, then drop the exported files into your Bolt project's public/ folder. In your Bolt prompts, reference the exported filenames: 'Add a hero illustration using the image at /hero-graphic.png.' Bolt will include the image in the generated component code with the correct path.

1// Example: SVG icon component using Figma-exported icon markup
2// 1. In Figma: select icon → Export as SVG → Copy SVG code
3// 2. In Bolt: create this component and paste SVG markup
4
5interface IconProps {
6  size?: number;
7  color?: string;
8  className?: string;
9}
10
11export function IconSettings({ size = 24, color = 'currentColor', className }: IconProps) {
12  // Paste your Figma-exported SVG markup here
13  // Replace hardcoded width/height/fill with props
14  return (
15    <svg
16      width={size}
17      height={size}
18      viewBox="0 0 24 24"
19      fill="none"
20      xmlns="http://www.w3.org/2000/svg"
21      className={className}
22    >
23      {/* Figma-exported SVG paths go here */}
24      <path
25        d="M12 15a3 3 0 100-6 3 3 0 000 6z"
26        stroke={color}
27        strokeWidth="1.5"
28        strokeLinecap="round"
29        strokeLinejoin="round"
30      />
31      <path
32        d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"
33        stroke={color}
34        strokeWidth="1.5"
35        strokeLinecap="round"
36        strokeLinejoin="round"
37      />
38    </svg>
39  );
40}

The quality of Bolt's code output from Figma designs depends largely on how well you describe the design in your prompt. Screenshots give Bolt visual context, but text descriptions tell it about behavior, semantics, and specific requirements that visuals cannot convey. Here are the most effective prompt patterns for Figma-to-Bolt translation: 1. Include the screenshot + precise color codes: 'Build this component [screenshot]. Use exact color #1E3A5F for the dark background and #4A9BE3 for the primary button. The card has a 16px border radius and a subtle box shadow.' 2. Reference your design system: 'Using the brand colors and spacing from my tailwind.config.js, build this navigation component [screenshot].' 3. Specify interactive states explicitly: 'The button has three states: default (blue), hover (dark navy background), and disabled (50% opacity, no cursor pointer). The card lifts with a stronger shadow on hover.' 4. Describe the component hierarchy: 'This is a ProductCard component that contains: a thumbnail image (aspect-ratio square), a category badge (top-left overlay), a product name (font-semibold, line-clamp-2), a price (text-xl font-bold), and an Add to Cart button.' 5. Ask for the exact Tailwind classes if you need them: 'Show me the Tailwind classes for the header typography — font size, line height, and letter spacing — based on this design [screenshot].' This is faster than computing them yourself from Dev Mode values. For design systems with many components, build a 'design tokens file' first by prompting: 'Create a src/lib/design-tokens.ts file with these values from my Figma design: [list of colors, spacing, typography].' Then reference this file in all subsequent component prompts.

1// Effective Bolt prompt templates for Figma designs
2// (These are prompt text templates, not code — save them as notes)
3
4/*
5PROMPT TEMPLATE 1: Screenshot-based component
6---
7Build [component name] based on this design [attach screenshot].
8
9Design specs:
10- Background: #[hex from Figma]
11- Primary color: #[hex]
12- Border radius: [px from Inspect] → Tailwind: rounded-[size]
13- Font: [font family from Inspect]
14- Padding: [px] → Tailwind: p-[n]
15
16Behavior:
17- [describe any hover states, animations, or interactions]
18- [describe responsive behavior if applicable]
19
20Use TypeScript. Use Tailwind CSS only (no custom CSS unless absolutely necessary).
21---
22
23PROMPT TEMPLATE 2: Icon from Figma export
24---
25Create an Icon component at src/components/icons/[name].tsx using this SVG markup
26from Figma (pasted below). Accept size (number, default 24) and className (string) props.
27Set fill/stroke to 'currentColor' so color can be controlled via Tailwind text-color classes.
28
29[paste SVG markup here]
30---
31
32PROMPT TEMPLATE 3: Design system setup
33---
34Update tailwind.config.js to add these design tokens from my Figma file:
35
36Colors:
37- Brand Navy: #1E3A5F (use as 'brand-navy')
38- Brand Blue: #4A9BE3 (use as 'brand-blue')
39- Success: #22C55E (use as 'success')
40- Error: #EF4444 (use as 'error')
41
42Typography:
43- Heading font: 'Inter', weight 600/700
44- Body font: 'Inter', weight 400/500
45- Font sizes: 14px, 16px, 18px, 24px, 32px, 48px
46
47Border radius: 4px (sm), 8px (md), 16px (lg), 9999px (full)
48---
49*/

Figma's plugin ecosystem includes several community-made tools that attempt to generate React and Tailwind code directly from Figma designs. While these don't provide perfect code ready for production, they can jumpstart your Bolt prompts or give you accurate component structure. Relevant Figma plugins for Bolt.new workflows: - Figma to React (by Builder.io): generates JSX from Figma frames with props structure. Export JSX → paste into Bolt prompt → ask Bolt to 'clean up this generated code and convert any inline styles to Tailwind classes while preserving the component structure.' - CSS to Tailwind (community): converts CSS values from the Inspect panel to Tailwind class suggestions. Run on a selected element to get a list of Tailwind classes to paste into your Bolt prompt. - Tokens Studio (Style Dictionary): exports design tokens as JSON, which you can paste into your tailwind.config.js via a Bolt prompt. - Figma to Code (by Anima): generates React + Tailwind code from frames. Output needs cleanup but captures layout structure well. Find these plugins in the Figma Community tab (Shift+Cmd+P → Plugins → Browse) or at figma.com/community. Install any plugin with one click. The recommended workflow: export rough code from a Figma plugin, paste it into a Bolt prompt, and ask Bolt to: (1) convert inline styles to Tailwind classes, (2) make the component properly typed with TypeScript, (3) split into sensible sub-components, and (4) make it responsive. Bolt handles the cleanup work that plugin-generated code typically needs.