skills.rest
GainInsightDev
GainInsightDevOFFICIAL
Explore all skills by this author →
WebsiteGitHub

af-sync-figma-designs

Sync design context and component mappings between Figma and code.

Updated Feb 8, 2026
Search Tags:#design#design system#figma#code sync#component mapping#round-trip
One-click install
npx skills add https://github.com/GainInsightDev/websites --skill af-sync-figma-designs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: af-sync-figma-designs
Source: https://github.com/GainInsightDev/websites/tree/main/.claude/skills/af-sync-figma-designs
Command: npx skills add https://github.com/GainInsightDev/websites --skill af-sync-figma-designs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of synchronizing design work between Figma and your codebase, ensuring consistency and efficiency in the design-to-development workflow.

Core Features & Use Cases

  • Round-trip workflows: Capture live UI to Figma, extract design context back to code.
  • Component mapping: Manage mappings between Figma components and codebase imports.
  • Design system sync: Keep Figma libraries up-to-date with code tokens and components.
  • Use Case: When a designer updates a button in Figma, this Skill can extract those changes and update the corresponding React component in your project, maintaining design integrity.

Quick Start

Use the af-sync-figma-designs skill to capture the current UI to Figma for designer review.

Frequently Asked Questions about af-sync-figma-designs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I sync Figma designs with my codebase?▼

You can sync Figma designs with your codebase by using this Skill to extract design context and metadata back to code, managing custom component mappings via `component-map.json` and tokens via `design-system-rules.md`.

What is a round-trip design workflow between Figma and code?▼

A round-trip design workflow enables capturing live UI to Figma for visual review while extracting design context and metadata back to code, maintaining the codebase as the single source of truth.

Can I map Figma components to my codebase imports?▼

Yes, you can map Figma components to codebase imports by managing custom component mappings through the `component-map.json` file, ensuring that design updates align with code components.

Does the Figma sync workflow integrate with Linear for issue tracking?▼

Yes, the Figma code sync workflow integrates with Linear for issue tracking, allowing you to connect design updates and code changes directly to your project management tasks.

How do I keep Figma libraries updated with code design tokens?▼

You keep Figma libraries updated with code design tokens by syncing them via the `design-system-rules.md` file, ensuring that design system rules remain consistent across both environments.

What is the best way to capture live UI to Figma for designer review?▼

The best way to capture live UI to Figma is by using this Skill's round-trip workflow, which utilizes Figma's MCP tools to capture the current UI state for designer review.

Related Skills

Explore More Design & Creative Skills→
GainInsightDevGainInsightDev

af-figma-design-expertise

Capture live UI to Figma and extract design context back to code.

Official
Advanced
Luohao-YanLuohao-Yan
6

figma-code-connect-components

Map Figma design components to matching code components via Code Connect.

Community
Advanced
LutimiLutimi

cursor2figma

Import HTML into Figma and manage design tokens via an MCP server.

Community
Intermediate
oakossoakoss
14

figma-developer

Extract design tokens, icons, and components from Figma via REST API.

Official
Advanced