Overview

Twigs AI MCP (Model Context Protocol) is an AI-powered tool that bridges Figma designs and Twigs component implementation. It enables developers to seamlessly convert Figma designs into production-ready React components using the Twigs design system.

What Can It Do?

• Extract Design Data: Fetch structured JSON data from Figma designs
• Visual Reference: Get screenshots of Figma components for accurate implementation
• Component Guidance: Access comprehensive Twigs component documentation
• Asset Management: Download images and icons from Figma designs
• Design System Support: Get guidelines and best practices for using Twigs

When to Use It

• Converting Figma designs to React components
• Looking up Twigs component APIs and props
• Understanding design system guidelines
• Extracting assets from Figma files
• Ensuring design-to-code consistency

Available Commands

| Command | Purpose | Key Parameters | Output | | --------------------------- | -------------------------------------------------- | ------------------------------------------- | ------------------------------------------------- | | get_figma_json | Extracts structured UI data from Figma design | fileKey, nodeId | JSON with layout, hierarchy, styles, typography | | get_figma_screenshot | Captures visual reference of Figma design | figmaUrl (full URL) | Base64 encoded PNG image | | get_twigs_guidelines | Retrieves Twigs design system guidelines | systemUsername | Design principles, best practices, usage patterns | | get_twigs_component_docs | Gets detailed documentation for specific component | componentName | Props, usage examples, API reference | | get_twigs_components_list | Lists all available Twigs components | systemUsername | Complete component inventory (40+ components) | | download_figma_images | Downloads SVG/PNG assets from Figma | fileKey, nodes, localPath, pngScale | Downloaded image files with dimensions |

How to Use in Real Development

Step-by-Step: Converting Figma Design to Code

Step 1: Get the Figma Link

