figma-mcp-server

/add-plugin figma

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

claude plugin install figma@claude-plugins-official

claude mcp add --transport http figma https://mcp.figma.com/mcp

# Inside claude CLI
/mcp auth figma

gemini extensions install https://github.com/figma/mcp-server-guide

gemini
# Then inside CLI:
/mcp auth figma

Copy Figma frame URL → paste in prompt:
"Implement this design: https://www.figma.com/design/FILE_ID?node-id=123-456"

"Use get_design_context to fetch the design at this URL"

"Get a screenshot of this Figma component"

"Get the variable names and values used in this frame"
"Extract design tokens from this Figma file"

{
  "colors": {
    "primary": "#3B82F6",
    "secondary": "#10B981"
  },
  "spacing": {
    "sm": "8px",
    "md": "16px",
    "lg": "24px"
  },
  "typography": {
    "headingLarge": {
      "fontFamily": "Inter",
      "fontSize": "32px",
      "fontWeight": "700"
    }
  }
}

"Get the metadata for this Figma file"
"Show me the node structure"

"Create a component in Figma for a primary button with our design system tokens"

https://www.figma.com/design/abc123?node-id=45-678

"Implement this design: [paste URL]"
"Generate code for https://www.figma.com/design/..."
"Use Code Connect for this component: [URL]"

// Button.figma.tsx
import figma from '@figma/code-connect';
import { Button } from './Button';
 
figma.connect(Button, 
  'https://www.figma.com/design/abc123?node-id=12-34', 
  {
    props: {
      variant: figma.enum('Variant', {
        Primary: 'primary',
        Secondary: 'secondary'
      }),
      size: figma.enum('Size', {
        Small: 'sm',
        Large: 'lg'
      })
    },
    example: ({ variant, size }) => (
      <Button variant={variant} size={size}>
        Click me
      </Button>
    )
  }
);

<button className="bg-blue-500 px-4 py-2 rounded">
  Click me
</button>

import { Button } from '@/components/ui/Button';
 
<Button variant="primary" size="md">
  Click me
</Button>

"Use Code Connect to implement this button component"
"Generate code using our actual component library"

"Implement this checkout flow using our existing components: 
https://www.figma.com/design/xyz?node-id=100-200

Use components from src/components/checkout
Follow our Next.js page structure
Use our design tokens for spacing and colors"

"Extract all color, spacing, and typography variables from this design system:
https://www.figma.com/design/tokens?node-id=1-1

Generate a TypeScript tokens file for Tailwind config"

// tokens.ts
export const tokens = {
  colors: {
    primary: {
      50: '#eff6ff',
      500: '#3b82f6',
      900: '#1e3a8a'
    },
    secondary: {
      500: '#10b981'
    }
  },
  spacing: {
    xs: '4px',
    sm: '8px',
    md: '16px',
    lg: '24px',
    xl: '32px'
  },
  typography: {
    display: {
      fontFamily: 'Inter',
      fontSize: '48px',
      fontWeight: '700',
      lineHeight: '1.2'
    },
    body: {
      fontFamily: 'Inter',
      fontSize: '16px',
      fontWeight: '400',
      lineHeight: '1.5'
    }
  }
} as const;

"Create a primary button component in Figma using our design system tokens.
Should have three variants: small, medium, large.
Use our primary blue and standard corner radius."

"This Card component has been updated in code (src/components/Card.tsx).
Update the Figma component to match:
- Add elevation prop
- Support optional image
- Update spacing to use 16px instead of 12px"

## Figma MCP Integration
 
### Required workflow
1. Always run get_design_context first for the exact node
2. If truncated, use get_metadata → then re-fetch specific nodes
3. Run get_screenshot for visual reference
4. Download assets as needed
5. Translate React + Tailwind output to our framework
 
### Framework conventions
- Use Next.js App Router structure
- Components go in src/components/ui/
- Use our Stack and Box layout primitives
- Import design tokens from @/lib/tokens
 
### Styling
- Use Tailwind classes via className
- Reference design tokens: colors.primary.500
- Never hardcode spacing — use token variables
 
### Code Connect
- Always check for Code Connect mappings
- Reuse existing components from src/components/
- Match prop names to our component API
 
### File organization
- One component per file
- Export as named export
- Include TypeScript types
- Add JSDoc for complex props
 
### Never hardcode
- Colors → use tokens.colors.*
- Spacing → use tokens.spacing.*
- Typography → use tokens.typography.*

// Agent pattern for assets
const assetData = designContext.images[0];
if (assetData.startsWith('data:image')) {
  // Write to file
  fs.writeFileSync(
    `public/assets/${nodeName}.png`,
    Buffer.from(assetData.split(',')[1], 'base64')
  );
}

When Figma MCP returns images:
1. Decode base64 data
2. Save to public/assets/ with semantic names
3. Reference via relative path in code
4. Use Next.js Image component with proper sizing

"Generate SwiftUI code from this Figma frame"

"Convert this to Vue 3 composition API with Tailwind"

"Generate React Native StyleSheet code for this design"

"Use Chakra UI components for this layout"

"Use our design system components from @company/ui-kit
Available components: Button, Card, Stack, Text, Input
Import from @company/ui-kit"

"Use get_variable_defs to extract design tokens first, 
then generate code referencing those tokens"

"Use get_metadata to see the node structure, 
then fetch only the specific child nodes I need"

"This frame uses auto layout. 
Generate a flex container with proper gap and padding.
Check the Figma auto layout settings before coding."

# .env
FIGMA_ACCESS_TOKEN=your_personal_access_token

❌ "Make this into code"
✅ "Generate Next.js code for this dashboard layout.
   Use components from src/components/dashboard.
   Apply our design tokens from @/lib/tokens.
   Follow the App Router structure."

"Show me the auto layout settings and variables used in this frame"
"Get a screenshot and design context for this component"

"I updated the Button component in src/components/Button.tsx.
Update the Figma component to match:
[paste code]"

// scripts/check-design-sync.js
import { exec } from 'child_process';
 
const figmaNodeId = process.env.FIGMA_COMPONENT_NODE;
const prompt = `
Compare the Figma component at node ${figmaNodeId}
with src/components/Button.tsx.
Report any mismatches in props, variants, or styling.
`;
 
exec(`claude code "${prompt}"`, (error, stdout) => {
  if (stdout.includes('mismatch')) {
    process.exit(1);
  }
});

"Generate Storybook stories from all button variants in this Figma frame.
Include controls for each variant and size.
Use our actual Button component from @/components/ui/Button."

"Create a PR that:
1. Extracts design tokens from this Figma file
2. Updates src/theme/tokens.ts
3. Regenerates Tailwind config
4. Shows a preview of changed colors in Storybook"

"Implement these three screens as Next.js pages:
1. Login: https://figma.com/design/x?node-id=1-1
2. Dashboard: https://figma.com/design/x?node-id=1-2
3. Profile: https://figma.com/design/x?node-id=1-3

Share components between pages.
Use the same header and navigation."

"Audit this Figma file for inconsistencies:
- Colors not using variables
- Components without Code Connect
- Hardcoded spacing values
- Layers with generic names

Generate a report with locations and recommendations."

"This frame has mobile, tablet, and desktop variants.
Generate responsive code that:
- Uses Tailwind breakpoints
- Maintains the same component structure
- Adjusts layout and spacing per breakpoint"