“Figma”

Implement a Figma UI in an existing frontend file, block by block; leave pending assets empty, bind prepared assets, and hand over for manual acceptance.

Use BEFORE any Figma MCP tool call during design-to-code work — reading, planning, or implementing a Figma design.

Read a Figma design offline from a .fig export — layer tree, copy, component properties, layout, colors, design-token names, and original vector or raster…

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and…

Judgement guardrails for implementing a component or page from a Figma design — token misses, missing states, convention drift, unbuilt features, and when to…

Keep Figma and code in sync — map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when connected…

Optional Figma design context and visual acceptance for Android Compose UI.

Translates Figma designs into production-ready application code with 1:1 visual fidelity.

Use when implementing, reviewing, or planning Angular UI from a Figma link/frame using tds-ui components and tds-color tokens, updating/syncing TDS token JSON…

Prepare Figma bitmaps, SVGs, and videos for human-guided UI implementation; identify assets, validate their types, collect bitmap evidence, convert or…

Create a new blank Figma file.

Token-economical path when a screen/UC needs a visual design and no Figma frame covers it yet: ground a Figma Make prompt in the real, already-drawn chrome +…

Bidirectionally sync CSS custom properties with Figma variables — push local tokens to Figma, pull Figma changes to CSS, and diff for CI drift detection.

Use this skill when the user is about to do design work in Figma — creating or editing components, building layouts, working with variables/tokens, or…

Use this skill when implementing a Figma design as code (design → code) — the read-FROM-Figma direction.

Connects Figma design components to code components using Code Connect mapping tools.

Use this agent when you need to synchronize a web implementation with its Figma design by automatically detecting and fixing visual differences.

Build or update a professional-grade design system in Figma from a codebase.

Read Figma files from the terminal (specs, styles, node JSON, rendered images, comments).

Pull a live Figma Make export directly via the Figma MCP (get_design_context) instead of downloading a zip by hand.

Interact with Figma design files via the web browser using the Figma Plugin API.

Extract exact design values from a Figma node into a build-ready spec table, instead of eyeballing a screenshot.

Extract Figma designs and build them as code with ralph-starter

Figma MCP 도구 변경 뒤 REST와 WebSocket 결과를 실제로 비교해 transport parity를 검증할 때 사용한다.