figma-design

What this skill does

# Figma Design Skill

Comprehensive guide for Figma design workflows, plugin development, component systems, auto layout, prototyping, and design system management based on official Figma Plugin API documentation from Context7.

## When to Use This Skill

Use this skill when working with:
- **Figma Plugin Development**: Building custom plugins, UI extensions, automation tools
- **Design Systems**: Creating and managing variables, styles, components, and libraries
- **Component Architecture**: Building reusable components, variants, and instances
- **Auto Layout**: Implementing responsive frames with constraints and spacing
- **Prototyping**: Creating interactive prototypes with reactions and flows
- **Batch Operations**: Automating repetitive design tasks across multiple nodes
- **Export & Integration**: Exporting assets in various formats (PNG, JPG, SVG)
- **Data Management**: Storing and retrieving plugin/shared data on nodes
- **Collaboration**: Managing version history, comments, and team workflows

## Core Concepts

### 1. Figma Node Hierarchy

The Figma document structure is a tree of nodes:

```
DocumentNode (root)
└── PageNode
    ├── FrameNode
    │   ├── TextNode
    │   ├── RectangleNode
    │   └── ComponentNode
    └── SectionNode
        └── FrameNode
```

**Key Node Types:**
- `FRAME`: Container with auto-layout capabilities
- `COMPONENT`: Reusable design element (master)
- `INSTANCE`: Copy of a component
- `TEXT`: Editable text layer
- `RECTANGLE`, `ELLIPSE`, `POLYGON`, `STAR`, `LINE`: Basic shapes
- `SECTION`: Organizational container for frames
- `GROUP`: Non-layout container

### 2. Components and Instances

**Components** are master elements that can be instantiated multiple times:

```typescript
// Create a component
const button = figma.createComponent()
button.name = "Primary Button"
button.resize(120, 40)

// Add visual elements
const bg = figma.createRectangle()
bg.resize(120, 40)
bg.cornerRadius = 8
bg.fills = [{ type: 'SOLID', color: { r: 0.2, g: 0.5, b: 1 } }]
button.appendChild(bg)

// Create instance
const buttonInstance = button.createInstance()
buttonInstance.x = 200
buttonInstance.y = 100
```

**Component Properties:**
- `BOOLEAN`: Toggle visibility or states
- `TEXT`: Customizable text content
- `INSTANCE_SWAP`: Swap nested components
- `VARIANT`: Different component variations

### 3. Auto Layout

Auto Layout creates responsive frames that adapt to content changes:

**Core Properties:**
- `layoutMode`: 'HORIZONTAL', 'VERTICAL', or 'NONE'
- `primaryAxisSizingMode`: 'FIXED' or 'AUTO'
- `counterAxisSizingMode`: 'FIXED' or 'AUTO'
- `paddingLeft`, `paddingRight`, `paddingTop`, `paddingBottom`
- `itemSpacing`: Gap between children
- `primaryAxisAlignItems`: Alignment on main axis
- `counterAxisAlignItems`: Alignment on cross axis

**Constraints for Children:**
- `minWidth`, `maxWidth`: Width boundaries
- `minHeight`, `maxHeight`: Height boundaries
- `layoutAlign`: 'MIN', 'CENTER', 'MAX', 'STRETCH'
- `layoutGrow`: 0 (fixed) or 1 (fill container)

```typescript
// Create auto-layout frame
const frame = figma.createFrame()
frame.layoutMode = 'VERTICAL'
frame.primaryAxisSizingMode = 'AUTO'
frame.counterAxisSizingMode = 'FIXED'
frame.resize(300, 0) // Width fixed, height auto
frame.itemSpacing = 16
frame.paddingLeft = 24
frame.paddingRight = 24
frame.paddingTop = 24
frame.paddingBottom = 24

// Add children with constraints
const child = figma.createRectangle()
child.resize(252, 100)
child.layoutAlign = 'STRETCH' // Fill width
child.minHeight = 100
child.maxHeight = 200
frame.appendChild(child)
```

### 4. Constraints

Constraints control how nodes resize when their parent changes:

```typescript
interface Constraints {
  horizontal: 'MIN' | 'CENTER' | 'MAX' | 'STRETCH' | 'SCALE'
  vertical: 'MIN' | 'CENTER' | 'MAX' | 'STRETCH' | 'SCALE'
}

node.constraints = {
  horizontal: 'MIN',    // Pin to left
  vertical: 'MAX'       // Pin to bottom
}
```

**Constraint Types:**
- `MIN`: Pin to top/left edge
- `CENTER`: Center in parent
- `MAX`: Pin to bottom/right edge
- `STRETCH`: Scale with parent (both edges)
- `SCALE`: Maintain proportional position and size

