figma-ui-skills
CommunityBuild Figma-style interfaces.
Authorihlamury
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides opinionated constraints and guidelines for building user interfaces that are visually consistent with Figma's aesthetic, ensuring pixel-perfect replication and adherence to its design principles.
Core Features & Use Cases
- Figma Aesthetic Replication: Apply Figma's light mode, Inter font, and 4px grid system to your designs.
- Design System Consistency: Use predefined color tokens, typography scales, and spacing rules for cohesive UI development.
- Use Case: When tasked with creating a new feature that needs to feel like a native part of the Figma application, leverage these constraints to ensure visual harmony and user familiarity.
Quick Start
Apply Figma's UI design system to build a light-mode interface using the Inter font and a 4px grid.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: figma-ui-skills Download link: https://github.com/ihlamury/design-skills/archive/main.zip#figma-ui-skills Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.