Figma

Figma là design tool hiện đại, browser-based, collaborative.

Key Features

1. Vector Editing

Pen tool
Shapes
Boolean operations

2. Components

Reusable design elements

Main Component (master)
  ↓
Instances (copies)

3. Auto Layout

Responsive components tự động adjust

4. Prototyping

Interactive prototypes với transitions

5. Collaboration

Real-time multiplayer editing

Figma Basics

Layers

Frame (Artboard)
  ├─ Header
  │  ├─ Logo
  │  └─ Navigation
  ├─ Content
  └─ Footer

Components

Button Component
├─ Variants
│  ├─ Primary
│  ├─ Secondary
│  └─ Disabled
└─ Properties
   ├─ Size (Small, Medium, Large)
   └─ State (Default, Hover, Active)

Keyboard Shortcuts

F - Frame tool
R - Rectangle
T - Text
V - Move tool
Cmd/Ctrl + D - Duplicate
Cmd/Ctrl + G - Group
Cmd/Ctrl + / - Search

Auto Layout

Container [Auto Layout]
├─ Padding: 16px
├─ Spacing: 8px
└─ Resizing: Hug contents

Design Tokens

Colors:
- Primary: #3498db
- Secondary: #2ecc71
- Text: #2c3e50

Typography:
- Heading 1: 32px / Bold
- Heading 2: 24px / Bold
- Body: 16px / Regular

Plugins

Unsplash - Free images
Iconify - Icons
Content Reel - Fake data
Contrast - Accessibility checker

Resources

Figma Learn
Figma Community
Free UI kits and templates