skills.rest
NaimalArain13
NaimalArain13COMMUNITY
Explore all skills by this author →
GitHub

figma-modern-ui-design

Create responsive Figma UI designs with grids, typography, color tokens, and reusable components.

2|Updated Dec 4, 2025
Search Tags:#typography#accessibility#figma#responsive#ui-design#design-system
One-click install
npx skills add https://github.com/NaimalArain13/Hackathon-II_The-Evolution-of-Todo --skill figma-modern-ui-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-modern-ui-design
Source: https://github.com/NaimalArain13/Hackathon-II_The-Evolution-of-Todo/tree/main/.claude/skills/figma-modern-ui-design
Command: npx skills add https://github.com/NaimalArain13/Hackathon-II_The-Evolution-of-Todo --skill figma-modern-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a structured approach to designing modern, responsive UI in Figma, enabling teams to establish a cohesive visual language and efficient design workflows.

Core Features & Use Cases

  • Layout Design: 12-column grids, auto-layout, responsive breakpoints for multiple viewports.
  • Typography & Color Systems: scalable type scales and tokenized color palettes for consistency and accessibility.
  • Component Library: reusable UI components and design patterns that can be composed into pages and apps.
  • Use Case: Create a design system for a Todo app, then design dashboards and mobile screens consistently.

Quick Start

Open a new or existing Figma file and begin by establishing grid, typography, color tokens, and a reusable component library following the guidelines above.

Frequently Asked Questions about figma-modern-ui-design

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

FAQPage Schema
How do I create a responsive UI design system in Figma?▼

To create a responsive UI design system in Figma, establish 12-column layout grids, auto-layout, and responsive breakpoints. Then define a scalable typography scale, tokenized color palettes, and reusable components to ensure cohesive visual language across multiple viewports.

What is the best way to structure Figma typography scales and color tokens for accessibility?▼

The best way to structure typography scales and color tokens for accessibility is to use token-driven styling. This approach provides a scalable type scale and tokenized color palettes to maintain consistency and meet accessibility considerations across your web interfaces.

Can I use Figma auto-layout to build responsive dashboards and mobile apps?▼

Yes, you can use Figma auto-layout to build responsive dashboards and mobile apps. The skill enables designing layouts with 12-column grids and responsive breakpoints for multiple viewports, allowing you to create consistent user interfaces across different screen sizes.

How do I build reusable component libraries for modern web interfaces in Figma?▼

You build reusable component libraries for modern web interfaces in Figma by composing reusable UI components and design patterns into pages. This allows you to establish a cohesive design language and efficiently scale component patterns for your applications.

Does this approach to Figma UI design support token-driven styling workflows?▼

Yes, this approach to Figma UI design supports token-driven styling workflows. It enables teams to establish a cohesive visual language using tokenized color palettes and scalable type scales, ensuring efficient design workflows and consistent styling across projects.

Related Skills

Explore More Design & Creative Skills→
AnglesiteAnglesite
2

design-import

Import design tokens and page layouts from Canva or Figma into an Astro site.

Official
Advanced
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate
arvindbattulaarvindbattula

design-typography

Audit font choices, hierarchy, and readability to produce consistent typography systems.

Community
Intermediate
whd4whd4

design-consultation

Plan a complete design system and output a DESIGN.md with font and color previews.

Community
Advanced