← ClaudeAtlas

figma-authoring-constraintslisted

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.
jajupmochi/agent-harness · ★ 1 · AI & Automation · score 74
Install: claude install-skill jajupmochi/agent-harness
# /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](https://developers.figma.com/docs/figma-mcp-server/structure-figma-file/). 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)](#variables--tokens-15) - [Auto layout (6–9)](#auto-layout-69) - [Components / variants (10–12)](#components--variants-1012) - [Naming (13–15)](#naming-1315) - [Dev Mode / Code Connect readiness (16–18)](#dev-mode--code-connect-readiness-1618) - [Don't use raster placeholders (19–20)](#dont-use-raster-placeholders-1920) - [How these map to the MCP gotchas](#how-these-map-to-the-mcp-gotchas) - [Companion](#companion) - [Provenance](#provenance) ## 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_var