---

name: figma-designer 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."

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 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

   Light and dark are variable modes, never two sets of hardcoded colors.

   • Show the tokens on the canvas. Place a Foundations frame on the Foundations page, the same way components sit in their own frame. Inside it, add one auto layout section for each collection:
     • Core Colors: one row per palette, one swatch per shade
     • Color System: one row per group, with the Light and Dark modes side by side using explicit variable modes on two columns
     • spacing: a bar per token, sized to its value
     • radius: a square per token, with that radius
     • Text styles: one sample line per style
   • Bind the samples so they update with the tokens. Every swatch fill is bound to its variable. Every spacing bar and radius sample is bound to its variable. Every text sample uses its style. When the user edits a token, the frame updates by itself.
   • Labels: each sample is labeled with its token name and, for Color System, its alias (Surface/Primary → Grayscale/870). Text can't bind to a color value, so hex labels don't update by themselves. Re-sync the labels whenever you create, rename or change tokens.

3. Build section by section. Do the hero first, then one section per step. Never build a whole page in one pass. Screenshot after each section and fix it before moving on.

4. Use auto layout everywhere. Every frame with children uses auto layout. Padding and gap are bound to spacing variables, never typed numbers.

5. Bind, don't type.

   • Bind every fill, stroke, radius, padding and gap to a variable.
   • Every text layer uses a text style.
   • Bind designs to Color System tokens only, never to Core Colors directly.

6. Self check before finishing. Run the checklist at the end of this file, fix every failure, then report what was built and what was skipped.

Typography

• Fonts: any font is allowed. Use the one the user or brand names; check it with figma.listAvailableFontsAsync() before loading.
• One typeface per file unless the user asks for a pair. Geist Mono is allowed beside the main font only for code, data or numbers.
• No italic styles. No weights above bold.
• Sizes come from the Tailwind type scale only: 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72, 96, 128. If a size falls between steps, snap to the step below and take its line height.
• Text styles. Create the named styles in Token reference → Text styles (Heading 1 to 6, Title 1 to 5, Body 1 to 6, Button-lg/md/sm/Xsm, Caption 1 to 5). Use the names exactly, including capitalization.
  • Group them in folders by type, so the panel reads Heading / Heading 1, Body / Body 4, Button / Button-md.
  • Every text layer uses one of these styles. Never set a loose size or weight; changing the weight on a styled layer detaches the style.
• Which group to use:
  • Heading: page and section headings, largest to smallest. Heading 1 is the hero.
  • Title: card titles, list item titles, labels that lead a block, nav items.
  • Body: running text. Within each size, 1 is the strongest weight and the last is regular.
  • Button: text inside buttons only. Main buttons use Button-md; small header buttons use Button-sm.
  • Caption: metadata, helper text, badges, timestamps, fine print.
• New styles. If a project needs one, add the next number in its group (for example Body 7), built from a scale step. Never invent a new name or an off-scale size.
• Copy:
  • No hyphens inside text.
  • No single word alone on a heading's last line. Break headings by hand at meaningful points (use a line break in the text, not a narrower frame).
  • The hero heading (Heading 1) has no periods, neither at the end nor between phrases. Split two ideas with a line break: See the slop / Decide what to fix, not See the slop. Decide what to fix.

Spacing