1. Open your Figma file and navigate to the design you want to implement
2. Right-click on the specific frame/component/node you want to convert
3. Select "Copy link to selection" from the context menu
4. The link will be copied to your clipboard (format: https://figma.com/design/[fileKey]/[fileName]?node-id=...)

Step 2: Initiate Conversion in Cursor

1. Open Cursor Chat (Cmd/Ctrl + L)
2. Paste the Figma link and type your request:

Convert this Figma design to code using Twigs components:
https://figma.com/design/abc123XYZ/MyDesign?node-id=12-345

Alternative prompts you can use:

• "Build this Figma design with Twigs components: [link]"
• "Implement this UI using Twigs: [link]"
• "Create a React component from this Figma design: [link]"

Step 3: AI Processes Your Request

Behind the scenes, Cursor will automatically:

1. Extract design data using get_figma_json

   • Fetches structured JSON with layout, hierarchy, styles, and typography
   • Analyzes component structure and relationships

2. Fetch visual reference using get_figma_screenshot

   • Captures a high-resolution screenshot for visual accuracy
   • Displays the image for reference during implementation

3. Get Twigs guidelines using get_twigs_guidelines

   • Retrieves design system principles and best practices
   • Ensures implementation follows Twigs conventions

4. Look up component docs using get_twigs_component_docs

   • Fetches documentation for relevant components (Button, Input, Flex, Box, etc.)
   • Understands proper props and usage patterns

5. Generate the code

   • Creates React component using appropriate Twigs components
   • Applies design tokens for spacing, colors, and typography
   • Uses layout components (Box, Flex, Grid) for structure
   • Implements preset components with proper props

Step 4: Review the Generated Code

Cursor will provide you with:

• A complete React component implementation
• Proper Twigs component usage
• Design token-based styling
• Responsive layout structure

Example output:

import { Box, Flex, Button, Input, Text } from "@sparrowengg/twigs-react";

export const SettingsPanel = () => {
  return (
    <Box
      css={{
        padding: "$6",
        backgroundColor: "$white900",
        borderRadius: "$md",
        border: "1px solid $neutral200",
      }}
    >
      <Flex direction="column" gap="$4">
        <Text size="h4" weight="bold">
          Account Settings
        </Text>

        <Input placeholder="Enter email" type="email" />

        <Button variant="primary" size="md">
          Save Changes
        </Button>
      </Flex>
    </Box>
  );
};

Step 5: Refine with Follow-up Questions

The AI maintains context of the Figma JSON and design specifications. You can ask follow-up questions to perfect the implementation by referencing the original design:

Layout & Spacing Adjustments:

"The spacing between elements doesn't match the design, please cross-check with the Figma specs"
"The container width doesn't match the Figma design, can you verify and fix it?"
"The padding around the content looks different from the design, please adjust to match exactly"

Component Variations:

"The button style doesn't match the Figma design, what variant should we use?"
"Check the input size in the Figma design and update accordingly"
"The text color looks lighter than in the design, please match it exactly"

Structural Changes:

"The design shows two columns but this is single column, please match the layout"
"Verify the responsive behavior matches what's shown in the Figma design"
"The header section is missing from the design, can you add it based on the Figma specs?"

Styling Refinements:

"The border thickness doesn't match the Figma design, please check and update"
"Cross-check the heading color with the Figma design and correct it"
"The shadow effect is different from the design, can you match it exactly?"

Asset Handling:

"Download the icons shown in the Figma design to src/assets/icons"
"Extract all images from this design and update the component to use them"
"The user avatar icon is missing, can you download it from the design?"

Step 6: Iterate Until Perfect

The AI has full context from the initial Figma fetch, so it can:

• ✅ Reference the original design specifications
• ✅ Compare your requests against the Figma data
• ✅ Make precise adjustments based on design tokens
• ✅ Maintain consistency with Twigs guidelines
• ✅ Download additional assets as needed

Example iteration flow:

You: "The button alignment doesn't match the design"
AI: [Checks Figma JSON, adjusts justifyContent in Flex]

You: "Can you add the user icon that's in the Figma design?"
AI: [Uses download_figma_images to fetch the icon, updates code]

You: "Make the typography exactly match the Figma specs"
AI: [References Figma JSON typography data, applies correct Text component props]

Tips for Best Results

🎯 Be Specific with Your Initial Request

Good:

• "Convert this Figma card design to a Twigs component: [link]"
• "Build this login form using Twigs components: [link]"
• "Implement this dashboard layout with Twigs: [link]"

Less Effective:

• "Make this" (without specifying Twigs)
• Just pasting the link without context

🔍 Select the Right Figma Node

• Select specific components or frames, not entire pages
• Use parent frames for complete layouts
• Select individual elements when you only need specific parts
• Ensure the node is not hidden or locked in Figma

💬 Ask Iterative Follow-ups

Don't expect perfection on the first try. The AI gets better with each iteration:

1. Start broad: "Convert this design"
2. Then refine: "Increase spacing", "Change color", "Add icons"
3. Fine-tune: Specific adjustments based on your needs

📚 Leverage Component Documentation

If you're unsure about component capabilities:

"What props does the Button component support?"
"Show me all available Twigs form components"
"How do I use the Flex component for layouts?"

🎨 Reference Design Tokens

When making adjustments, use Twigs token language:

• Spacing: "$4", "$6", "$8"
• Colors: "$neutral200", "$primary500"
• Sizes: "sm", "md", "lg"

Troubleshooting

"I don't see my design rendering correctly"

1. Ensure the Figma link includes the node-id parameter
2. Check that you have access to the Figma file
3. Verify the node isn't hidden or locked in Figma

"The spacing doesn't match"

Ask specifically:

"Check the Figma design specs and adjust the spacing to match exactly"

"Colors look different"

Request color verification:

"Use the exact colors from the Figma design"

"Missing icons or images"

Explicitly request asset download:

"Download all icons and images from this design to src/assets"

What Makes This Powerful

✨ Context Preservation: The AI remembers the Figma JSON throughout your conversation 🎯 Design System Compliance: Automatically follows Twigs guidelines and best practices 🔄 Iterative Refinement: Make unlimited adjustments with full design context 📦 Asset Management: Seamlessly handles image and icon extraction 🚀 Speed: Go from design to code in minutes, not hours

Remember: The more specific your requests, the better the results. The AI has deep knowledge of both your Figma design and the Twigs component library, so don't hesitate to ask for refinements!