Figma ↔ Motion Kit Roundtrip

Keeps a Remotion motion-graphics kit and its editable Figma boards in sync, porting board edits into brand tokens and components — and code changes back into the boards.

Design & UIAdvanced★ 422⑂ 59AI score 8/10Last updated: Oct 23, 2026

What it does

Sets up a mirroring structure: a dedicated page in the brand file (e.g. "Claude - Editable"), a section per kit version, one board per component at the video's frame size with real copy and named layers.
Binds colours and type to Figma Variables (a "Motion" collection: ink, paper, accent, greys, font sizes, paddings) so a palette change is one edit.
When the creator says the boards changed, it reads the diffed layers (font, weight, size, line height, padding, position, radius, strokes, variables used) and ports them into brand.json tokens first, component layout second.
Renders preview stills of the same components for side-by-side comparison and reports a plain-language changelog ("title Light 120 → Regular 108, padding 64 → 80").
Reverse direction: when the kit changes in code (narrow-frame layout, caption-safe band), it updates the matching boards or flags which boards are now stale.

Who it's for

Creators and small studios building video graphics in Remotion but designing in Figma.
Teams that want brand tokens and Figma Variables to be a single source of truth.
Anyone already running (or willing to set up) the Figma MCP in Claude Code.

Example uses

"I bumped the title board padding to 80 and made the label uppercase mono" → Claude reads the board, updates tokens, renders a comparison still, and lists every delta.
You add a vertical narrow-frame layout in code → Claude creates the matching Figma board and tidies the kit-version section.
"Show me the kit in Figma" → it generates one board per component at frame size, with named layers and variables bound.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/appariciojunior/video-editor-skills/HEAD/skills/figma-roundtrip/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)

Download the ZIP with the button below.
In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.

↓ Download ZIP

Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on AI Skill Mart.
Copy the skills/figma-roundtrip folder from the GitHub repo appariciojunior/video-editor-skills into my ~/.claude/skills/figma-roundtrip/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/appariciojunior/video-editor-skills.git && mkdir -p ~/.claude/skills && cp -r video-editor-skills/skills/figma-roundtrip ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

Open a terminal and clone the repo: git clone https://github.com/appariciojunior/video-editor-skills.git
Create the skills folder if needed: mkdir -p ~/.claude/skills
Copy this skill across: cp -r video-editor-skills/skills/figma-roundtrip ~/.claude/skills/
If the repo ships a figma-use skill, copy it too — this skill loads it before writing to a Figma file.
Connect the Figma MCP server in Claude Code and make sure you have access to the target Figma file.
Record the Figma file key and editable page name (e.g. "Claude - Editable") in your project's CLAUDE.md.
Restart Claude Code and try: "I changed the boards — port the updates into the kit."

View source on GitHub ↗License: NOASSERTION