How to Integrate Bolt.new with Framer

Before investing time trying to copy-paste Framer's code output, understand the compatibility boundaries. Framer's code export wraps components in Framer's own component system and depends on the `framer` package — not the standalone `framer-motion` package available on npm. When you click 'Copy Code' in Framer, the output contains imports like `import { motion, addPropertyControls } from 'framer'` and references to Framer-specific APIs that have no equivalent in a standard Vite or Next.js project. Additionally, Framer components often use Framer's own layout system, breakpoint handling, and variant system. These are not compatible with Tailwind CSS's utility classes or standard React state patterns. Even when you strip the Framer-specific imports and try to replace them with `framer-motion` equivalents, you typically spend more time debugging incompatibilities than it would take to rebuild the component in Bolt from scratch. The one exception where Framer code is genuinely useful is reading it for animation parameter values. The code view shows exact spring stiffness, damping, mass, and duration values. These numbers transfer directly to Framer Motion's `transition` prop in any React project. Think of Framer's code output as a specification document, not deployable code.

Framer's Inspect panel is where the translation begins. In Framer, right-click any element and choose Inspect, or click the Inspect tab in the right sidebar. This panel shows CSS-equivalent values for every design property: exact hex colors, font sizes in pixels, line heights, border radius values, box shadow parameters, and spacing. For animations, switch to the Code view for any component that has transitions. Look for the `transition` object in the code — it will contain values like `{ type: 'spring', stiffness: 400, damping: 30 }` or `{ duration: 0.2, ease: [0.25, 0.1, 0.25, 1] }`. Copy these values exactly — they translate directly to Framer Motion's `transition` prop with no modification. For Tailwind CSS mapping: take hex colors from Inspect and add them to your `tailwind.config.ts` as custom color values. Convert Framer's pixel font sizes to Tailwind's rem-based scale (divide by 16, then find the nearest Tailwind size). For border-radius, Framer shows values in pixels — divide by 16 for rem or use Tailwind's `rounded-` scale directly. Export assets (images, icons, SVGs) from Framer using the right-click → Export menu. Choose SVG format for icons and illustrations, PNG at 2x for photos and complex graphics. These export to standard files you can drag into Bolt.new's file tree.

