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.