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 reveal, shown as a prototype interaction. If that skill isn't available, ask the user for it before planning sections.

File hygiene

• Name every layer meaningfully (Pricing / Card / Pro). Never leave Frame 427, Group 3, Vector or Rectangle 1.
• Variable collections: spacing, radius, Core Colors and Color System, with Light and Dark modes on Color System.
• Text styles use the names above, grouped in folders by type.
• One page per area: Foundations, Components, Screens.
• Put new top-level frames in clear canvas space, never on top of existing work. Don't delete or move the user's existing layers unless asked.

Checklist (run before reporting)

• Every text layer uses a named text style (Heading, Title, Body, Button, Caption) on the Tailwind scale
• Every padding and gap is bound to a spacing variable
• Every radius is bound to a radius variable, and nested radii follow the formula
• Every fill and stroke is bound to a Color System token (never a raw hex or a Core Color), and Light and Dark modes both work
• Core Colors palettes have at least 10 shades each, and every Color System token is an alias
• The Foundations frame shows every token and text style, with samples bound to their variables and labels in sync
• Contrast passes 4.5:1 for body and 3:1 for large text and UI parts
• No background gradients, no single-side borders, no italics
• Hero heading and subheading capped at 680, the hero heading has no periods, and there are no eyebrow tags unless asked for or shown in an uploaded inspiration image
• Interactive components have all state variants, and buttons have all 5 types × 5 states
• Icons from Phosphor, Solar or Iconamoon at one stroke weight
• No placeholder copy, no layer named Frame or Group

Token reference

The names are fixed. Color hex values follow the user's brand; spacing, radius and type values are fixed.

Spacing

Collection spacing, one mode, FLOAT, scope GAP.

Radius

Collection radius, one mode, FLOAT, scope CORNER_RADIUS.

Text styles

The font is the file's one typeface (any font). Style names go in folders (Heading / Heading 1). Letter spacing is 0 unless the user sets it.

Font style strings differ by family. Check them with figma.listAvailableFontsAsync() before loading (for example Geist uses SemiBold, Inter-style families use Semi Bold).

Color

Layer 1: Core Colors

One mode. Raw hex values from the brand.

• 00 is near white, 500 is the base hue and 1000 is near black.
• Keep the Grayscale dark steps on the allowed dark backgrounds: 1000 = #000000, 870 = #181818, 850 = #1F1F1F, 800 = #272727, 750 = #313131.

Layer 2: Color System

Modes Light and Dark. Every value is an alias to a Core Color. The Dark column is the user's reference mapping. Build the Light column by mirroring the shade (a dark surface at Grayscale 870 becomes a light surface near Grayscale 00/50), then check contrast.

Border

Surface

Action (button and control fills)

Text

Icon

Overlay

An alias can't add opacity; it takes the target as it is. So the transparency lives in Core Colors (Grayscale-Alpha) and Overlay aliases it. Never put opacity on an overlay layer by hand.