Figma Design

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:

// 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)

// 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:

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):

// 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:

// 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:

// 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:

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:

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