skills.rest
codesour-design
codesour-designCOMMUNITY
Explore all skills by this author →
GitHub

apply-design-system

Reconnects existing Figma designs to published design system components.

Updated Apr 8, 2026
Search Tags:#design system#figma#design audit#component mapping#component replacement#ui reconciliation
One-click install
npx skills add https://github.com/codesour-design/gravity --skill apply-design-system-codesour-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apply-design-system
Source: https://github.com/codesour-design/gravity/tree/main/.agents/skills/apply-design-system
Command: npx skills add https://github.com/codesour-design/gravity --skill apply-design-system-codesour-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps designers reconcile existing Figma screens that drift from a published design system by replacing detached layers, local wrappers, and one-off components with validated system-backed patterns.

Core Features & Use Cases

  • Design System Reconciliation: Reviews existing screens, identifies disconnected sections, and determines whether they should be swapped, composed, preserved, or blocked.
  • Component Mapping and Replacement: Finds matching library components, selects appropriate variants, and applies system components while preserving layout intent.
  • Use Case: A product designer can use this Skill to reconnect a dashboard page to an organization’s Figma design system while documenting swapped sections, composed sections, and remaining blockers.

Quick Start

Use the apply-design-system skill to review this Figma screen and reconnect applicable sections to the published design system.

Frequently Asked Questions about apply-design-system

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

FAQPage Schema
How do I reconnect existing Figma designs to a published design system?▼

Reconnect existing Figma designs to a published design system by inspecting Figma metadata, discovering library components, matching variants, and replacing disconnected UI structures while preserving layout intent.

What is design system reconciliation in Figma?▼

Design system reconciliation in Figma reviews existing screens to identify disconnected sections, determining whether custom-built UI structures should be swapped, composed, preserved, or blocked.

How do I replace detached Figma layers with validated library components?▼

Replace detached Figma layers by finding matching library components, selecting appropriate variants, and applying system components while preserving the original layout intent.

Can I perform a component mapping and replacement for a large Figma screen without losing data?▼

Component mapping and replacement for Figma screens requires creating backups before applying incremental updates, ensuring visual validation and data preservation throughout the reconciliation process.

Does Figma design system migration work for section-level component replacement?▼

Figma design system migration supports section-level component replacement by applying incremental updates and visual validation to swap local wrappers with validated system-backed patterns.

When should I not use automated component replacement for UI reconciliation?▼

Avoid automated UI reconciliation when sections are marked as blocked or preserved, as the process specifically targets disconnected layers and one-off components suitable for system-backed replacement.

Related Skills

Explore More Design & Creative Skills→
rakibulismrakibulism
2

figma-code-connect

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

Community
Advanced
mayzhangminmayzhangmin

review-and-fix-design-system

Audit Figma screens for design-system drift and fix one validated finding.

Community
Advanced
AradotsoAradotso
3

figma-bridge-html-export

Convert Figma design nodes into semantic HTML and CSS files.

Official
Advanced
pathtoresiliencebvpathtoresiliencebv

figma-generate-library

Generate Figma design systems from code with multi-phase workflows.

Community
Advanced