agentsclimarketplace
Sign in

Figma authoring constraints

Skill jajupmochi/agent-harness/skills/figma-authoring-constraints

Use when a designer asks how to structure a Figma file so it produces clean code, when a design keeps yielding pixel-snapshot output, or when get_variable_defs comes back empty — the 20 Figma-side authoring constraints that make a design cleanly code-able via the Figma MCP.From its SKILL.md

Install
npx -y skills add jajupmochi/agent-harness --skill figma-authoring-constraints

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

7.1 KB, ~1.8k tokens by cl100k_base, as published. Nobody here has run it

/figma-authoring-constraints

Figma-side rules that make a design clean and code-able before it reaches an agent. These are the design half of the pipeline: the figma-design-fetch skill fetches + implements + verifies; this is what makes the fetch worth anything. If a design breaks these, get_design_context degrades to a rigid pixel snapshot and get_variable_defs comes back empty — no amount of agent effort fixes a design authored as a flat mockup.

Authoritative source: Figma's Structure your Figma file for better code. Each rule is one executable sentence + a reference. Give this to designers; the figma-design-fetch pre-fetch lint enforces a subset (unbound colors · default names · raster nodes · absolute positioning) as a hard gate.

Master TOC

Variables / tokens (1–5)

  1. Bind every color, spacing, radius, and font size to a Figma variable — never a bare literal. This is exactly what get_variable_defs returns; unbound values force the agent to eyeball hex. (Figma, variables guide)
  2. Build two token tiers: primitive → semantic. Primitives hold raw values (color ramps / spacing steps); semantics alias them by UI role (page background / primary action / danger text). (zeroheight)
  3. Name semantic tokens by intent, not appearance — text/subdued (survives dark mode), not text/gray (breaks the moment a mode is added).
  4. Prefer variables over styles for anything tokenizable (variables carry modes/themes, scoping, and code-syntax handoff); reserve styles for what variables can't express — gradients / compound fills / shadows. (Figma)
  5. Set a "code syntax" on variables so handoff / MCP emits the real code-side token name, not the Figma label.

Auto layout (6–9)

  1. Every container uses auto layout — no absolute positioning. Auto layout is what tells the agent the responsive intent, and it maps cleanly to flexbox. (Figma, auto layout guide)
  2. Set padding / gap / direction / alignment in the auto-layout panel, don't hand-nudge — they map directly to padding / gap / flex-direction / alignment.
  3. Use hug vs fill deliberately (buttons/cards hug = content-sized; sections fill = flex-grow:1); don't mix fill children under a hug parent.
  4. Nest auto-layout frames to express the real DOM hierarchy (header + content each with its own padding/gap).

Components / variants (10–12)

  1. Componentize anything reused (button / card / input / nav item).
  2. States of one thing = variants; genuinely different things = different components; organize by named properties (Size / State). (variants)
  3. Make every interactive state a variant (default / hover / active / focus / disabled) so the agent has an implementable state to build.

Naming (13–15)

  1. Replace default names with intent names: Frame1268 / Group5 → CardContainer / ProductImage / CTA_Button.
  2. Match component names to what developers call them in code, encoding hierarchy with / (Button/Primary/Default); write the convention down before the first component. (LogRocket)
  3. Give pages / sections / frames clear, navigable names — think about how a developer or agent finds this frame. (Dev Mode guide)

Dev Mode / Code Connect readiness (16–18)

  1. Use Code Connect to link Figma components to real code — Figma calls it the first path to consistent code-side reuse; without it the model can only guess. (Needs Org/Enterprise; without it, use the markdown Need→Token contract from #2/#13.)
  2. Use annotations + dev resources to convey intent visuals can't (behavior / alignment / responsiveness; link to the real component / doc).
  3. Select small frames (one Card, one Header), not big heavy frames — small selections keep the MCP context controllable and the output predictable. (custom rules)

Don't use raster placeholders (19–20)

  1. Never hand the agent a flattened / rasterized mockup or a pure-image frame — an image has no semantics, so the model only produces a pixel snapshot that drifts from the design system. Build with real layers + variables + components. (LogRocket)
  2. Avoid unnamed / deeply-nested layers mixed with tokens (the inverse of #13/#2).

How these map to the MCP gotchas

  • Empty get_variable_defs = the design bound no variables (not an MCP bug). #1–#5 are the fix; the figma-design-fetch pre-fetch lint makes "variables bound" a gate before code-gen.
  • get_design_context quality tracks structure — auto layout / componentization / semantic names / Code Connect are exactly what make it emit componentized code instead of a div-soup.
  • Low-fidelity mockup → pixel snapshot = breaking #19; the fix is entirely on the design side.
  • Code Connect paywall (needs Dev/Full seat + Org/Enterprise): when you lack it, #2/#13's markdown Need→Token table + component barrel is the substitute mapping contract.

Companion

  • figma-design-fetch — the agent-side pipeline that consumes a design authored to these rules; its pre-fetch lint enforces #1 / #6 / #13 / #19 as a gate.

Provenance

The Figma-side (Part B) half of the Figma→code pipeline, distilled from Figma's official "structure your file" guidance + the aliafsahnoudeh reference project. Kept as a standalone designer-facing spec so the design and the agent-side pipeline evolve together.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 0 of the 12 instructions most design frontend skills give in ~1.8k tokens

Counted across 1,179 of the 2,086 authors here whose files we hold, read 2026-09-06

  • Commit to a bold aesthetic directionin 31 of 1179, across 24 files
  • Prefer component composition over inheritancein 28 of 1179, across 14 files
  • Animate only transform and opacity propertiesin 27 of 1179, across 22 files
  • Memoize expensive computations with useMemoin 26 of 1179, across 13 files
  • Use semantic HTML elementsin 24 of 1179, across 23 files
  • Virtualize long lists for performancein 21 of 1179, across 10 files
  • Use CSS variables for design tokensin 20 of 1179, across 14 files
  • Implement loading, empty, and error statesin 20 of 1179
  • Lazy load heavy components with Suspensein 19 of 1179, across 8 files
  • Respect prefers-reduced-motion media queriesin 18 of 1179, across 10 files
  • Prioritize CSS-only animations for HTMLin 18 of 1179, across 16 files
  • Use compound components for related UI elementsin 18 of 1179, across 7 files

Said here and by no other author read

  • Bind every property to a Figma variable
  • Name semantic tokens by intent
  • Prefer variables over styles for tokenizable elements
  • Set code syntax on variables
  • Componentize all reused elements
  • Make every interactive state a variant

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.