Figma Designer
Designs in Figma with variables, text styles, auto layout, and components through MCP.
Install
npx skills add elayadesign/ai-design-skills --skill figma-designer -g -a claude-code -y- Repository
- elayadesign/ai-design-skills13.3k
- Category
- Design
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
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.
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-usebefore anyuse_figmacall. 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 loadfigma-generate-library. - Exact token names and values are in Token reference at the end of this file. Read it before you create or bind any variable or text style.
Workflow
- 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. - Set up foundations if missing. Create everything below before you build any screen:
- the
spacingandradiusvariables - the two color layers (
Core Colors, thenColor Systemwith Light and Dark modes) - the text styles
- the