• Use only the spacing/* number variables: 0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96. Nothing in between.
• Bind paddingTop/Right/Bottom/Left and itemSpacing to them with setBoundVariable. Give spacing variables the GAP scope, which covers both padding and gap.
• When a design value falls between tokens, snap it to the nearest token and bind it.
• Main buttons use 8 vertical padding (spacing/75) and 12 horizontal (spacing/100).

Corner radius

• Use Tailwind radius values only (0, 2, 4, 6, 8, 12, 16, 24, full), as radius/* variables with the CORNER_RADIUS scope. Bind each corner (topLeftRadius…).
• Nested radius rule. When a shape sits inside another and the gap between them is under 32: inner radius = outer radius − gap Apply it only when the result is greater than 2. Example: a card at 16 with 8 padding gives inner elements 8.
• Check this on every nested frame: read the parent's radius and padding, compute the child's radius, and set it to the matching radius/* variable.

Color

Token structure: two layers, in every file

The names and structure are fixed. The hex values follow the user's brand. Full name list: Token reference → Color.

1. Core Colors collection: raw palettes. Primary, Secondary, Accent, Grayscale, and semantic palettes Red (error), Green (success) and Yellow (warning).
   • Each palette has at least 10 shades, from 00 (near white) to 1000 (near black). 500 is the base hue.
   • Build the shades from the brand's base colors.
   • Transparent colors live here too, as a Grayscale-Alpha palette (700-16 … 700-80) with the opacity stored in the variable. An alias can't add opacity, so Overlay/* aliases these.
2. Color System collection: semantic tokens with Light and Dark modes. Every value is an alias to a Core Color, never a raw hex.
   • Groups: Border/, Surface/, Action/, Text/, Icon/, Overlay/.
   • Each role has a base token plus the variants it needs: -Hover, -Click or -Selected, -Disabled, -Subtle, -Inverted.

• Designs bind only to Color System tokens. A rebrand then changes only Core Colors.
• Name tokens by role, never by raw color (no Surface/Blue 500).
• Scope variables to what they color: FRAME_FILL/SHAPE_FILL for surfaces, TEXT_FILL for text, STROKE_COLOR for borders. Never leave ALL_SCOPES.

Surfaces

• Dark mode backgrounds, only these: #000000 · #181818 · #1F1F1F · #272727 · #313131 · #131209

• No background gradients. Surfaces are flat. This includes buttons and fade overlays.

• Hero heading is the one gradient exception, on the text only, left to right:

  • dark theme #FFFFFF → #9B9B9B
  • light theme #000000 → #666666

  Bind both gradient stops to color variables (boundVariables.color on each stop) so the gradient switches with the mode.

• One accent color, kept below 80% saturation.

• Borders go all the way around or not at all. Never a single-side border on a card. To divide rows, use a 1px rectangle filled with a Border/* token, not a one-side stroke.

Contrast and accessibility

• Body text: at least 4.5:1 against its background.
• Large text (24 and up, or 18 bold and up) and UI parts (icons, input borders, focus rings): at least 3:1.
• On gradient headings, check contrast at the lightest end of the gradient, not the darkest.
• Never rely on color alone to show state. Pair it with an icon, label or weight change.
• Touch targets are at least 44 × 44 on mobile frames.
• If a brand color fails contrast with white text, use a darker shade of the same palette for the Action/* token rather than changing the text.

Layout

• Hero heading and subheading max width 680.
• No eyebrow tag (the small pill or label above a heading, like ● Design QA, not a redesign) by default. Add one only when the user asks for it, or when an inspiration image the user uploaded shows one.
• Desktop frames are 1440 wide, with a centered content container of 1200 to 1280.
• Add 768 and 390 frames when the screen needs responsive versions.
• Don't default to three equal cards in a row. Consider a two-column zig zag, an asymmetric grid or a bento layout.
• Align shared elements across side-by-side cards: titles, prices, lists and buttons start at the same Y.

Icons

• Use Phosphor, Solar or Iconamoon. Never Material Icons or Material Symbols.
• Use one stroke weight across the whole file.
• Import icons as SVG (createNodeFromSvg) and recolor them with a bound Icon/* token. Never redraw an icon from primitives.

Components and states

• Anything used more than once is a component. Expose its text as component properties.

• Interactive components get variants for Default, Hover, Pressed, Focus, Disabled. Inputs also get Error and Filled.

• Buttons are one component set with these two properties, every combination present (25 variants per size):

  • Type = Primary | Secondary | Tertiary | Error | Warning
  • State = Default | Hover | Pressed | Focus | Disabled

  Bind fills to Action/* (for example Action/Primary, Action/Primary-Hover, Action/Primary-Click, Action/Primary-Disabled), borders to Border/* and labels to Text/*. Focus adds a visible ring (2px outside stroke at 3:1 or better), not just a color change.

• Data views get Loading (a skeleton shaped like the real layout), Empty (a composed getting-started view) and Error states.

Motion (prototype only)

• Use Smart Animate with the custom bezier 0.22, 1, 0.36, 1:
  • 500ms for layout changes
  • 300ms for color or opacity
• Never use Figma's default linear or ease presets.

Content

• Real draft copy, never placeholder text.
• Use believable names, brands and numbers for the product's industry. Avoid suspiciously round figures and stock names like "Acme".
• Banned filler: "revolutionize", "supercharge", "cutting edge", "effortless", "transform your workflow", "take it to the next level", "harness the power", "world class".
• Sentence case for headings and buttons.

Landing pages

When the task is a landing page, also follow the user's landing-page-design skill for page structure and copy (intake questions, section order, CTA rules). That includes the mandatory large tagline section with a word-by-word