Menu
Sync a UI component from Figma to code using the component sync workflow. Use when updating components to match Figma designs.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | design.sync-component |
| description | Sync a UI component from Figma to code using the component sync workflow. Use when updating components to match Figma designs. |
| argument-hint | [component-name] |
| allowed-tools | ["mcp__figma-remote-mcp__get_design_context","mcp__figma-remote-mcp__get_screenshot","Read","Edit","Bash","Grep"] |
Sync the $ARGUMENTS component from Figma to code.
trBVcpjZslO63zxiNUI9io (Obra shadcn-ui safe)apps/web/src/components/ui/docs/figma-code-connect.mdapps/web/src/components/ui/<component>.tsxLook up the component in figma-code-connect.md to get the Figma node ID.
mcp__figma-remote-mcp__get_design_context(
fileKey: "trBVcpjZslO63zxiNUI9io",
nodeId: "<node-id>",
disableCodeConnect: true
)
Also get a screenshot for visual reference:
mcp__figma-remote-mcp__get_screenshot(fileKey, nodeId)
Check for changelog comments: Look for comments on the Figma component page that document changes (e.g., "removed shadow and border", "updated spacing", "changed variant names"). These comments indicate intentional design changes that should be synced to code.
First, check Figma comments for changelog - Look for documented changes in component comments that describe what was modified (e.g., "removed shadow", "updated border radius", "changed color scheme").
Then compare:
| Check | What to Compare |
|---|---|
| Sizes | Verify px values match (size-6=24px, size-8=32px, size-10=40px) |
| Colors | Fill colors → bg-, text- classes |
| Border | border-, rounded- classes |
| Shadow | shadow-* classes (Figma often has none) |
| Variants | CVA variants object keys |
Prioritize changelog items - If changelog comments exist, sync those changes first before doing a full comparison.
Only sync when Figma actually changed. Don't remove code defaults that improve DX.
Add/update component header comment:
/**
* ComponentName
*
* Figma: https://www.figma.com/design/trBVcpjZslO63zxiNUI9io/?node-id=XX:XXXX
*
* Intentional differences from Figma:
* - property: reason for difference
*
* Changelog (from Figma comments):
* - YYYY-MM-DD: Description of changes from Figma changelog comment
* - YYYY-MM-DD: Additional sync changes made
*/
Note: The changelog should reflect changes documented in Figma component comments. If Figma has a changelog comment, include those changes in the code changelog.
Run type-check:
yarn workspace @safe-global/web type-check
Write or refactor Cypress E2E tests following Page Object Model, action/assertion separation, and project conventions. Use when creating new tests, refactoring existing ones, or adding page object functions.
Implement a Figma design using shadcn/ui components. Use when converting Figma URLs to React code.
Creates a Storybook UI prototype from a PRD-style input using existing shadcn/ui components, subtle visual tone, and a clear hierarchy. Use when the user invokes /design.prototype or asks for a prototype Storybook story.
Sync CSS variables from Figma plugin export to globals.css. Use when updating design tokens/colors from Figma.
Verify Figma implementation is pixel-perfect. Use after implementing Figma designs to catch and fix discrepancies.