Figma

┌─────────────────────────────────────────────────────────────────┐
│ Toolbar (narzędzia)                                              │
├──────────┬─────────────────────────────────────────┬────────────┤
│          │                                         │            │
│  Layers  │              Canvas                     │  Design    │
│  Panel   │         (obszar roboczy)                │  Panel     │
│          │                                         │            │
│  - Pages │    ┌─────────────────────────┐         │  - Fill    │
│  - Frames│    │                         │         │  - Stroke  │
│  - Groups│    │        Twój design      │         │  - Effects │
│  - Shapes│    │                         │         │  - Layout  │
│          │    └─────────────────────────┘         │            │
│          │                                         │            │
├──────────┴─────────────────────────────────────────┴────────────┤
│ Assets / Plugins / Libraries                                     │
└─────────────────────────────────────────────────────────────────┘

Frame = Artboard + Auto Layout + Constraints
- Może mieć określone wymiary (Desktop: 1440px, Mobile: 390px)
- Może być responsywny z Auto Layout
- Może mieć clipowanie zawartości

Groups (Ctrl/Cmd + G):
- Proste grupowanie
- Brak własnych właściwości
- Dobre do organizacji

Frames (Ctrl/Cmd + Alt + G):
- Kontener z własnymi właściwościami
- Auto Layout
- Constraints
- Clipping
- Używaj zawsze gdy możliwe

NAVIGATION:
Space + drag     - Pan canvas
Ctrl/Cmd + +/-   - Zoom in/out
Shift + 1        - Zoom to fit
Shift + 2        - Zoom to selection
Ctrl/Cmd + \     - Toggle UI

SELECTION:
Ctrl/Cmd + A     - Select all
Ctrl/Cmd + click - Deep select
Hold Alt + hover - Measure distances

EDITING:
Ctrl/Cmd + D     - Duplicate
Ctrl/Cmd + G     - Group
Ctrl/Cmd + Alt+G - Frame selection
Ctrl/Cmd + R     - Rename
Ctrl/Cmd + [/]   - Send backward/forward

ALIGNMENT:
Alt + A          - Align left
Alt + D          - Align right
Alt + W          - Align top
Alt + S          - Align bottom
Alt + H          - Align center horizontal
Alt + V          - Align center vertical

COMPONENTS:
Ctrl/Cmd + Alt+K - Create component
Ctrl/Cmd + Alt+B - Detach instance

┌────────────────────────────────────────────────────────┐
│  Auto Layout Frame                                      │
│  ┌──────┐  ┌──────┐  ┌──────┐  ┌──────┐               │
│  │ Item │  │ Item │  │ Item │  │ Item │               │
│  │  1   │  │  2   │  │  3   │  │  4   │               │
│  └──────┘  └──────┘  └──────┘  └──────┘               │
│                                                         │
│  Direction: Horizontal (→)                             │
│  Gap: 16px                                             │
│  Padding: 24px                                         │
│  Alignment: Center                                     │
└────────────────────────────────────────────────────────┘

DIRECTION (kierunek):
- Horizontal (→) - elementy obok siebie
- Vertical (↓) - elementy pod sobą
- Wrap - zawijanie (jak flex-wrap)

GAP (odstępy między elementami):
- Fixed gap: 16px - stały odstęp
- Auto: space-between zachowanie

PADDING (wewnętrzne marginesy):
- Uniform: 16px wszystkie strony
- Independent: 16px 24px 16px 24px (T R B L)

ALIGNMENT:
- Primary axis (main): start/center/end/space-between
- Counter axis (cross): start/center/end/baseline

SIZING:
- Fixed: 200px - stała szerokość
- Hug: dopasuj do zawartości
- Fill: wypełnij dostępną przestrzeń

Button (Auto Layout Frame):
├── Direction: Horizontal
├── Gap: 8px
├── Padding: 12px 24px
├── Alignment: Center/Center
│
├── Icon (16x16)
│   └── Fill container: ❌
│   └── Fixed size: ✅
│
└── Label ("Click me")
    └── Hug contents: ✅

Rezultat: Przycisk, który automatycznie rośnie/maleje
z zawartością, zachowując padding i gap.

Card Frame (Vertical Auto Layout):
├── Padding: 24px
├── Gap: 16px
│
├── Header (Horizontal Auto Layout)
│   ├── Title (Fill) - rozciąga się
│   └── Badge (Hug) - stały rozmiar
│
├── Content (Text, Hug)
│
└── Actions (Horizontal Auto Layout, Space Between)
    ├── Secondary Button (Hug)
    └── Primary Button (Hug)

Navbar (Horizontal Auto Layout):
├── Padding: 0 24px
├── Min Width: Fill container
│
├── Logo (Fixed 120px)
│
├── Nav Links (Horizontal, Fill)
│   ├── Gap: 32px
│   ├── Alignment: Center
│   └── Links: Home, Products, About, Contact
│
└── CTA Button (Hug)

Constraints (używaj gdy):
- Elementy mają absolutne pozycjonowanie
- Floating buttons, overlays
- Background images

Auto Layout (używaj gdy):
- Lista elementów
- Formularze
- Cards
- Buttons
- Komponenty UI

Kombinacja:
Frame z Constraints
└── Auto Layout dla zawartości
    └── Items z Fill/Hug

1. Zaprojektuj element (np. Button)
2. Zaznacz frame
3. Ctrl/Cmd + Alt + K (Create Component)
4. Komponent pojawi się w Assets panel

Main Component (z ikoną 4 rombów):
└── Źródło prawdy - edycja wpływa na wszystkie instancje

Instance (z ikoną 1 rombu):
└── Kopia komponentu - można nadpisać właściwości