1// tailwind.config.ts — example extending with Framer design tokens
2import type { Config } from 'tailwindcss';
3
4const config: Config = {
5  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
6  theme: {
7    extend: {
8      // Add colors extracted from Framer's Inspect panel
9      colors: {
10        brand: {
11          50: '#eff6ff',
12          500: '#3b82f6',  // primary from Framer
13          900: '#1e3a5f',  // dark from Framer
14        },
15        accent: '#f59e0b',  // accent color from Framer
16      },
17      // Add font sizes extracted from Framer (Framer px ÷ 16 = rem)
18      fontSize: {
19        'display': ['3.5rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
20        'heading': ['2rem', { lineHeight: '1.2', letterSpacing: '-0.01em' }],
21      },
22      // Add border radius values from Framer
23      borderRadius: {
24        'card': '16px',
25        'button': '10px',
26      },
27      // Add box shadow values from Framer
28      boxShadow: {
29        'card': '0 4px 24px rgba(0, 0, 0, 0.08)',
30        'card-hover': '0 12px 40px rgba(0, 0, 0, 0.16)',
31      },
32    },
33  },
34  plugins: [],
35};
36
37export default config;

With animation parameters extracted from Framer, you can write precise Bolt.new prompts that produce matching interactions. Framer Motion is the underlying animation engine that Framer itself uses — so the mental model and many parameter names are identical. The difference is that Bolt.new uses the open-source `framer-motion` npm package rather than Framer's proprietary wrapper. When writing your Bolt prompt, describe the animation in three parts: the trigger (hover, scroll, page load, button click), the animated properties (opacity, translateY, scale, rotate), and the transition parameters (spring vs duration, exact stiffness/damping values from Framer Inspect). For spring animations from Framer: `{ type: 'spring', stiffness: 400, damping: 30 }` is directly usable in Framer Motion's transition prop. For tween animations: `{ duration: 0.3, ease: 'easeOut' }` or with a custom cubic bezier `{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }`. For staggered children animations in Framer, use Framer Motion's `staggerChildren` in the parent's `variants`. Provide your screenshot of the Framer prototype alongside the extracted parameters in your Bolt chat for best results. Bolt's AI responds well to image references combined with precise numeric descriptions.

1// Example: translating a Framer spring hover animation to Framer Motion
2// Framer Inspect showed: spring stiffness: 400, damping: 25, card lifts 8px
3
4'use client';
5import { motion } from 'framer-motion';
6
7interface ProductCardProps {
8  title: string;
9  description: string;
10  imageUrl: string;
11  price: string;
12}
13
14export function ProductCard({ title, description, imageUrl, price }: ProductCardProps) {
15  return (
16    <motion.div
17      className="bg-white rounded-[16px] overflow-hidden shadow-card cursor-pointer"
18      whileHover={{
19        y: -8,           // 8px lift from Framer Inspect
20        boxShadow: '0 12px 40px rgba(0, 0, 0, 0.16)',  // from Framer shadow-hover
21      }}
22      transition={{
23        type: 'spring',
24        stiffness: 400,  // exact value from Framer code view
25        damping: 25,     // exact value from Framer code view
26      }}
27    >
28      <div className="relative overflow-hidden">
29        <motion.img
30          src={imageUrl}
31          alt={title}
32          className="w-full h-48 object-cover"
33          whileHover={{ scale: 1.05 }}
34          transition={{ duration: 0.4, ease: [0.25, 0.1, 0.25, 1] }}
35        />
36        <motion.div
37          className="absolute inset-0 bg-brand-900"
38          initial={{ opacity: 0 }}
39          whileHover={{ opacity: 0.6 }}  // 60% overlay from Framer
40          transition={{ duration: 0.2 }} // 200ms from Framer transition
41        />
42      </div>
43      <div className="p-5">
44        <h3 className="text-heading font-semibold text-gray-900">{title}</h3>
45        <p className="text-sm text-gray-500 mt-1">{description}</p>
46        <p className="text-brand-500 font-bold mt-3">{price}</p>
47      </div>
48    </motion.div>
49  );
50}

Screenshots are one of the most effective ways to communicate design intent to Bolt's AI. Bolt.new supports image uploads directly in the chat interface — click the image icon or drag a screenshot into the chat input. The AI analyzes the visual composition and generates React code that approximates the layout, colors, and component structure. For best results with Framer screenshots: capture the component or page section in Framer's Preview mode (Cmd+P or the play button) at full resolution. Include all the visible states you want to implement — rest state, hover state, and active state side by side if possible. Framer's Presentation mode shows clean previews without the editor chrome, which gives the AI a cleaner reference. Combine the screenshot with a detailed text description in the same Bolt chat message. Describe what is animated, the trigger, and any numeric values you extracted from Inspect. For example: 'This card (screenshot attached) animates on hover — it lifts 8px with a spring (stiffness 400, damping 25), and an overlay fades in at 60% opacity over 200ms. Recreate this in React with framer-motion and Tailwind, using the colors from the screenshot.' For complex multi-step animations in Framer (scroll-triggered reveals, page transitions, gesture-based interactions), break them into individual components and prompt Bolt for each one separately. Trying to describe all interactions in a single prompt often results in incomplete implementations — iterative prompts produce better results.

The Framer-to-Bolt bridge workflow is most valuable for complex, custom interactions that would take many iterations to specify purely in text — hover effects, scroll animations, page transitions, and gesture-driven interfaces. For these cases, the visual reference of a Framer screenshot plus extracted animation parameters saves significant back-and-forth with Bolt's AI. But for simpler UI elements — basic cards, navigation bars, forms, data tables, standard modals — rebuilding directly in Bolt is usually faster than going through Framer. Bolt's AI generates standard Tailwind and shadcn/ui components well without visual reference, and these components often look better in the final app than a Framer design that was not optimized for the constraints of Tailwind's utility-class system. A practical decision rule: use the Framer bridge for any animation that cannot be described in a single sentence, any layout involving precise spacing that matters visually (hero sections, marketing pages), and any color/typography system your team has invested significant design effort in. Rebuild directly in Bolt for functional UI — forms, tables, CRUD interfaces, dashboards with standard chart types. Bolt.new's WebContainer development environment is excellent for iterating on UI — the hot module replacement gives near-instant feedback. Once you establish the design system (colors, typography, component library) from your Framer tokens, subsequent screens in Bolt build much faster because the AI learns the patterns from your existing components in context.