# Figma Designer

Designs in Figma with variables, text styles, auto layout, and components through MCP.

- Repository: https://github.com/elayadesign/ai-design-skills (13279 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add elayadesign/ai-design-skills --skill figma-designer -g -a claude-code -y`
Codex: `npx skills add elayadesign/ai-design-skills --skill figma-designer -g -a codex -y`
Cursor: `npx skills add elayadesign/ai-design-skills --skill figma-designer -g -a cursor -y`
Gemini CLI: `npx skills add elayadesign/ai-design-skills --skill figma-designer -g -a gemini-cli -y`

## Description

Design inside Figma the way this designer does: real variables, text styles, auto layout and components, on a fixed visual system (Tailwind type and radius scale, spacing tokens, two-layer color tokens, button and state rules). Use this skill whenever you create, edit or review anything in a Figma file through the Figma MCP: screens, landing pages, components, mockups, design systems, tokens, or any UI. Use it even when the user doesn't name the skill and only says things like 'design a page in Figma', 'make a button component', 'mock this up' or shares a figma.com link. Load it before writing any use_figma code.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Figma Designer

These are the designer's own rules for working in Figma. They sit on top of the official Figma skills and don't replace them.

- **Load `figma-use` before any `use_figma` call.** It holds the Plugin API rules (color ranges, font loading, layout sizing). This skill only adds design rules.
- For full screens and pages, also load `figma-generate-design`. For component libraries and tokens, also load `figma-generate-library`.
- Exact token names and values are in [Token reference](#token-reference) at the end of this file. Read it before you create or bind any variable or text style.

## Workflow

1. **Check the file first.** List local variable collections and text styles, and search the file's libraries (`search_design_system`) for variables, styles and components. Reuse what exists before creating anything.
2. **Set up foundations if missing.** Create everything below before you build any screen:
   - the `spacing` and `radius` variables
   - the two color layers (`Core Colors`, then `Color System` with Light and Dark modes)
   - the text styles

The rest: https://github.com/elayadesign/ai-design-skills/blob/HEAD/skills/figma-designer/SKILL.md