Figma

Skill: Figma ↔ Vue 3 + shadcn-vue

Reading flow via MCP (Figma → Code)

1. mcp:figma → get_design_context(nodeId or URL)  ← always first
2. mcp:figma → get_variable_defs(nodeId)           ← formal tokens
3. mcp:figma → search_design_system(query)         ← DS components
4. mcp:figma → get_screenshot(nodeId)              ← visual reference

Figma → Tailwind Translation

Auto Layout → Flexbox/Grid Vue

Colors → shadcn-vue CSS Variables

Figma Typography → Tailwind

Figma line-height (absolute) → Tailwind (relative):

• 16px line-height with 14px font → leading-none (1)
• 20px / 14px → leading-tight (1.25)
• 20px / 16px → leading-5 (1.25)
• 24px / 16px → leading-6 (1.5) ← default body

Spacing → Tailwind Scale (base 4px)

Border radius → Tailwind

Shadows → Tailwind

Figma → shadcn-vue Vue Component Mapping

Components without shadcn-vue equivalent → Reka UI primitive

<!-- Custom component with Reka UI -->
<script setup lang="ts">
import { ComboboxRoot, ComboboxInput, ComboboxContent, ComboboxItem } from 'reka-ui'
</script>
<template>
  <ComboboxRoot>
    <ComboboxInput class="..." />
    <ComboboxContent class="...">
      <ComboboxItem v-for="item in items" :key="item.id" :value="item">
        {{ item.label }}
      </ComboboxItem>
    </ComboboxContent>
  </ComboboxRoot>
</template>

Expected output: figma-spec.md

# Figma Spec — [Frame Name]

## Extracted tokens

### Colors
| Token | Hex | Tailwind equiv. | CSS var |
|---|---|---|---|
| Brand blue | #2563EB | `bg-blue-600` | `--primary` |

### Typography
| Usage | Size | Weight | Tailwind |
|---|---|---|---|
| Heading | 24px | 700 | `text-2xl font-bold` |

### Dominant spacing
| Usage | Value | Tailwind |
|---|---|---|
| Gap between cards | 24px | `gap-6` |

## Mapped components

### [ComponentName]
- **shadcn-vue**: `<Card>` with `<CardHeader>`, `<CardContent>`, `<CardFooter>`
- **Reka UI base**: `N/A` (shadcn-vue abstracts it)
- **Required props**: title, description, actions[]
- **Variants**: default, highlighted
- **States**: default, loading (Skeleton), empty
- **Notes**: Status Badge in CardHeader

## Documented behaviors
- Hover: card elevates with shadow-md
- Loading: 3 Skeleton cards of same dimensions

## Deviations from standard shadcn-vue
- Badge uses custom color #7C3AED — add as CSS variable

Writing flow via MCP (Code → Figma)

Prerequisites

MANDATORY: Before every use_figma call, load the /figma:figma-use skill. This skill teaches the Figma Plugin API syntax needed for write operations.

1. Load /figma:figma-use skill                    ← ALWAYS first
2. mcp:figma → whoami                              ← verify connection
3. mcp:figma → search_design_system(query)         ← discover existing DS
4. mcp:figma → use_figma(javascript)               ← create/edit nodes

Available write tools

Available design skills

Tailwind → Figma reverse mapping

Writing components — pattern

// Example: Create a Card component in Figma
const card = figma.createFrame()
card.name = "Card"
card.layoutMode = "VERTICAL"
card.itemSpacing = 0
card.cornerRadius = 8
card.paddingTop = card.paddingBottom = 24
card.paddingLeft = card.paddingRight = 24

// Bind to variable instead of hardcoding
const bgVar = figma.variables.getLocalVariables().find(v => v.name === "card")
if (bgVar) {
  card.setBoundVariable("fills", bgVar.id)
}

Writing tokens — pattern

// Create a variable collection for design tokens
const collection = figma.variables.createVariableCollection("Design Tokens")

// Add color variable with light/dark modes
const primaryVar = figma.variables.createVariable("primary", collection.id, "COLOR")
primaryVar.setValueForMode(lightModeId, { r: 0.09, g: 0.09, b: 0.09 })
primaryVar.setValueForMode(darkModeId, { r: 0.98, g: 0.98, b: 0.98 })

Gotchas — Write mode

• Always use figma.variables for colors — never hardcode hex
• Auto Layout must be set via layoutMode before setting itemSpacing
• Text nodes require figma.loadFontAsync() before setting characters
• Component variants: use figma.combineAsVariants() after creating all variants
• Figma plugin API is synchronous except font loading — handle await properly