skills.rest
Hey-Viswa
Hey-ViswaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-design-skill

Translate design-system patterns into consistent Figma UI designs.

Updated Apr 11, 2026
Search Tags:#typography#components#figma#tokens#design-system#spacing#ui-patterns
One-click install
npx skills add https://github.com/Hey-Viswa/-claude-design-system-skills --skill figma-design-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-design-skill
Source: https://github.com/Hey-Viswa/-claude-design-system-skills/tree/main/design_system_skills/figma-design-skill
Command: npx skills add https://github.com/Hey-Viswa/-claude-design-system-skills --skill figma-design-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams apply consistent Figma-based design-system patterns to UI designs, speeding up prototyping and ensuring brand coherence across products.

Core Features & Use Cases

  • Proposes Figma-ready components, tokens, typography, spacing, and interaction states aligned with a design system.
  • Documents patterns and usage scenarios for dashboards, apps, and marketing pages to speed prototyping.
  • Provides an implementation-ready bridge to frontend development (React/Next.js) guidelines.

Quick Start

Open a new Figma file and apply the Figma Design Skill guidelines to structure components, tokens, and interactions.

Frequently Asked Questions about figma-design-skill

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

FAQPage Schema
How do I apply design-system patterns to Figma UI components?▼

To apply design-system patterns to Figma UI components, structure your typography, spacing, color tokens, and interaction states according to established guidelines. This ensures consistent branding and speeds up prototyping across dashboards and apps.

What is the best way to document design tokens for React and Next.js implementations?▼

Documenting design tokens for React and Next.js involves specifying typography, spacing, and color variables in Figma that map directly to frontend code. This provides an implementation-ready bridge for developers building UIs.

Can I use Figma design tokens for marketing pages and dashboards?▼

Yes, you can use Figma design tokens for marketing pages and dashboards. The skill documents usage scenarios and UI patterns specifically for these page types to maintain visual consistency across different product surfaces.

How do I structure Figma components to speed up UI prototyping?▼

Structure Figma components by defining reusable UI patterns, interaction states, and spacing rules upfront. Proposing Figma-ready components aligned with a design system accelerates prototyping and ensures brand coherence.

Does this approach work for specifying UI interaction states in Figma?▼

Yes, this approach works for specifying UI interaction states in Figma. It translates design-system patterns into detailed component specifications, covering state variations to ensure consistent user experiences across products.

Related Skills

Explore More Design & Creative Skills→
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
viably-labsviably-labs

design-to-react

Transform design specs into React components with TypeScript interfaces.

Official
Advanced
Higashi-KotaHigashi-Kota

senior-ui-designer

Provide UI/UX design guidance for SaaS interfaces with WCAG 2.2 AA accessibility.

Community
Basic
ydnikolaevydnikolaev
8

ux-designer

Build cohesive design systems and token libraries for web and mobile projects.

Community
Intermediate