skills.rest
artosetrov
artosetrovCOMMUNITY
Explore all skills by this author →
GitHub

apply-design-system

Map Figma design sections to design system components with backups.

Updated Mar 5, 2026
Search Tags:#workflow#figma#design-system#design-audit#component-mapping#ui-reuse#library-components
One-click install
npx skills add https://github.com/artosetrov/iron-fist-arena-backend --skill apply-design-system-artosetrov
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apply-design-system
Source: https://github.com/artosetrov/iron-fist-arena-backend/tree/main/.claude/skills/apply-design-system
Command: npx skills add https://github.com/artosetrov/iron-fist-arena-backend --skill apply-design-system-artosetrov

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps align an existing Figma design with a published design system, preventing drift and ensuring components can be reused across screens.

Core Features & Use Cases

  • Supports two entry modes: review-then-apply for broad audits and apply-known-scope for targeted sections.
  • Guides inventory, mapping, and replacement of sections to design system components.
  • Enforces best practices by requiring backups, section-level updates, and explicit strategy decisions (exact-swap, compose-from-primitives, or blocked).

Quick Start

Audit the target screen and map its sections to the design system, then back up the frame before applying changes.

Frequently Asked Questions about apply-design-system

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

FAQPage Schema
How do I align an existing Figma design with a published design system?▼

The skill corrects design system drift by auditing target screens, mapping sections to library components, and executing section-level updates to ensure consistent UI reuse across the Figma file.

How do I map Figma sections to design system components during an audit?▼

During an audit, you inventory the target screen, map sections to library components, and choose an explicit replacement strategy such as exact-swap, compose-from-primitives, or blocked for unmatched areas.

Can I apply a design system update to specific sections instead of the whole Figma file?▼

Yes, the apply-known-scope entry mode targets specific sections for component mapping, while the review-then-apply mode handles broad audits across the entire Figma file.

What is the best way to prevent design system drift in Figma?▼

The best way to prevent design system drift is to follow a structured workflow requiring frame backups, section-level updates, and explicit replacement strategies like exact-swap or compose-from-primitives.

Do I need to back up my Figma frames before replacing components?▼

Yes, backing up the Figma frame is a required best practice before applying component replacements, ensuring you can safely correct drift and execute section-level updates without data loss.

Related Skills

Explore More Design & Creative Skills→
NagyViktNagyVikt
2

figma-generate-design

Generate and synchronize Figma screens from source code UI structures.

Community
Advanced
rmjamesrmjames
1

Brand Guidelines

Enforce design system tokens for spacing, color, and typography in web interfaces.

Community
Basic
rakibulismrakibulism
2

figma-code-connect

Create Figma Code Connect template files mapping components to React code.

Community
Advanced
codesour-designcodesour-design

apply-design-system

Reconnects existing Figma designs to published design system components.

Community
Advanced