figma-roundtrip

Installation
SKILL.md

Figma ↔ motion kit

Creators design better in Figma than in prompts. Keep every kit component mirrored as an editable board and let them edit there.

Set up once

  • A page in their brand file (e.g. "Claude - Editable") with a section per kit version ("Motion kit v1", "Vlog kit v1").
  • One board per component at the video's frame size, real copy, every layer named.
  • Colours and type bound to variables (a "Motion" collection: ink, paper, accent/highlighter, greys; font sizes and paddings as numbers) so a colour change is one edit.
  • Use the Figma MCP (load its figma-use skill before writing to the file). Record the file key and page in CLAUDE.md.

When they say "I changed the boards"

  1. Read each changed board's layers: fonts, weights, sizes, line heights, paddings, positions, which variables they use, corner radius, strokes.
  2. Port the differences into the components and brand.json (tokens first, component code only for layout).
  3. Render preview stills of the same components and compare side by side with the boards.
  4. List what changed ("title Light 120 → Regular 108, padding 64 → 80, label now uppercase mono").

When the kit changes in code

(e.g. a narrow-frame layout, a caption-safe band) update the matching boards so the two never drift, or tell the creator which boards are now out of date.

Installs
10
GitHub Stars
336
First Seen
6 days ago