skills.rest
Radiants-DAO
Radiants-DAOOFFICIAL
Explore all skills by this author →
Website𝕏@RadiantsDAOGitHub

radtools-figma-sync

Imports or updates RadTools design system tokens from Figma via the write-css API.

1|Updated Dec 17, 2025
Search Tags:#figma#sync#tokens#design-system#import#radtools
One-click install
npx skills add https://github.com/Radiants-DAO/radtools --skill radtools-figma-sync
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: radtools-figma-sync
Source: https://github.com/Radiants-DAO/radtools/tree/main/.archive/docs-review/skills/cursor-skills/radtools-figma-sync
Command: npx skills add https://github.com/Radiants-DAO/radtools --skill radtools-figma-sync

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Importing or updating the RadTools design system from Figma to bootstrap tokens and keep design parity without manual token editing.

Core Features & Use Cases

  • Import colors, typography, and spacing from Figma to initialize the design system and keep tokens aligned.
  • Sync changes from Figma to update existing tokens when design evolves.
  • Scope limitation: not for building pages or components from Figma designs; use Figma MCP with existing tokens for component work.

Quick Start

Run the Figma → RadTools import workflow to extract tokens from Figma and apply them to the RadTools token system.

Frequently Asked Questions about radtools-figma-sync

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

FAQPage Schema
How do I import design system tokens from Figma to my development environment?▼

To import design system tokens from Figma, run the Figma to RadTools import workflow, which extracts colors, typography, and spacing tokens and persists them using the /api/devtools/write-css API.

Does syncing design tokens from Figma require a specific MCP connection?▼

Yes, syncing design tokens from Figma requires an active Figma MCP connection, a RadTools devtools directory, and a development environment to apply the extracted tokens.

Can I use this Figma token sync to build full pages or UI components?▼

No, this Figma token sync is scoped to importing and updating colors, typography, and spacing tokens. For building pages or components from Figma designs, use Figma MCP with existing tokens instead.

What is the best way to update existing design system tokens when Figma designs evolve?▼

To update existing design system tokens when designs evolve, run the Figma to RadTools sync workflow, which detects changes in Figma and applies token updates via the write-css API.

How does the Figma to RadTools token sync workflow initialize the design system?▼

The Figma to RadTools token sync initializes the design system by extracting colors, typography, and spacing tokens from Figma and writing them to the RadTools token system for bootstrap setup.

Are there limitations on what token types I can sync from Figma to RadTools?▼

Yes, the Figma to RadTools sync is limited to colors, typography, and spacing tokens. It does not support importing full layouts, pages, or component structures from Figma.

Related Skills

Explore More Design & Creative Skills→
ClubMediterraneeClubMediterranee
4

figma-generate-personal-token

Detect, validate, and persist Figma API tokens to environment files.

Official
Advanced
calvingitcalvingit
2

figma-implement-design

Translate Figma designs into UI code using design tokens.

Community
Advanced
gkswls5006-webgkswls5006-web

moai-design-tools

Automate design-to-code workflows from Figma to React and Tailwind.

Community
Advanced
Radiants-DAORadiants-DAO
1

radflow-figma-sync

Import or sync RadFlow design tokens from Figma via MCP.

Official
Intermediate