skills.rest
ZzZueszZ
ZzZueszZCOMMUNITY
Explore all skills by this author →
GitHub

Figma Design Skills

Guides UI/UX design in Figma covering design tokens, components, auto layout, prototyping, and dev handoff.

Updated May 12, 2026
Search Tags:#design system#figma#prototyping#design tokens#auto layout#ui ux design#dev handoff
One-click install
npx skills add https://github.com/ZzZueszZ/claude-kit --skill figma-design-skills-zzzueszz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Figma Design Skills
Source: https://github.com/ZzZueszZ/claude-kit/tree/main/.claude/skills/figma-design
Command: npx skills add https://github.com/ZzZueszZ/claude-kit --skill figma-design-skills-zzzueszz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing software interfaces in Figma without a consistent system leads to ad-hoc screens, hardcoded values, inconsistent components, and painful developer handoffs. This Skill enforces a structured, mandatory set of UI/UX design rules so every Figma file is consistent, reusable, and ready for development. ## Core Features & Use Cases - Design System & Tokens: Defines mandatory color, typography, spacing (8px grid), radius, and shadow tokens using Figma variables and styles instead of hardcoded values. - Component Architecture: Requires Auto Layout, Variants for all states (Default, Hover, Active, Disabled, Error), and Component Properties for a reusable component library (buttons, inputs, tables, modals, navigation). - Responsive & Prototyping Standards: Covers Desktop/Tablet/Mobile breakpoints, layout grids, Smart Animate transitions, and realistic-data prototypes. - Dev Handoff & Review Checklist: Provides annotation checklists, export settings (SVG icons, 2x images), specification templates, and a pre-handoff review checklist including accessibility (contrast ≥ 4.5:1, touch targets ≥ 44px). - Use Case: When asked to design an admin dashboard module, the Skill ensures you first set up design tokens, build variant-based components with Auto Layout, structure pages by module, and annotate specs before handing off to developers. ## Quick Start Ask the AI to design a new screen or component in Figma following the Figma Design Skills guidelines, for example: design a message list page with proper tokens, variants, and dev annotations.

Frequently Asked Questions about Figma Design Skills

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up design tokens in Figma for a project?▼

Define color styles (primary, neutral, semantic), text styles (H1-H4, body sizes), spacing on an 8px grid, border radius, and shadow values as Figma variables and styles before designing. Never hardcode values like raw hex codes or off-grid padding in components.

How to create reusable button components with variants in Figma?▼

Build one button component with variant properties for type (Primary, Secondary, Ghost, Destructive), size (Small, Medium, Large), and state (Default, Hover, Active, Disabled, Loading). Add boolean properties for icons and use Auto Layout with 8px-grid padding instead of separate frames per state.

What breakpoints should I design for in Figma?▼

Design for three main breakpoints: Desktop at 1440px with a 12-column grid, Tablet at 768px with 8 columns, and Mobile at 375px with 4 columns. Use Auto Layout with Fill Container and min/max width constraints so layouts adapt naturally.

Does Figma Auto Layout replace absolute positioning?▼

Yes, every component should use Auto Layout instead of drag-and-drop absolute positioning. Auto Layout with Fill Container and Hug Contents makes components responsive and keeps spacing consistent with the 8px grid, avoiding hardcoded widths and heights.

What should a Figma dev handoff include?▼

Annotate spacing, font styles, colors, radius, shadows, and icon sizes; export icons as SVG and images at 1x/2x; document interactions like hover, loading, and error states that prototypes cannot show. Use Figma Dev Mode so developers can inspect values directly.

Why is my Figma design inconsistent across screens?▼

Inconsistency usually comes from hardcoded values, detached components, and missing variants. Fix it by routing all values through design tokens, overriding component properties instead of detaching, and following a numbered page structure with a naming convention.

Related Skills

Explore More Design & Creative Skills→
truongnattruongnat

ux-wireframe

Generates ASCII wireframes, HTML prototypes, and Figma handoff briefs for screen design.

Community
Intermediate
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate
LionGabLionGab

accessibility-checker

Validates WCAG AAA accessibility compliance for touch targets, contrast ratios, and interactive labels in apps.

Community
Intermediate
Sir-chawakornSir-chawakorn
33

screenshot-to-code

Convert UI screenshots and design mockups into HTML, CSS, and React components.

Community
Intermediate