skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-figma

Apply Figma's design system tokens to generate brand-accurate UI interfaces.

Updated Feb 23, 2026
Search Tags:#typography#design system#css#figma#design tokens#ui generation#brand styling
One-click install
npx skills add https://github.com/deepparser/skills --skill design-figma-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-figma
Source: https://github.com/deepparser/skills/tree/main/design-figma
Command: npx skills add https://github.com/deepparser/skills --skill design-figma-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating Figma's distinctive visual identity in UI work requires precise knowledge of its unusual design tokens — variable font weights like 320 and 540, strictly monochrome chrome, pill-shaped buttons, and dashed focus outlines — which are easy to get wrong without a reference. ## Core Features & Use Cases - Complete Design Token Catalog: Provides exact color values (#000000/#ffffff chrome, glass overlays), typography specs (figmaSans weights 320–700, figmaMono labels), spacing scale, and border-radius rules. - Component Styling Rules: Defines pill (50px) and circular (50%) button geometry, card styles, product tab bars, and the signature dashed 2px focus indicator. - Light and Dark HTML Previews: Bundled preview.html and preview-dark.html files show the full token system implemented for visual verification. - Use Case: When asked to build a landing page or dashboard styled like Figma, invoke this skill to generate UI with the correct variable font weights, negative letter-spacing, monochrome interface, and vibrant hero gradients. ## Quick Start Build a landing page styled like Figma with a gradient hero, pill buttons, and figmaSans typography.

Frequently Asked Questions about design-figma

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

FAQPage Schema
How do I make a UI look like Figma's website?▼

Use a strictly black-and-white interface layer with figmaSans variable font weights (320–540), pill-shaped buttons with 50px radius, and dashed 2px focus outlines. Reserve vibrant multi-color gradients for hero sections only.

What font weights does Figma's design system use?▼

Figma uses unusual variable font weight stops: 320, 330, 340, 450, 480, 540, and 700. Most body text sits at 320–340, lighter than typical 400 regular, creating an airy reading experience.

Does this skill include a dark theme preview?▼

Yes, the skill bundles both preview.html (light theme) and preview-dark.html (dark theme). These files show the full token catalog implemented in CSS for visual verification of colors, typography, buttons, cards, and spacing.

What border radius should Figma-style buttons use?▼

Figma-style buttons use pill geometry with 50px radius for CTAs and tabs, and 50% (perfect circle) for icon buttons. Cards and images use 8px radius, while small containers use 6px.

Can I add brand colors to a Figma-style interface?▼

No, the interface chrome must remain strictly black (#000000) and white (#ffffff). Color appears only in hero gradients and product showcase content, never in navigation, buttons, or interface elements.

Related Skills

Explore More Design & Creative Skills→
juanjaragavijuanjaragavi

brand-identity

Enforce consistent brand identity across UI, copy, and imagery.

Community
Advanced
ThorStarlordThorStarlord
1

ui-generate-code

Convert approved UI component specifications into deterministic frontend code.

Community
Advanced
Jorge-IvanJorge-Ivan
1

design-audit

Audit project designs for visual consistency, WCAG compliance, and design system adherence.

Community
Advanced
timchaptimchap

popular-web-designs

Generates HTML/CSS pages styled after 54 real brand design systems.

Community
Intermediate