Skip to content
Get packs

Figma Designer

Design in Figma with real variables, text styles, auto layout and a fixed token system

Source Download skill
Repository
elayadesign/ai-design-skills
Stars
13,477
Licence
MIT
Files
1 file

What it does

When installed, the agent builds Figma files the way this designer works: it checks what already exists in the file, sets up color, spacing, radius and text-style tokens, and binds every fill, padding and text layer to those tokens so the design updates when a token changes. It follows a fixed visual system (Tailwind type and radius scales, spacing steps, light and dark color modes) and builds pages one section at a time with checks along the way. It is a set of design rules layered on top of the official Figma skills, not a standalone tool.

Great for

  • Designers who want consistent, token-driven Figma files built by an AI agent
  • Teams already using the Figma MCP who want a fixed design system workflow
  • Developers prototyping UI in Figma who need proper auto layout and variables

Skip it if

  • People without a Figma account or the Figma MCP connected, since the skill cannot act in Figma without it
  • Projects that need a different visual system, because the Tailwind scales and token rules are fixed and would need rewriting

Try asking

  • “Design a landing page in Figma for my coffee brand using our tokens”
  • “Make a button component with primary and secondary variants in this figma.com file”
  • “Set up the foundations: color, spacing, radius and text styles for a new design system”
  • “Review this Figma screen and fix spacing and radius values that aren't bound to variables”
Step-by-step guide: how to use Figma DesignerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    figma-designer.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip figma-designer.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip figma-designer.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Load the official figma-use skill first and provide your brand name and hex colors so the agent can fill the color token layer
  • Ask for one section at a time to get the screenshot-and-fix loop the skill is designed around
  • Keep the Foundations page in the file so later edits to tokens update all samples automatically

What's inside

  • SKILL.md

Redistributed unmodified from elayadesign/ai-design-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-11-02. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.