full-stack-design-skills: Skill for Claude Code

Figma Expert Workflows

Advanced techniques and workflows for professional design and design system work in Figma.

Figma is the industry-standard design tool for UX/UI designers and design system architects. Mastering Figma's advanced features—components, variables, tokens, prototyping, and handoff—is essential for efficient, scalable design workflows.

Core Concepts: Files, Pages, Frames, Components

File Organization

A well-organized Figma file is the foundation of efficient collaboration.

Structure:

Project File
├── Cover Page (overview, links, guidelines)
├── Design System (tokens, colors, typography)
├── Components (Button, Card, Modal, etc.)
├── Patterns (Forms, Lists, Navigation)
├── Prototypes (High-fidelity interactive mockups)
├── Pages by Feature (Auth, Dashboard, Settings, etc.)
└── Archive (Old versions, experiments)

Best practices:

• One file per product/section (not one massive file)
• Use clear naming (PascalCase for components, kebab-case for instances)
• Lock shared components (prevent accidental edits)
• Use boards to organize pages (Figma feature)
• Archive old versions (don't delete)

Components vs. Instances

Component: The "source of truth" — the original design. Instance: A copy that inherits properties from the component.

When you edit a component, all instances update automatically. This is the power of components.

Example:

Component: Button (primary, secondary, ghost variants)
├── Instance in Design A (used in 5 places)
├── Instance in Design B (used in 3 places)
└── Instance in Design C (used in 2 places)

Edit component → All 10 instances update

Main Components vs. Copies

In Figma, there's a difference:

• Main component (original, has ◆ icon) — is the source
• Instance (copy, has ◊ icon) — inherits from main
• Regular copy (no icon) — independent copy, won't update

Always use instances, not regular copies.

---

Advanced Components: Variants & Auto Layout