### 5. Variables and Design Tokens

Variables create dynamic design systems (Figma Design only):

```typescript
// Create variable collection
const collection = figma.variables.createVariableCollection('Design Tokens')

// Create color variable
const primaryColor = figma.variables.createVariable(
  'color/primary',
  collection,
  'COLOR'
)

// Set value for default mode
const defaultMode = collection.modes[0]
primaryColor.setValueForMode(defaultMode.modeId, {
  r: 0.2, g: 0.5, b: 1, a: 1
})

// Add dark mode
const darkMode = collection.addMode('Dark')
primaryColor.setValueForMode(darkMode, {
  r: 0.4, g: 0.7, b: 1, a: 1
})

// Create variable alias (reference)
const accentColor = figma.variables.createVariable(
  'color/accent',
  collection,
  'COLOR'
)
const alias = figma.variables.createVariableAlias(primaryColor)
accentColor.setValueForMode(defaultMode.modeId, alias)

// Bind variable to node
const rect = figma.createRectangle()
const fill = { type: 'SOLID', color: { r: 0, g: 0, b: 0 } } as SolidPaint
const boundFill = figma.variables.setBoundVariableForPaint(
  fill,
  'color',
  primaryColor
)
rect.fills = [boundFill]
```

**Variable Types:**
- `COLOR`: RGB/RGBA values
- `FLOAT`: Numeric values (spacing, sizes)
- `BOOLEAN`: True/false flags
- `STRING`: Text values

### 6. Styles

Styles define reusable visual properties:

```typescript
// Paint style (fills/strokes)
const paintStyle = figma.createPaintStyle()
paintStyle.name = 'Brand/Primary'
paintStyle.paints = [{
  type: 'SOLID',
  color: { r: 0.2, g: 0.5, b: 1 }
}]

// Text style
const textStyle = figma.createTextStyle()
textStyle.name = 'Heading/H1'
textStyle.fontSize = 32
textStyle.fontName = { family: 'Inter', style: 'Bold' }
textStyle.lineHeight = { value: 120, unit: 'PERCENT' }
textStyle.letterSpacing = { value: -0.5, unit: 'PIXELS' }

// Effect style (shadows, blurs)
const effectStyle = figma.createEffectStyle()
effectStyle.name = 'Shadow/Card'
effectStyle.effects = [{
  type: 'DROP_SHADOW',
  color: { r: 0, g: 0, b: 0, a: 0.15 },
  offset: { x: 0, y: 4 },
  radius: 8,
  visible: true,
  blendMode: 'NORMAL'
}]

// Apply styles
rect.fillStyleId = paintStyle.id
text.textStyleId = textStyle.id
frame.effectStyleId = effectStyle.id
```

## Prototyping

### 1. Reactions and Interactions

Reactions define interactive behavior in prototypes:

```typescript
// Set reactions on a node
await node.setReactionsAsync([
  {
    action: {
      type: 'NODE',
      destinationId: 'nodeId', // Target frame
      navigation: 'NAVIGATE',
      transition: {
        type: 'SMART_ANIMATE',
        easing: { type: 'EASE_IN_AND_OUT' },
        duration: 0.3
      },
      preserveScrollPosition: false
    },
    trigger: {
      type: 'ON_CLICK'
    }
  }
])
```

**Trigger Types:**
- `ON_CLICK`: Click/tap
- `ON_HOVER`: Mouse hover
- `ON_PRESS`: Touch press
- `ON_DRAG`: Drag interaction
- `MOUSE_ENTER`, `MOUSE_LEAVE`, `MOUSE_UP`, `MOUSE_DOWN`
- `AFTER_TIMEOUT`: Delayed trigger

**Navigation Types:**
- `NAVIGATE`: Go to destination
- `SWAP`: Swap overlay
- `OVERLAY`: Open as overlay
- `SCROLL_TO`: Scroll to position
- `CHANGE_TO`: Change to state

### 2. Overlay Configuration

Control how frames appear as overlays:

```typescript
frame.overlayPositionType // 'CENTER' | 'TOP_LEFT' | 'TOP_CENTER' | etc.
frame.overlayBackground // How overlay obscures background
frame.overlayBackgroundInteraction // Click-through behavior
```

### 3. Scrolling Frames

Configure frame scrolling behavior:

```typescript
frame.overflowDirection = 'VERTICAL_SCROLLING' // or 'HORIZONTAL_SCROLLING'
frame.numberOfFixedChildren = 1 // First N children stay fixed during scroll
```

## Plugin Development

### 1. Plugin Structure

**Basic Plugin Files:**
```
my-plugin/
├── manifest.json       # Plugin configuration
├── code.ts            # Main plugin logic
└── ui.