skills.rest
dabowman
dabowmanCOMMUNITY
Explore all skills by this author →
GitHub

figma-guidelines

Guide Figma design principles, component architecture, auto layout, and collaboration tools.

Updated Mar 5, 2026
Search Tags:#design#collaboration#figma#design tokens#auto layout
One-click install
npx skills add https://github.com/dabowman/Figmagent --skill figma-guidelines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-guidelines
Source: https://github.com/dabowman/Figmagent/tree/main/skills/figma-guidelines
Command: npx skills add https://github.com/dabowman/Figmagent --skill figma-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides essential Figma knowledge to streamline AI-assisted design processes, helping you navigate the Figma interface, understand design principles, and implement best practices efficiently.

Core Features & Use Cases

  • Figma Knowledge: Comprehensive guide to Figma's component architecture, auto layout, design tokens, collaboration features, and critical gotchas.
  • Use Case: When you need to build a design system, create responsive layouts, set up design tokens, organize a Figma file, or work with component libraries, this skill is your go-to resource.

Quick Start

Load the figma-guidelines skill to get a comprehensive overview of Figma design principles and best practices.

Frequently Asked Questions about figma-guidelines

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

FAQPage Schema
How do I set up design tokens in Figma for a scalable design system?▼

To set up design tokens in Figma, you structure your foundational styles like colors and typography into a cohesive system. This allows you to manage visual updates globally across your component architecture.

What is the best way to organize a Figma file for team collaboration?▼

Organizing a Figma file for collaboration requires a structured approach to page hierarchy and component architecture. Proper file organization ensures team members can efficiently navigate and reuse components.

How does auto layout work when building responsive Figma components?▼

Auto layout in Figma allows components to resize dynamically based on their content and constraints. It enables you to build responsive interfaces that adapt seamlessly to different screen sizes.

Do I need to understand Figma's interface to use this design guide?▼

Yes, applying these Figma design principles requires a basic understanding of Figma's interface. The guide focuses on advanced workflows like component architecture and token management rather than beginner navigation.

Why are my Figma component overrides not working as expected?▼

Component override issues in Figma often stem from inconsistent component architecture or nested layer structures. Understanding critical Figma gotchas and component properties ensures overrides apply correctly.

Related Skills

Explore More Design & Creative Skills→
partme-aipartme-ai
610

figma-ai

Guide designers in using Figma AI features for design tasks.

Official
Basic
webrix-aiwebrix-ai
1

design-handoff

Extract design specifications and implementation details from Figma handoff materials.

Official
Intermediate
nesihaver-ILnesihaver-IL

figma

Transform Figma designs into React components and design tokens.

Community
Intermediate
spontus-reachspontus-reach
1

figma-variant-matrix

Define complete Figma variant matrices with properties, states, anatomy, and token mapping.

Official
Intermediate