Button Component
│
├── Variant: Size
│   ├── Small (height: 32px, padding: 8px 16px)
│   ├── Medium (height: 40px, padding: 12px 24px)
│   └── Large (height: 48px, padding: 16px 32px)
│
├── Variant: Style
│   ├── Primary (bg: blue, text: white)
│   ├── Secondary (bg: gray, text: dark)
│   └── Ghost (bg: transparent, border: gray)
│
└── Variant: State
    ├── Default
    ├── Hover
    ├── Pressed
    ├── Disabled
    └── Loading

Step 1: Stwórz bazowy button
┌─────────────────────────┐
│      Click me           │ ← Main Component
└─────────────────────────┘

Step 2: Dodaj warianty (Component → Add variant)
┌─────────────────────────────────────────────────────┐
│ Button Component Set                                 │
│                                                      │
│ ┌───────────┐  ┌───────────┐  ┌───────────┐        │
│ │  Primary  │  │ Secondary │  │   Ghost   │ Style  │
│ └───────────┘  └───────────┘  └───────────┘        │
│                                                      │
│ ┌───────────┐  ┌───────────┐  ┌───────────┐        │
│ │   Small   │  │  Medium   │  │   Large   │ Size   │
│ └───────────┘  └───────────┘  └───────────┘        │
│                                                      │
│ ┌───────────┐  ┌───────────┐  ┌───────────┐        │
│ │  Default  │  │   Hover   │  │ Disabled  │ State  │
│ └───────────┘  └───────────┘  └───────────┘        │
└─────────────────────────────────────────────────────┘

Step 3: Zdefiniuj właściwości każdego wariantu
W Design Panel ustaw:
- Size=Small, Style=Primary, State=Default
- Size=Medium, Style=Secondary, State=Hover
- etc.

Button Component Properties:
│
├── Text Property: "label"
│   └── Pozwala edytować tekst instancji
│
├── Boolean Property: "showIcon"
│   └── Pokaż/ukryj ikonę
│
├── Instance Swap Property: "icon"
│   └── Zamień ikonę na inną z biblioteki
│
└── Variant Property: "size", "style", "state"
    └── Wybierz wariant z listy

Użycie w instancji:
┌─────────────────────────────────────┐
│ Properties Panel                     │
│                                      │
│ label: "Submit"        [text field]  │
│ showIcon: ☑️           [checkbox]    │
│ icon: [arrow-right]    [dropdown]    │
│ size: Medium           [dropdown]    │
│ style: Primary         [dropdown]    │
│ state: Default         [dropdown]    │
└─────────────────────────────────────┘

Colors (definiuj w Local Styles):
│
├── Primary
│   ├── primary-500: #6366F1 (główny)
│   ├── primary-600: #4F46E5 (hover)
│   ├── primary-400: #818CF8 (light)
│   └── primary-50: #EEF2FF (background)
│
├── Neutral
│   ├── gray-900: #111827 (text)
│   ├── gray-500: #6B7280 (secondary)
│   ├── gray-200: #E5E7EB (border)
│   └── gray-50: #F9FAFB (background)
│
├── Semantic
│   ├── success: #10B981
│   ├── warning: #F59E0B
│   ├── error: #EF4444
│   └── info: #3B82F6
│
└── Surface
    ├── background: #FFFFFF
    ├── surface: #F9FAFB
    └── overlay: rgba(0,0,0,0.5)

Typography (definiuj w Local Styles):
│
├── Display
│   ├── display-2xl: 72px/90px, Bold
│   └── display-xl: 60px/72px, Bold
│
├── Headings
│   ├── heading-1: 48px/60px, Semibold
│   ├── heading-2: 36px/44px, Semibold
│   ├── heading-3: 30px/38px, Semibold
│   └── heading-4: 24px/32px, Semibold
│
├── Body
│   ├── body-lg: 18px/28px, Regular
│   ├── body-md: 16px/24px, Regular
│   └── body-sm: 14px/20px, Regular
│
├── Labels
│   ├── label-lg: 14px/20px, Medium
│   ├── label-md: 12px/16px, Medium
│   └── label-sm: 11px/16px, Medium
│
└── Code
    └── code-md: 14px/20px, Mono, Regular

Effects (shadows, blurs):
│
├── Shadows
│   ├── shadow-sm: 0 1px 2px rgba(0,0,0,0.05)
│   ├── shadow-md: 0 4px 6px rgba(0,0,0,0.1)
│   ├── shadow-lg: 0 10px 15px rgba(0,0,0,0.1)
│   └── shadow-xl: 0 20px 25px rgba(0,0,0,0.15)
│
└── Blurs
    ├── blur-sm: 4px
    ├── blur-md: 8px
    └── blur-lg: 16px

Variables Collections:
│
├── Primitives (raw values)
│   ├── blue-500: #6366F1
│   ├── gray-900: #111827
│   └── spacing-4: 16px
│
└── Semantic (aliases)
    ├── color-primary: {blue-500}
    ├── color-text: {gray-900}
    └── spacing-md: {spacing-4}

Modes:
├── Light Mode
│   └── color-background: #FFFFFF
│
└── Dark Mode
    └── color-background: #1F2937

1. Kliknij przełącznik "<>" w prawym górnym rogu
2. Lub użyj Shift + D
3. Interfejs zmieni się na widok developerski

