Figma

Figma is a browser-based collaborative design tool for UI/UX, prototyping, and design systems.

Core Features

Auto Layout

Auto layout lets frames resize automatically based on their contents — essential for responsive components.

Key properties:

• Direction — horizontal or vertical
• Spacing — fixed gap or space between
• Padding — inner spacing
• Resizing — hug contents / fixed / fill container

Components & Variants

• Main component — the source of truth (defined once)
• Instance — a copy of a component; inherits overrides
• Variants — group states/types into one component (e.g., Button: Primary/Secondary, Default/Hover/Disabled)

Design Systems in Figma

A design system lives as a shared library with:

• Styles — colour, text, effect, grid styles
• Components — reusable UI elements
• Variables — design tokens for colour, spacing, radius, typography

File Organization

📁 Design System Library
├── 🎨 Foundation (colors, typography, spacing)
├── 🧩 Components (buttons, inputs, cards)
└── 📐 Patterns (forms, navigation, layouts)

📁 Product Designs
├── 📄 Wireframes
├── 📄 UI Screens
└── 📄 Prototypes

References

• Figma. Figma Help Center. https://help.figma.com 
• Figma. Variables and Design Tokens. https://help.figma.com/hc/en-us/articles/15339657135383