skills.rest
anton-abyzov
anton-abyzovCOMMUNITY
Explore all skills by this author →
Website𝕏@aabyzovGitHub

figma-connect

Translate Figma designs into framework-specific UI code and design tokens.

43|6|Updated Feb 16, 2026
Search Tags:#figma#mcp#tokens#design-to-code#ui-components#code-connect#dev-mode
One-click install
npx skills add https://github.com/anton-abyzov/vskill --skill figma-connect-anton-abyzov
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-connect
Source: https://github.com/anton-abyzov/vskill/tree/main/plugins/frontend/skills/figma-connect
Command: npx skills add https://github.com/anton-abyzov/vskill --skill figma-connect-anton-abyzov

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bridges Figma MCP-driven design data to end-to-end code generation and Dev Mode publishing. This skill enables teams to implement UI components from Figma designs by linking MCP server tools with the Code Connect CLI, extracting design tokens, and publishing mappings to Dev Mode.

Core Features & Use Cases

  • Figma-to-code bridge for end-to-end UI implementation workflows (design-to-code, token extraction, and Dev Mode publishing).
  • Supports multiple frameworks (React, Vue, SwiftUI, Compose) and design tokens workflows; automates setup, code adaptation, and token generation.
  • Use Case: Share a Figma design URL and have the system generate framework-specific component code and token mappings ready for integration.

Quick Start

Share a Figma design URL and I will set up Code Connect, generate framework-specific code, and publish Code Connect mappings to Dev Mode.

Frequently Asked Questions about figma-connect

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

FAQPage Schema
How do I convert Figma designs to production-ready code using Code Connect?▼

You convert Figma designs to code by sharing a design URL to automate Code Connect CLI setup, generate framework-specific UI components, extract design tokens, and publish mappings to Dev Mode.

What frameworks are supported for Figma to code generation?▼

Supported frameworks for Figma to code generation include React, Vue, SwiftUI, and Compose. The system applies framework autodetection to automatically adapt and generate the correct UI component code.

Does Figma MCP work with Code Connect for Dev Mode publishing?▼

Yes, Figma MCP works with Code Connect by linking MCP server tools to the CLI. This bridges MCP-driven design data to extract design tokens and publish component mappings directly to Dev Mode.

How do I extract design tokens from Figma for my design system?▼

You extract design tokens from Figma by sharing a design URL through the MCP and Code Connect workflow. This automates token generation and optionally creates design-system rules alongside your UI component code.

Can I generate design-system rules automatically from Figma UI components?▼

Yes, you can generate optional design-system rules automatically from Figma UI components. This workflow links MCP design data with the Code Connect CLI to extract tokens and map components into framework-specific code.

Related Skills

Explore More Design & Creative Skills→
wiltaylorwiltaylor

figma-implement-design

Convert Figma design files into application code with design tokens.

Community
Advanced
elsolalelsolal
1

figma-setup

Configure Code Connect to generate .figma.tsx mappings for existing UI components.

Community
Intermediate
phazurlabsphazurlabs
35

figma-design-tool-workflows

Translate Figma workflows into implementation guidance for React, SwiftUI, CSS, and Storybook.

Community
Advanced
christofferbergjchristofferbergj
5

implement-design

Translate Figma designs into UI code using the Figma MCP workflow.

Community
Advanced