agentsclimarketplace

Figma authoring constraints

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

Linlin's curated AI agent harness configuration: workflow rules, skills, hooks, plugin recommendations, tooling preferences, and project templates. Loadable into any new project so a fresh /init can pick the relevant subset.

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.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

7.1 KB, 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.

Keep looking

Skills are one crate of 328,083. 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.