apply-design-system

Reattach Figma screens to a published design system with dependency-aware swaps.

Updated Apr 19, 2026
One-click install
npx skills add https://github.com/mayzhangmin/ucd-figma-skills-playground --skill apply-design-system-mayzhangmin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apply-design-system
Source: https://github.com/mayzhangmin/ucd-figma-skills-playground/tree/main/skills/apply-design-system
Command: npx skills add https://github.com/mayzhangmin/ucd-figma-skills-playground --skill apply-design-system-mayzhangmin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reconcile and reattach existing Figma screens to a published design system, enabling multi-section migrations with dependency-aware swaps, primitive composition, and robust validation of library-backed results.

Core Features & Use Cases

  • Reconnect multiple sections on an existing screen to a published design system
  • Replace local wrappers or detached layers with exact library swaps or composed library primitives
  • Manage dependencies, blockers, and post-change validation across multi-section migrations
  • Support overlay workflows and reusable migration patterns for design-system adoption

Quick Start

Identify the sections to migrate, verify a key component can be imported, then begin the review-then-apply workflow.

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 screens to a published design system?▼

Yes, you can migrate multiple sections simultaneously. This workflow manages dependencies, blockers, and post-change validation across multi-section migrations to ensure all sections reconnect to the library correctly.

How do I validate changes when migrating Figma layers to library components?▼

You validate changes by enforcing a precondition import of key components and using backups with screenshots. This provides robust validation of library-backed results during the design-system migration.

Do I need to import key components before starting a Figma design system migration?▼

Yes, a precondition import of key components is required before beginning the review-then-apply workflow. You must verify a key component can be imported to ensure a successful design-system reconciliation.

What is the best way to replace detached layers with library primitives in Figma?▼

The best way is using a review-then-apply workflow that performs exact library swaps or composes library primitives. This approach supports overlay workflows and reusable migration patterns for design-system adoption.

Can I use overlay workflows when migrating Figma screens to a design system?▼

Yes, overlay workflows are supported during the migration process. The approach allows you to reconnect multiple sections on an existing screen while managing dependencies and blockers across the migration.