/* Figma automatycznie generuje CSS */
.button {
  display: flex;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;

  border-radius: 8px;
  background: #6366F1;

  /* Typography */
  color: #FFF;
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

CSS:
.element {
  width: 200px;
  height: 48px;
  background: #6366F1;
  border-radius: 8px;
}

iOS (SwiftUI):
Rectangle()
  .frame(width: 200, height: 48)
  .background(Color(hex: "6366F1"))
  .cornerRadius(8)

Android (Compose):
Box(
  modifier = Modifier
    .size(width = 200.dp, height = 48.dp)
    .background(Color(0xFF6366F1))
    .clip(RoundedCornerShape(8.dp))
)

W Dev Mode:
- Najedź na element → pokaże wymiary
- Najedź między elementami → pokaże spacing
- Alt + hover → szczegółowe pomiary

// Figma może generować snippets dla frameworków

// React + Tailwind:
<button className="flex items-center gap-2 px-6 py-3
  bg-indigo-500 hover:bg-indigo-600
  text-white font-medium rounded-lg">
  <IconPlus className="w-4 h-4" />
  Add item
</button>

// React + styled-components:
const Button = styled.button`
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #6366F1;
  color: white;
  font-weight: 500;
  border-radius: 8px;

  &:hover {
    background: #4F46E5;
  }
`;

Figma for VS Code:
1. Zainstaluj rozszerzenie "Figma for VS Code"
2. Połącz z kontem Figma
3. Przeglądaj pliki Figma bezpośrednio w VS Code
4. Kopiuj wartości bez przełączania okien
5. Generuj kod z designów

1. Przejdź do trybu Prototype (prawy panel)
2. Zaznacz element źródłowy (np. Button)
3. Przeciągnij connector do frame docelowego
4. Skonfiguruj interakcję

Interaction:
├── Trigger: On click / On hover / On drag / While pressing
├── Action: Navigate to / Open overlay / Swap variant / Scroll to
└── Animation: Instant / Dissolve / Move in / Push / Slide

Smart Animate automatycznie animuje różnice między frames:

Frame 1: Card (collapsed)
├── Thumbnail (100x100)
├── Title
└── Height: 150px

Frame 2: Card (expanded)
├── Thumbnail (100x100)
├── Title
├── Description
├── Actions
└── Height: 300px

Smart Animate interpoluje:
- Height: 150px → 300px
- Opacity nowych elementów: 0 → 1
- Pozycje elementów

Button Component (with interactions):
│
├── Default State
│   └── On hover → Hover State (Smart Animate)
│
├── Hover State
│   ├── On mouse leave → Default State
│   └── On click → Pressed State
│
├── Pressed State
│   └── After delay (100ms) → Default State
│
└── Disabled State
    └── No interactions

Scrollable Frame:
├── Width: 375px (fixed)
├── Height: 667px (fixed)
├── Overflow: Scroll vertically
│
└── Content Frame
    ├── Width: Fill container
    ├── Height: Hug (1500px of content)
    └── Auto Layout: Vertical

Modal Overlay:
│
├── Trigger Frame (Button "Open Modal")
│   └── On click → Open overlay
│
├── Overlay (Modal Frame)
│   ├── Position: Center
│   ├── Background: #000 50% opacity
│   └── Close on clicking outside: ✅
│
└── Close Button
    └── On click → Close overlay

1. Brainstorming
   - Sticky notes z pomysłami
   - Głosowanie (stamps)
   - Grupowanie i kategoryzacja

2. User Flow Diagrams
   - Shapes (circles, rectangles)
   - Connectors (arrows)
   - Swimlanes

3. Planning
   - Kanban boards
   - Timelines
   - Mind maps

4. Retrospektywy
   - What went well / What to improve
   - Action items
   - Team discussions

Available templates:
├── Brainstorming
│   ├── Mind Map
│   ├── Affinity Diagram
│   └── Crazy 8s
│
├── Meetings
│   ├── Daily Standup
│   ├── Sprint Retrospective
│   └── Team Sync
│
├── Strategy
│   ├── SWOT Analysis
│   ├── Business Model Canvas
│   └── User Journey Map
│
└── Agile
    ├── Sprint Planning
    ├── Kanban Board
    └── Story Mapping

Design:
├── Iconify - miliony ikon (Material, Feather, etc.)
├── Unsplash - darmowe zdjęcia stockowe
├── Remove BG - usuwanie tła ze zdjęć
├── Blush - ilustracje customizable
└── Content Reel - avatary, nazwy, lorem ipsum

Development:
├── Figma to Code - eksport do React/Vue/HTML
├── Tailwind CSS - klasy Tailwind z designów
├── Anima - eksport do React/Vue z interakcjami
└── Storybook Connect - sync z Storybook

Productivity:
├── Autoflow - automatyczne flow diagrams
├── Similayer - znajdź podobne warstwy
├── Rename It - batch renaming layers
└── Instance Finder - znajdź użycia komponentów

Accessibility:
├── Stark - kontrast, color blindness check
├── A11y - accessibility annotations
└── Color Blind - symulacja ślepoty barw

1. Menu → Plugins → Browse plugins in Community
2. Wyszukaj plugin
3. Kliknij "Install"
4. Użyj przez Menu → Plugins → [Nazwa]
   lub Ctrl/Cmd + / (Quick Actions)

// Figma REST API - dostęp do plików i komentarzy

// Pobierz plik Figma
const response = await fetch(
  `https://api.figma.com/v1/files/${fileKey}`,
  {
    headers: {
      'X-Figma-Token': process.env.FIGMA_TOKEN
    }
  }
);

const file = await response.json();
console.log(file.name);
console.log(file.document.children); // Pages

// Pobierz obrazy z pliku
const imagesResponse = await fetch(
  `https://api.figma.com/v1/images/${fileKey}?ids=${nodeIds}&format=png&scale=2`,
  {
    headers: {
      'X-Figma-Token': process.env.FIGMA_TOKEN
    }
  }
);

const images = await imagesResponse.json();
// images.images = { nodeId: imageUrl, ... }

// figma-plugin/code.ts

// Główny kod pluginu
figma.showUI(__html__, { width: 300, height: 400 });

// Nasłuchuj wiadomości z UI
figma.ui.onmessage = async (msg) => {
  if (msg.type === 'create-rectangle') {
    const rect = figma.createRectangle();
    rect.x = 0;
    rect.y = 0;
    rect.resize(msg.width, msg.height);
    rect.fills = [{ type: 'SOLID', color: { r: 1, g: 0.5, b: 0 } }];

    figma.currentPage.appendChild(rect);
    figma.currentPage.selection = [rect];
    figma.viewport.scrollAndZoomIntoView([rect]);
  }

  figma.closePlugin();
};

// UI pluginu (ui.html)
// <script>
//   document.getElementById('create').onclick = () => {
//     parent.postMessage({
//       pluginMessage: { type: 'create-rectangle', width: 100, height: 100 }
//     }, '*');
//   };
// </script>

Design System Library:
│
├── 📁 Foundations
│   ├── Colors (variables)
│   ├── Typography (text styles)
│   ├── Spacing (variables)
│   ├── Shadows (effect styles)
│   └── Iconography
│
├── 📁 Primitives
│   ├── Button
│   ├── Input
│   ├── Checkbox
│   ├── Radio
│   ├── Select
│   ├── Toggle
│   └── Badge
│
├── 📁 Components
│   ├── Card
│   ├── Modal
│   ├── Dropdown
│   ├── Tabs
│   ├── Toast
│   └── Tooltip
│
├── 📁 Patterns
│   ├── Navigation
│   ├── Forms
│   ├── Tables
│   ├── Empty States
│   └── Error States
│
└── 📁 Templates
    ├── Dashboard
    ├── Settings
    ├── Profile
    └── Landing Page

1. Team Library:
   - File → Publish Library
   - Wybierz komponenty do publikacji
   - Dodaj opisy i przykłady

2. Używanie biblioteki:
   - Assets panel → Team library
   - Przeciągnij komponenty na canvas
   - Aktualizacje automatyczne

3. Wersjonowanie:
   - Publikuj z opisem zmian
   - Użytkownicy widzą "Updates available"
   - Mogą preview i accept changes

Component Page struktura:
│
├── Title & Description
│   └── Co robi komponent
│
├── Anatomy
│   └── Diagram części składowych
│
├── Variants Showcase
│   └── Wszystkie warianty obok siebie
│
├── Usage Guidelines
│   ├── ✅ Do (dobre przykłady)
│   └── ❌ Don't (złe przykłady)
│
├── Properties Reference
│   └── Tabela wszystkich właściwości
│
└── Related Components
    └── Linki do powiązanych

1. Editor (Full Access):
   - Może edytować wszystko
   - Może publikować zmiany
   - Może zarządzać członkami

2. Viewer (Can View):
   - Może oglądać i komentować
   - Może kopiować elementy
   - Nie może edytować

3. Viewer-Restricted:
   - Tylko oglądanie
   - Bez kopiowania
   - Bez eksportu

Komentarze:
- Kliknij C lub ikonę komentarza
- Kliknij w miejsce na canvas
- Napisz komentarz
- @mention członków zespołu

Organizacja:
- Resolved/Unresolved
- Filter by author
- Filter by date
- Export comments

Main File (source of truth)
│
├── Branch: Feature A
│   └── Eksperymentalne zmiany
│
├── Branch: Feature B
│   └── Nowy design
│
└── Merge back to Main
    └── Po review i aprobacie

1. File → Show Version History
2. Przeglądaj poprzednie wersje
3. Nazwij ważne wersje (milestones)
4. Przywróć poprzednią wersję
5. Duplikuj wersję jako nowy plik

Checklist przed handoff:
□ Wszystkie elementy są w komponentach
□ Używasz Auto Layout
□ Kolory są w stylach/variables
□ Typografia w stylach
□ Nazwy warstw są sensowne
□ Variants pokrywają wszystkie stany
□ Spacing jest konsystentny
□ Assets są wyeksportowane (1x, 2x, 3x)
□ Prototyp działa
□ Dev Mode jest włączony

Eksport ustawienia:
├── Format: PNG / SVG / JPG / PDF
├── Scale: 1x, 2x, 3x (dla retina)
├── Suffix: @2x, @3x
└── Include "id" attribute (SVG)

Bulk export:
1. Zaznacz warstwy
2. Użyj Slice tool lub Export settings
3. Export selection (Ctrl/Cmd + Shift + E)

SVG dla ikon:
- Outline strokes przed exportem
- Flatten groups
- Remove unnecessary groups

Properties:
├── Layout (x, y, width, height)
├── Fill (colors, gradients)
├── Stroke (border)
├── Effects (shadows, blur)
└── Typography (font, size, weight)

Code:
├── CSS
├── iOS (Swift)
└── Android (XML)

Assets:
├── Export button
└── Format selection

Project Structure:
│
├── 📄 Cover
│   └── Thumbnail dla pliku
│
├── 📄 Index / TOC
│   └── Linki do wszystkich stron
│
├── 📄 Foundations
│   └── Colors, Typography, Spacing
│
├── 📄 Components
│   └── Wszystkie komponenty z dokumentacją
│
├── 📄 Feature A
│   ├── Wireframes
│   ├── High-fidelity
│   └── Prototypes
│
├── 📄 Feature B
│   └── ...
│
└── 📄 Archive
    └── Stare wersje

Layers:
├── Frames: PascalCase (Card, NavBar, Modal)
├── Components: PascalCase (Button, Input)
├── Variants: property=value (Size=Large)
└── Instances: lowercase (icon, label)

Pages:
├── 📄 Cover
├── 📄 🎨 Design System
├── 📄 📱 Mobile App
├── 📄 💻 Web App
└── 📄 📦 Archive

Groups/Sections:
├── Header
├── Hero
├── Features
├── Testimonials
└── Footer

Optymalizacja dla dużych plików:
│
├── Limit components na stronę
├── Unikaj ogromnych bitmap
├── Używaj vector gdzie możliwe
├── Archiwizuj stare wersje
├── Podziel duże projekty na pliki
└── Używaj External Libraries

Free:
├── Cena: $0
├── 3 projekty Figma
├── 3 projekty FigJam
├── Unlimited viewers
├── 30-day version history
└── Mobile app

Professional:
├── Cena: $15/editor/miesiąc (rozliczenie roczne)
├── Unlimited projekty
├── Unlimited version history
├── Shared libraries
├── Dev Mode
├── Private projects
└── Advanced prototyping

Organization:
├── Cena: $45/editor/miesiąc
├── Wszystko z Professional
├── Design System Analytics
├── Centralized libraries
├── SSO
├── Private plugins
└── Org-wide libraries

Enterprise:
├── Cena: Custom
├── Wszystko z Organization
├── Dedicated support
├── Advanced security
├── Guest access controls
└── REST API

┌─────────────────────────────────────────────────────────────────┐
│ Toolbar (tools)                                                  │
├──────────┬─────────────────────────────────────────┬────────────┤
│          │                                         │            │
│  Layers  │              Canvas                     │  Design    │
│  Panel   │         (working area)                  │  Panel     │
│          │                                         │            │
│  - Pages │    ┌─────────────────────────┐         │  - Fill    │
│  - Frames│    │                         │         │  - Stroke  │
│  - Groups│    │       Your design       │         │  - Effects │
│  - Shapes│    │                         │         │  - Layout  │
│          │    └─────────────────────────┘         │            │
│          │                                         │            │
├──────────┴─────────────────────────────────────────┴────────────┤
│ Assets / Plugins / Libraries                                     │
└─────────────────────────────────────────────────────────────────┘

Frame = Artboard + Auto Layout + Constraints
- Can have specific dimensions (Desktop: 1440px, Mobile: 390px)
- Can be responsive with Auto Layout
- Can clip its contents

Groups (Ctrl/Cmd + G):
- Simple grouping
- No properties of their own
- Good for organization

Frames (Ctrl/Cmd + Alt + G):
- Container with its own properties
- Auto Layout
- Constraints
- Clipping
- Use whenever possible

NAVIGATION:
Space + drag     - Pan canvas
Ctrl/Cmd + +/-   - Zoom in/out
Shift + 1        - Zoom to fit
Shift + 2        - Zoom to selection
Ctrl/Cmd + \     - Toggle UI

SELECTION:
Ctrl/Cmd + A     - Select all
Ctrl/Cmd + click - Deep select
Hold Alt + hover - Measure distances

EDITING:
Ctrl/Cmd + D     - Duplicate
Ctrl/Cmd + G     - Group
Ctrl/Cmd + Alt+G - Frame selection
Ctrl/Cmd + R     - Rename
Ctrl/Cmd + [/]   - Send backward/forward

ALIGNMENT:
Alt + A          - Align left
Alt + D          - Align right
Alt + W          - Align top
Alt + S          - Align bottom
Alt + H          - Align center horizontal
Alt + V          - Align center vertical

COMPONENTS:
Ctrl/Cmd + Alt+K - Create component
Ctrl/Cmd + Alt+B - Detach instance

┌────────────────────────────────────────────────────────┐
│  Auto Layout Frame                                      │
│  ┌──────┐  ┌──────┐  ┌──────┐  ┌──────┐               │
│  │ Item │  │ Item │  │ Item │  │ Item │               │
│  │  1   │  │  2   │  │  3   │  │  4   │               │
│  └──────┘  └──────┘  └──────┘  └──────┘               │
│                                                         │
│  Direction: Horizontal (→)                             │
│  Gap: 16px                                             │
│  Padding: 24px                                         │
│  Alignment: Center                                     │
└────────────────────────────────────────────────────────┘

DIRECTION:
- Horizontal (→) - elements side by side
- Vertical (↓) - elements stacked
- Wrap - wrapping (like flex-wrap)

GAP (spacing between elements):
- Fixed gap: 16px - constant spacing
- Auto: space-between behavior

PADDING (internal margins):
- Uniform: 16px all sides
- Independent: 16px 24px 16px 24px (T R B L)

ALIGNMENT:
- Primary axis (main): start/center/end/space-between
- Counter axis (cross): start/center/end/baseline

SIZING:
- Fixed: 200px - fixed width
- Hug: fit to contents
- Fill: fill available space

Button (Auto Layout Frame):
├── Direction: Horizontal
├── Gap: 8px
├── Padding: 12px 24px
├── Alignment: Center/Center
│
├── Icon (16x16)
│   └── Fill container: ❌
│   └── Fixed size: ✅
│
└── Label ("Click me")
    └── Hug contents: ✅

Result: A button that automatically grows/shrinks
with its content, maintaining padding and gap.

Card Frame (Vertical Auto Layout):
├── Padding: 24px
├── Gap: 16px
│
├── Header (Horizontal Auto Layout)
│   ├── Title (Fill) - stretches
│   └── Badge (Hug) - fixed size
│
├── Content (Text, Hug)
│
└── Actions (Horizontal Auto Layout, Space Between)
    ├── Secondary Button (Hug)
    └── Primary Button (Hug)

Navbar (Horizontal Auto Layout):
├── Padding: 0 24px
├── Min Width: Fill container
│
├── Logo (Fixed 120px)
│
├── Nav Links (Horizontal, Fill)
│   ├── Gap: 32px
│   ├── Alignment: Center
│   └── Links: Home, Products, About, Contact
│
└── CTA Button (Hug)

Constraints (use when):
- Elements have absolute positioning
- Floating buttons, overlays
- Background images

Auto Layout (use when):
- List of elements
- Forms
- Cards
- Buttons
- UI components

Combination:
Frame with Constraints
└── Auto Layout for content
    └── Items with Fill/Hug

1. Design an element (e.g. Button)
2. Select the frame
3. Ctrl/Cmd + Alt + K (Create Component)
4. The component will appear in the Assets panel

Main Component (with 4-diamond icon):
└── Source of truth - editing affects all instances

Instance (with 1-diamond icon):
└── A copy of the component - you can override properties

Button Component
│
├── Variant: Size
│   ├── Small (height: 32px, padding: 8px 16px)
│   ├── Medium (height: 40px, padding: 12px 24px)
│   └── Large (height: 48px, padding: 16px 32px)
│
├── Variant: Style
│   ├── Primary (bg: blue, text: white)
│   ├── Secondary (bg: gray, text: dark)
│   └── Ghost (bg: transparent, border: gray)
│
└── Variant: State
    ├── Default
    ├── Hover
    ├── Pressed
    ├── Disabled
    └── Loading

Step 1: Create the base button
┌─────────────────────────┐
│      Click me           │ ← Main Component
└─────────────────────────┘

Step 2: Add variants (Component → Add variant)
┌─────────────────────────────────────────────────────┐
│ Button Component Set                                 │
│                                                      │
│ ┌───────────┐  ┌───────────┐  ┌───────────┐        │
│ │  Primary  │  │ Secondary │  │   Ghost   │ Style  │
│ └───────────┘  └───────────┘  └───────────┘        │
│                                                      │
│ ┌───────────┐  ┌───────────┐  ┌───────────┐        │
│ │   Small   │  │  Medium   │  │   Large   │ Size   │
│ └───────────┘  └───────────┘  └───────────┘        │
│                                                      │
│ ┌───────────┐  ┌───────────┐  ┌───────────┐        │
│ │  Default  │  │   Hover   │  │ Disabled  │ State  │
│ └───────────┘  └───────────┘  └───────────┘        │
└─────────────────────────────────────────────────────┘

Step 3: Define the properties of each variant
In the Design Panel set:
- Size=Small, Style=Primary, State=Default
- Size=Medium, Style=Secondary, State=Hover
- etc.

Button Component Properties:
│
├── Text Property: "label"
│   └── Allows editing the instance text
│
├── Boolean Property: "showIcon"
│   └── Show/hide the icon
│
├── Instance Swap Property: "icon"
│   └── Swap the icon for another from the library
│
└── Variant Property: "size", "style", "state"
    └── Choose a variant from the list

Usage in an instance:
┌─────────────────────────────────────┐
│ Properties Panel                     │
│                                      │
│ label: "Submit"        [text field]  │
│ showIcon: ☑️           [checkbox]    │
│ icon: [arrow-right]    [dropdown]    │
│ size: Medium           [dropdown]    │
│ style: Primary         [dropdown]    │
│ state: Default         [dropdown]    │
└─────────────────────────────────────┘

Colors (define in Local Styles):
│
├── Primary
│   ├── primary-500: #6366F1 (main)
│   ├── primary-600: #4F46E5 (hover)
│   ├── primary-400: #818CF8 (light)
│   └── primary-50: #EEF2FF (background)
│
├── Neutral
│   ├── gray-900: #111827 (text)
│   ├── gray-500: #6B7280 (secondary)
│   ├── gray-200: #E5E7EB (border)
│   └── gray-50: #F9FAFB (background)
│
├── Semantic
│   ├── success: #10B981
│   ├── warning: #F59E0B
│   ├── error: #EF4444
│   └── info: #3B82F6
│
└── Surface
    ├── background: #FFFFFF
    ├── surface: #F9FAFB
    └── overlay: rgba(0,0,0,0.5)

Typography (define in Local Styles):
│
├── Display
│   ├── display-2xl: 72px/90px, Bold
│   └── display-xl: 60px/72px, Bold
│
├── Headings
│   ├── heading-1: 48px/60px, Semibold
│   ├── heading-2: 36px/44px, Semibold
│   ├── heading-3: 30px/38px, Semibold
│   └── heading-4: 24px/32px, Semibold
│
├── Body
│   ├── body-lg: 18px/28px, Regular
│   ├── body-md: 16px/24px, Regular
│   └── body-sm: 14px/20px, Regular
│
├── Labels
│   ├── label-lg: 14px/20px, Medium
│   ├── label-md: 12px/16px, Medium
│   └── label-sm: 11px/16px, Medium
│
└── Code
    └── code-md: 14px/20px, Mono, Regular

Effects (shadows, blurs):
│
├── Shadows
│   ├── shadow-sm: 0 1px 2px rgba(0,0,0,0.05)
│   ├── shadow-md: 0 4px 6px rgba(0,0,0,0.1)
│   ├── shadow-lg: 0 10px 15px rgba(0,0,0,0.1)
│   └── shadow-xl: 0 20px 25px rgba(0,0,0,0.15)
│
└── Blurs
    ├── blur-sm: 4px
    ├── blur-md: 8px
    └── blur-lg: 16px

Variables Collections:
│
├── Primitives (raw values)
│   ├── blue-500: #6366F1
│   ├── gray-900: #111827
│   └── spacing-4: 16px
│
└── Semantic (aliases)
    ├── color-primary: {blue-500}
    ├── color-text: {gray-900}
    └── spacing-md: {spacing-4}

Modes:
├── Light Mode
│   └── color-background: #FFFFFF
│
└── Dark Mode
    └── color-background: #1F2937

1. Click the "<>" toggle in the top-right corner
2. Or use Shift + D
3. The interface will switch to the developer view

/* Figma automatically generates CSS */
.button {
  display: flex;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;

  border-radius: 8px;
  background: #6366F1;

  /* Typography */
  color: #FFF;
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

CSS:
.element {
  width: 200px;
  height: 48px;
  background: #6366F1;
  border-radius: 8px;
}

iOS (SwiftUI):
Rectangle()
  .frame(width: 200, height: 48)
  .background(Color(hex: "6366F1"))
  .cornerRadius(8)

Android (Compose):
Box(
  modifier = Modifier
    .size(width = 200.dp, height = 48.dp)
    .background(Color(0xFF6366F1))
    .clip(RoundedCornerShape(8.dp))
)

In Dev Mode:
- Hover over an element → shows dimensions
- Hover between elements → shows spacing
- Alt + hover → detailed measurements

// Figma can generate snippets for frameworks

// React + Tailwind:
<button className="flex items-center gap-2 px-6 py-3
  bg-indigo-500 hover:bg-indigo-600
  text-white font-medium rounded-lg">
  <IconPlus className="w-4 h-4" />
  Add item
</button>

// React + styled-components:
const Button = styled.button`
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #6366F1;
  color: white;
  font-weight: 500;
  border-radius: 8px;

  &:hover {
    background: #4F46E5;
  }
`;

Figma for VS Code:
1. Install the "Figma for VS Code" extension
2. Connect to your Figma account
3. Browse Figma files directly in VS Code
4. Copy values without switching windows
5. Generate code from designs

1. Switch to the Prototype tab (right panel)
2. Select the source element (e.g. Button)
3. Drag the connector to the target frame
4. Configure the interaction

Interaction:
├── Trigger: On click / On hover / On drag / While pressing
├── Action: Navigate to / Open overlay / Swap variant / Scroll to
└── Animation: Instant / Dissolve / Move in / Push / Slide

Smart Animate automatically animates differences between frames:

Frame 1: Card (collapsed)
├── Thumbnail (100x100)
├── Title
└── Height: 150px

Frame 2: Card (expanded)
├── Thumbnail (100x100)
├── Title
├── Description
├── Actions
└── Height: 300px

Smart Animate interpolates:
- Height: 150px → 300px
- Opacity of new elements: 0 → 1
- Element positions

Button Component (with interactions):
│
├── Default State
│   └── On hover → Hover State (Smart Animate)
│
├── Hover State
│   ├── On mouse leave → Default State
│   └── On click → Pressed State
│
├── Pressed State
│   └── After delay (100ms) → Default State
│
└── Disabled State
    └── No interactions

Scrollable Frame:
├── Width: 375px (fixed)
├── Height: 667px (fixed)
├── Overflow: Scroll vertically
│
└── Content Frame
    ├── Width: Fill container
    ├── Height: Hug (1500px of content)
    └── Auto Layout: Vertical

Modal Overlay:
│
├── Trigger Frame (Button "Open Modal")
│   └── On click → Open overlay
│
├── Overlay (Modal Frame)
│   ├── Position: Center
│   ├── Background: #000 50% opacity
│   └── Close on clicking outside: ✅
│
└── Close Button
    └── On click → Close overlay

1. Brainstorming
   - Sticky notes with ideas
   - Voting (stamps)
   - Grouping and categorization

2. User Flow Diagrams
   - Shapes (circles, rectangles)
   - Connectors (arrows)
   - Swimlanes

3. Planning
   - Kanban boards
   - Timelines
   - Mind maps

4. Retrospectives
   - What went well / What to improve
   - Action items
   - Team discussions

Available templates:
├── Brainstorming
│   ├── Mind Map
│   ├── Affinity Diagram
│   └── Crazy 8s
│
├── Meetings
│   ├── Daily Standup
│   ├── Sprint Retrospective
│   └── Team Sync
│
├── Strategy
│   ├── SWOT Analysis
│   ├── Business Model Canvas
│   └── User Journey Map
│
└── Agile
    ├── Sprint Planning
    ├── Kanban Board
    └── Story Mapping

Design:
├── Iconify - millions of icons (Material, Feather, etc.)
├── Unsplash - free stock photos
├── Remove BG - remove backgrounds from photos
├── Blush - customizable illustrations
└── Content Reel - avatars, names, lorem ipsum

Development:
├── Figma to Code - export to React/Vue/HTML
├── Tailwind CSS - Tailwind classes from designs
├── Anima - export to React/Vue with interactions
└── Storybook Connect - sync with Storybook

Productivity:
├── Autoflow - automatic flow diagrams
├── Similayer - find similar layers
├── Rename It - batch renaming layers
└── Instance Finder - find component usage

Accessibility:
├── Stark - contrast, color blindness check
├── A11y - accessibility annotations
└── Color Blind - color blindness simulation

1. Menu → Plugins → Browse plugins in Community
2. Search for a plugin
3. Click "Install"
4. Use via Menu → Plugins → [Name]
   or Ctrl/Cmd + / (Quick Actions)

// Figma REST API - access files and comments

// Fetch a Figma file
const response = await fetch(
  `https://api.figma.com/v1/files/${fileKey}`,
  {
    headers: {
      'X-Figma-Token': process.env.FIGMA_TOKEN
    }
  }
);

const file = await response.json();
console.log(file.name);
console.log(file.document.children); // Pages

// Fetch images from a file
const imagesResponse = await fetch(
  `https://api.figma.com/v1/images/${fileKey}?ids=${nodeIds}&format=png&scale=2`,
  {
    headers: {
      'X-Figma-Token': process.env.FIGMA_TOKEN
    }
  }
);

const images = await imagesResponse.json();
// images.images = { nodeId: imageUrl, ... }

// figma-plugin/code.ts

// Main plugin code
figma.showUI(__html__, { width: 300, height: 400 });

// Listen for messages from UI
figma.ui.onmessage = async (msg) => {
  if (msg.type === 'create-rectangle') {
    const rect = figma.createRectangle();
    rect.x = 0;
    rect.y = 0;
    rect.resize(msg.width, msg.height);
    rect.fills = [{ type: 'SOLID', color: { r: 1, g: 0.5, b: 0 } }];

    figma.currentPage.appendChild(rect);
    figma.currentPage.selection = [rect];
    figma.viewport.scrollAndZoomIntoView([rect]);
  }

  figma.closePlugin();
};

// Plugin UI (ui.html)
// <script>
//   document.getElementById('create').onclick = () => {
//     parent.postMessage({
//       pluginMessage: { type: 'create-rectangle', width: 100, height: 100 }
//     }, '*');
//   };
// </script>

Design System Library:
│
├── 📁 Foundations
│   ├── Colors (variables)
│   ├── Typography (text styles)
│   ├── Spacing (variables)
│   ├── Shadows (effect styles)
│   └── Iconography
│
├── 📁 Primitives
│   ├── Button
│   ├── Input
│   ├── Checkbox
│   ├── Radio
│   ├── Select
│   ├── Toggle
│   └── Badge
│
├── 📁 Components
│   ├── Card
│   ├── Modal
│   ├── Dropdown
│   ├── Tabs
│   ├── Toast
│   └── Tooltip
│
├── 📁 Patterns
│   ├── Navigation
│   ├── Forms
│   ├── Tables
│   ├── Empty States
│   └── Error States
│
└── 📁 Templates
    ├── Dashboard
    ├── Settings
    ├── Profile
    └── Landing Page

1. Team Library:
   - File → Publish Library
   - Choose components to publish
   - Add descriptions and examples

2. Using the library:
   - Assets panel → Team library
   - Drag components onto the canvas
   - Automatic updates

3. Versioning:
   - Publish with a change description
   - Users see "Updates available"
   - They can preview and accept changes

Component Page structure:
│
├── Title & Description
│   └── What the component does
│
├── Anatomy
│   └── Diagram of constituent parts
│
├── Variants Showcase
│   └── All variants side by side
│
├── Usage Guidelines
│   ├── ✅ Do (good examples)
│   └── ❌ Don't (bad examples)
│
├── Properties Reference
│   └── Table of all properties
│
└── Related Components
    └── Links to related ones

1. Editor (Full Access):
   - Can edit everything
   - Can publish changes
   - Can manage members

2. Viewer (Can View):
   - Can view and comment
   - Can copy elements
   - Cannot edit

3. Viewer-Restricted:
   - Viewing only
   - No copying
   - No exporting

Comments:
- Click C or the comment icon
- Click a spot on the canvas
- Write your comment
- @mention team members

Organization:
- Resolved/Unresolved
- Filter by author
- Filter by date
- Export comments

Main File (source of truth)
│
├── Branch: Feature A
│   └── Experimental changes
│
├── Branch: Feature B
│   └── New design
│
└── Merge back to Main
    └── After review and approval

1. File → Show Version History
2. Browse previous versions
3. Name important versions (milestones)
4. Restore a previous version
5. Duplicate a version as a new file

Handoff checklist:
□ All elements are in components
□ You are using Auto Layout
□ Colors are in styles/variables
□ Typography is in styles
□ Layer names are meaningful
□ Variants cover all states
□ Spacing is consistent
□ Assets are exported (1x, 2x, 3x)
□ The prototype works
□ Dev Mode is enabled

Export settings:
├── Format: PNG / SVG / JPG / PDF
├── Scale: 1x, 2x, 3x (for retina)
├── Suffix: @2x, @3x
└── Include "id" attribute (SVG)

Bulk export:
1. Select layers
2. Use the Slice tool or Export settings
3. Export selection (Ctrl/Cmd + Shift + E)

SVG for icons:
- Outline strokes before export
- Flatten groups
- Remove unnecessary groups

Properties:
├── Layout (x, y, width, height)
├── Fill (colors, gradients)
├── Stroke (border)
├── Effects (shadows, blur)
└── Typography (font, size, weight)

Code:
├── CSS
├── iOS (Swift)
└── Android (XML)

Assets:
├── Export button
└── Format selection

Project Structure:
│
├── 📄 Cover
│   └── Thumbnail for the file
│
├── 📄 Index / TOC
│   └── Links to all pages
│
├── 📄 Foundations
│   └── Colors, Typography, Spacing
│
├── 📄 Components
│   └── All components with documentation
│
├── 📄 Feature A
│   ├── Wireframes
│   ├── High-fidelity
│   └── Prototypes
│
├── 📄 Feature B
│   └── ...
│
└── 📄 Archive
    └── Old versions

Layers:
├── Frames: PascalCase (Card, NavBar, Modal)
├── Components: PascalCase (Button, Input)
├── Variants: property=value (Size=Large)
└── Instances: lowercase (icon, label)

Pages:
├── 📄 Cover
├── 📄 🎨 Design System
├── 📄 📱 Mobile App
├── 📄 💻 Web App
└── 📄 📦 Archive

Groups/Sections:
├── Header
├── Hero
├── Features
├── Testimonials
└── Footer

Optimization for large files:
│
├── Limit components per page
├── Avoid huge bitmaps
├── Use vectors where possible
├── Archive old versions
├── Split large projects into files
└── Use External Libraries

Free:
├── Price: $0
├── 3 Figma projects
├── 3 FigJam projects
├── Unlimited viewers
├── 30-day version history
└── Mobile app

Professional:
├── Price: $15/editor/month (billed annually)
├── Unlimited projects
├── Unlimited version history
├── Shared libraries
├── Dev Mode
├── Private projects
└── Advanced prototyping

Organization:
├── Price: $45/editor/month
├── Everything in Professional
├── Design System Analytics
├── Centralized libraries
├── SSO
├── Private plugins
└── Org-wide libraries

Enterprise:
├── Price: Custom
├── Everything in Organization
├── Dedicated support
├── Advanced security
├── Guest access controls
└── REST API