design/figma
Figma: Kolaboracyjne płótno
„W filozofii Figma chcieliśmy, aby AI było wieloosobowe. Współpraca zawsze była w centrum wszystkiego, co robimy." — Zespół Figma
Figma przekształciła projektowanie z samotnego rzemiosła w sport zespołowy. Jako pierwsze narzędzie projektowe z edycją współpracującą na żywo, Figma udowodniła, że złożone narzędzia kreatywne mogą być tak płynne jak Google Docs — zachowując przy tym precyzję, jakiej wymagają projektanci.
Dlaczego Figma ma znaczenie
Figma nie tylko dodała tryb wieloosobowy do narzędzi projektowych. Przemyślała na nowo, jak przebiega projektowanie. Budując współpracę w fundamentach, Figma zmieniła przepływy pracy, dynamikę zespołów i cały proces od projektu do wdrożenia.
Kluczowe osiągnięcia: - Pierwsze narzędzie projektowe z edycją wieloosobową w czasie rzeczywistym - Pionier paradygmatu „nieskończonego płótna" jako interfejsu użytkownika - Uczyniła systemy projektowe dostępnymi dla każdego zespołu - Połączyła projektowanie i rozwój dzięki Dev Mode - Zbudowała kreatywne imperium warte 20 mld USD na współpracy
Najważniejsze wnioski
- Tryb wieloosobowy wymaga prostoty - Figma zbudowała własne rozwiązanie prostsze niż transformacje operacyjne, ponieważ prostsze systemy są łatwiejsze do debugowania i utrzymania
- Nieskończone płótno zachęca do eksploracji - W przeciwieństwie do narzędzi opartych na stronach, otwarte płótno zachęca do iteracji i zapobiega sztucznym ograniczeniom
- Interfejsy świadome kontekstu zmniejszają obciążenie poznawcze - Paski narzędzi i panele, które dostosowują się do zaznaczenia, pokazują tylko istotne kontrolki
- Tokeny projektowe łączą projekt z kodem - Zmienne z warstwami: prymitywy → semantyczne → komponentowe tworzą wspólny język między projektantami a programistami
- Dev Mode to dedykowana przestrzeń robocza - Oddzielenie narzędzi deweloperskich od narzędzi projektowych respektuje różne modele mentalne i przepływy pracy
Podstawowe zasady projektowania
1. Tryb wieloosobowy jako fundament
Figma zbudowała własne rozwiązanie wieloosobowe, które jest prostsze niż tradycyjne podejścia, takie jak transformacje operacyjne (OT). Ich celem była przejrzystość: system nie powinien być bardziej złożony niż to konieczne.
Filozofia: Ponieważ Figma nie jest edytorem tekstu, nie potrzebowali mocy OT i mogli obejść się czymś mniej skomplikowanym. Prostsze systemy są łatwiejsze do zrozumienia, implementacji, debugowania, testowania i utrzymania.
Wzorce wizualne dla trybu wieloosobowego:
PRESENCE INDICATORS:
┌─────────────────────────────────────────────────────────────────┐
│ Canvas │
│ │
│ ┌──────────────────────────────────────┐ │
│ │ Component: Button │ (o) Alice │
│ │ ┌────────────────────┐ │ <- Live cursor │
│ │ │ Primary Button │ │ │
│ │ └────────────────────┘ │ │
│ └──────────────────────────────────────┘ (*) Bob │
│ <- Selection ring │
│ │
│ ┌──────────────────────────────────────┐ │
│ │ Input Field (+) Carol │ <- Editing mode │
│ │ ┌────────────────────────────────┐ │ │
│ │ │ | │ │ │
│ │ └────────────────────────────────┘ │ │
│ └──────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
CURSOR DESIGN:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ Cursor anatomy: │
│ │
│ ▲ │
│ ╱ ╲ │
│ ╱ ╲ ← Arrow (user's color) │
│ ╱_____╲ │
│ ┌─────────┐ │
│ │ Alice │ ← Name label (appears on hover/activity) │
│ └─────────┘ │
│ │
│ States: │
│ • Idle: Cursor only │
│ • Active: Cursor + name label │
│ • Editing: Cursor + name + "Editing..." badge │
│ • Away: Faded cursor (50% opacity) │
│ │
└─────────────────────────────────────────────────────────────────┘
Zasady implementacji: - Użytkownicy są identyfikowani przez kolor, nie tylko nazwę - Pierścienie zaznaczenia pokazują, kto gdzie pracuje - Ruch kursora jest ograniczany (debounce) dla wydajności - Wskaźniki obecności blakną, gdy użytkownicy są nieaktywni
2. Nieskończone płótno
Płótno Figmy to otwarte, elastyczne środowisko umożliwiające szybką iterację. W przeciwieństwie do narzędzi opartych na stronach, nieskończone płótno zachęca do eksploracji.
Wzorce interakcji z płótnem:
NAVIGATION:
┌─────────────────────────────────────────────────────────────────┐
│ Space + drag Pan the canvas │
│ Scroll Pan vertically │
│ Shift + scroll Pan horizontally │
│ Cmd/Ctrl + +/- Zoom in/out │
│ Cmd/Ctrl + 0 Zoom to 100% │
│ Cmd/Ctrl + 1 Zoom to fit │
│ Cmd/Ctrl + 2 Zoom to selection │
└─────────────────────────────────────────────────────────────────┘
ZOOM LEVELS WITH PURPOSE:
┌─────────────────────────────────────────────────────────────────┐
│ 100%+ Pixel-level detail work │
│ 50-100% Component editing │
│ 25-50% Page/screen level │
│ 10-25% Flow overview │
│ <10% Bird's eye navigation │
│ │
│ UI adapts per zoom: │
│ • Text hides below readability threshold │
│ • Details simplify at distance │
│ • Frame labels always visible │
└─────────────────────────────────────────────────────────────────┘
Wzorzec minimapy:
/* Canvas navigation mini-map */
.minimap {
position: fixed;
bottom: 16px;
right: 16px;
width: 200px;
height: 150px;
background: rgba(0, 0, 0, 0.8);
border-radius: 8px;
overflow: hidden;
}
.minimap-viewport {
/* Current visible area */
border: 2px solid var(--color-primary);
background: rgba(255, 255, 255, 0.1);
cursor: grab;
}
.minimap-content {
/* Simplified render of all frames */
opacity: 0.6;
}
3. Pasek narzędzi jako centrum dowodzenia
Pasek narzędzi Figmy ucieleśnia progresywne ujawnianie: prosty na pierwszy rzut oka, potężny przy eksploracji.
Architektura paska narzędzi:
FIGMA TOOLBAR ANATOMY:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ┌─────┬─────┬─────┬─────┬─────┬─────────────────┬───────────┐ │
│ │ [=] │ [>] │ [R] │ [O] │ [-] │ T (H) [...] │ Share v │ │
│ └──┬──┴──┬──┴──┬──┴──┬──┴──┬──┴────────┬────────┴─────┬─────┘ │
│ │ │ │ │ │ │ │ │
│ Menu Move Frame Shape Line Text/Hand/ Collaboration │
│ tools tools Comment │
│ │
│ FLYOUT PATTERN: │
│ ┌─────┐ │
│ │ [R] │ <- Primary tool (click) │
│ └──┬──┘ │
│ │ ┌─────────────────────────┐ │
│ └──│ [R] Rectangle R │ <- Long-press reveals options │
│ │ [O] Ellipse O │ │
│ │ [^] Polygon │ │
│ │ [*] Star │ │
│ │ [I] Place image Cmd+K │ │
│ └─────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
CONTEXT-AWARE TOOLBAR:
Selection changes toolbar options dynamically:
No selection: [Move] [Frame] [Shape] [Pen] [Text]
Frame selected: [Move] [Frame] [Auto layout ▼] [Grid ▼]
Text selected: [Move] [Font ▼] [Size ▼] [Weight ▼] [Align]
Component selected: [Move] [Variants] [Properties] [Detach]
4. Panel właściwości: Inteligencja kontekstowa
Prawy panel dostosowuje się całkowicie na podstawie zaznaczenia, pokazując tylko istotne kontrolki.
Architektura panelu:
PROPERTIES PANEL STATES:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ NO SELECTION: FRAME SELECTED: │
│ ┌────────────────────┐ ┌────────────────────┐ │
│ │ Design Prototype │ │ Design Prototype │ │
│ ├────────────────────┤ ├────────────────────┤ │
│ │ │ │ Frame │
│ │ Select something │ │ W: 375 H: 812 │ │
│ │ to see properties │ │ X: 100 Y: 200 │ │
│ │ │ ├────────────────────┤ │
│ │ │ │ Auto Layout │ │
│ │ │ │ ═══ ↕ 16 ↔ 24 │ │
│ │ │ ├────────────────────┤ │
│ │ │ │ Fill │ │
│ │ │ │ ■ #FFFFFF 100% │ │
│ │ │ ├────────────────────┤ │
│ │ │ │ Stroke │ │
│ │ │ │ + Add stroke │ │
│ │ │ ├────────────────────┤ │
│ │ │ │ Effects │ │
│ │ │ │ + Add effect │ │
│ └────────────────────┘ └────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Wzorzec implementacji CSS:
/* Figma-style properties panel */
.properties-panel {
width: 240px;
background: var(--bg-secondary);
border-left: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
}
.property-section {
padding: 12px 16px;
border-bottom: 1px solid var(--border-subtle);
}
.property-section-header {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
margin-bottom: 8px;
}
/* Collapsible sections */
.property-section[data-collapsed="true"] .property-section-content {
display: none;
}
/* Inline input groups */
.property-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.property-label {
width: 24px;
font-size: 11px;
color: var(--text-tertiary);
}
.property-input {
flex: 1;
height: 28px;
padding: 0 8px;
font-size: 11px;
background: var(--bg-tertiary);
border: 1px solid transparent;
border-radius: 4px;
}
.property-input:focus {
border-color: var(--color-primary);
outline: none;
}
5. Zmienne i tokeny projektowe
Do 2025/2026 najbardziej progresywne zespoły budują systemy całkowicie na Figma Variables: atomowych decyzjach projektowych, które łączą projekt z kodem.
Architektura tokenów:
VARIABLE STRUCTURE:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ PRIMITIVES (Raw values) │
│ ├── colors/ │
│ │ ├── blue-50: #EBF5FF │
│ │ ├── blue-100: #D1E9FF │
│ │ ├── blue-500: #2563EB ← Brand primary │
│ │ └── ... │
│ ├── spacing/ │
│ │ ├── 4: 4px │
│ │ ├── 8: 8px │
│ │ ├── 16: 16px │
│ │ └── ... │
│ └── radius/ │
│ ├── sm: 4px │
│ ├── md: 8px │
│ └── lg: 16px │
│ │
│ SEMANTIC (Contextual meaning) │
│ ├── surface/ │
│ │ ├── primary: → colors/white │
│ │ ├── secondary: → colors/gray-50 │
│ │ └── elevated: → colors/white │
│ ├── text/ │
│ │ ├── primary: → colors/gray-900 │
│ │ ├── secondary: → colors/gray-600 │
│ │ └── disabled: → colors/gray-400 │
│ └── interactive/ │
│ ├── default: → colors/blue-500 │
│ ├── hover: → colors/blue-600 │
│ └── pressed: → colors/blue-700 │
│ │
│ COMPONENT (Specific usage) │
│ ├── button/ │
│ │ ├── background: → interactive/default │
│ │ ├── text: → colors/white │
│ │ └── radius: → radius/md │
│ └── card/ │
│ ├── background: → surface/elevated │
│ ├── padding: → spacing/16 │
│ └── radius: → radius/lg │
│ │
└─────────────────────────────────────────────────────────────────┘
Właściwości niestandardowe CSS z Figma Variables:
/* Exported from Figma Variables */
:root {
/* Primitives */
--color-blue-500: #2563EB;
--color-gray-900: #111827;
--spacing-16: 16px;
--radius-md: 8px;
/* Semantic tokens */
--color-interactive-default: var(--color-blue-500);
--color-text-primary: var(--color-gray-900);
/* Component tokens */
--button-bg: var(--color-interactive-default);
--button-radius: var(--radius-md);
--card-padding: var(--spacing-16);
}
/* Dark mode via variable modes */
[data-theme="dark"] {
--color-text-primary: #F9FAFB;
--color-surface-primary: #1F2937;
}
6. Dev Mode: Łączenie projektu z kodem
Dev Mode w Figmie to dedykowana przestrzeń robocza dla programistów, tłumacząca intencje projektowe na kod gotowy do produkcji.
Przepływ pracy Dev Mode:
DESIGN → DEV HANDOFF FLOW:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ 1. DESIGNER MARKS READY │
│ ┌─────────────────────────────────────────────────────────────┐│
│ │ Frame: Login Screen [✓ Ready for dev] ││
│ │ ││
│ │ When marked ready: ││
│ │ • Appears in developer's queue ││
│ │ • Locked from major edits ││
│ │ • Change tracking enabled ││
│ └─────────────────────────────────────────────────────────────┘│
│ │
│ 2. DEVELOPER INSPECTS │
│ ┌─────────────────────────────────────────────────────────────┐│
│ │ ┌──────────────────┐ ┌──────────────────────────────────┐ ││
│ │ │ │ │ CSS │ ││
│ │ │ [Button] │ │ .button { │ ││
│ │ │ │ │ display: flex; │ ││
│ │ │ │ │ padding: 12px 24px; │ ││
│ │ └──────────────────┘ │ background: var(--primary); │ ││
│ │ │ border-radius: 8px; │ ││
│ │ Selected: Button │ } │ ││
│ │ Component: ui/Button │ │ ││
│ │ Last edited: 2h ago │ [Copy] [Switch to Swift] │ ││
│ │ └──────────────────────────────────┘ ││
│ └─────────────────────────────────────────────────────────────┘│
│ │
│ 3. CHANGE COMPARISON │
│ ┌─────────────────────────────────────────────────────────────┐│
│ │ Changes since last dev view: ││
│ │ ││
│ │ - Padding: 16px → 12px ││
│ │ + Border radius: 8px (new) ││
│ │ ~ Color: #2563EB → var(--primary) ││
│ └─────────────────────────────────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────────┘
System kolorów
Interfejs Figmy używa stonowanej, neutralnej palety, która utrzymuje skupienie na treściach użytkownika.
/* Figma's UI color palette */
:root {
/* Surfaces */
--bg-canvas: #E5E5E5; /* Canvas background */
--bg-primary: #FFFFFF; /* Panels, frames */
--bg-secondary: #F5F5F5; /* Secondary panels */
--bg-tertiary: #E8E8E8; /* Inputs, wells */
/* Text */
--text-primary: #000000;
--text-secondary: #666666;
--text-tertiary: #999999;
/* Borders */
--border-subtle: rgba(0, 0, 0, 0.1);
--border-strong: rgba(0, 0, 0, 0.2);
/* Interactive */
--color-primary: #0D99FF; /* Selection, focus */
--color-primary-hover: #0085EB;
--color-success: #14AE5C;
--color-warning: #FFCD29;
--color-error: #F24822;
/* Multiplayer colors (assigned to users) */
--cursor-1: #F24822; /* Red */
--cursor-2: #FF7262; /* Coral */
--cursor-3: #FFCD29; /* Yellow */
--cursor-4: #14AE5C; /* Green */
--cursor-5: #0D99FF; /* Blue */
--cursor-6: #9747FF; /* Purple */
--cursor-7: #FF00FF; /* Magenta */
}
/* Dark mode */
[data-theme="dark"] {
--bg-canvas: #1E1E1E;
--bg-primary: #2C2C2C;
--bg-secondary: #383838;
--bg-tertiary: #444444;
--text-primary: #FFFFFF;
--text-secondary: #ABABAB;
--text-tertiary: #7B7B7B;
}
Typografia
Figma używa Inter dla swojego interfejsu — kroju pisma zaprojektowanego specjalnie dla ekranów.
/* Figma's typography system */
:root {
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* Type scale */
--text-xs: 11px; /* Labels, metadata */
--text-sm: 12px; /* Body, properties */
--text-md: 13px; /* Headings */
--text-lg: 14px; /* Section titles */
/* Weights */
--font-regular: 400;
--font-medium: 500;
--font-semibold: 600;
/* Line heights */
--leading-tight: 1.2;
--leading-normal: 1.4;
--leading-relaxed: 1.6;
}
/* Application */
.section-header {
font-size: var(--text-xs);
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
}
.property-label {
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.layer-name {
font-size: var(--text-sm);
font-weight: var(--font-medium);
}
Animacje i mikrointerakcje
Figma używa subtelnego, celowego ruchu, aby dostarczać informacje zwrotne bez rozpraszania.
/* Figma's motion principles */
:root {
/* Durations */
--duration-instant: 50ms; /* Hover states */
--duration-fast: 100ms; /* Toggles, small changes */
--duration-normal: 200ms; /* Panel transitions */
--duration-slow: 300ms; /* Page transitions */
/* Easings */
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Panel slide-in */
.panel {
transform: translateX(100%);
transition: transform var(--duration-normal) var(--ease-out);
}
.panel[data-visible="true"] {
transform: translateX(0);
}
/* Selection highlight */
.layer-item[data-selected="true"] {
background: var(--color-primary);
transition: background var(--duration-fast) var(--ease-out);
}
/* Cursor presence fade */
.remote-cursor {
transition: opacity var(--duration-slow) var(--ease-out);
}
.remote-cursor[data-idle="true"] {
opacity: 0.5;
}
Kluczowe innowacje
FigJam: Rozszerzenie metafory płótna
FigJam rozszerzył płótno Figmy na tablicę, udowadniając, że nieskończone płótno sprawdza się przy ideacji, nie tylko przy pracy pikselowej.
Decyzje projektowe: - Ciepła, zabawna paleta kolorów vs. neutralne tony Figmy - Karteczki samoprzylepne z fizyką (można je „rzucać") - Stemple i reakcje do asynchronicznej informacji zwrotnej - Timer i głosowanie do facylitacji
Variables: Tokeny projektowe natywnie
Figma Variables uczyniły tokeny projektowe obywatelami pierwszej klasy, umożliwiając: - Przełączanie trybów (jasny/ciemny, motywy marki) - Responsywne tokeny (wartości mobile/desktop) - Zmienne liczbowe dla logiki prototypowania
Integracja AI (2025+)
Podejście Figmy do AI koncentruje się na współpracy: - Linting wspierany przez AI dla zgodności z tokenami - Predykcyjne sugestie zmiennych - Rekomendacje optymalizacji układu - Generatywna eksploracja projektowa w Weave
Lekcje do wdrożenia
1. Buduj dla trybu wieloosobowego od pierwszego dnia
// Presence system architecture
class PresenceManager {
constructor(roomId) {
this.users = new Map();
this.localUser = null;
this.socket = new WebSocket(`wss://collab.example.com/${roomId}`);
// Debounce cursor updates
this.broadcastCursor = debounce((position) => {
this.socket.send(JSON.stringify({
type: 'cursor',
userId: this.localUser.id,
position,
timestamp: Date.now()
}));
}, 50);
}
updateCursor(x, y) {
this.localUser.cursor = { x, y };
this.broadcastCursor({ x, y });
}
// Fade idle users
checkIdleUsers() {
const now = Date.now();
const IDLE_THRESHOLD = 30000; // 30 seconds
this.users.forEach(user => {
user.isIdle = (now - user.lastActivity) > IDLE_THRESHOLD;
});
}
}
2. Interfejsy świadome kontekstu
// Panel content based on selection
function getPropertiesForSelection(selection) {
if (selection.length === 0) {
return { type: 'empty', message: 'Select something to see properties' };
}
if (selection.length > 1) {
return { type: 'mixed', items: selection };
}
const item = selection[0];
switch (item.type) {
case 'FRAME':
return {
type: 'frame',
sections: ['dimensions', 'autoLayout', 'fill', 'stroke', 'effects']
};
case 'TEXT':
return {
type: 'text',
sections: ['font', 'paragraph', 'fill']
};
case 'COMPONENT':
return {
type: 'component',
sections: ['properties', 'variants', 'dimensions']
};
default:
return {
type: 'generic',
sections: ['dimensions', 'fill', 'stroke']
};
}
}
3. Progresywne ujawnianie w paskach narzędzi
<!-- Tool with flyout variants -->
<div class="tool-button" data-tool="shape">
<button class="tool-primary" title="Rectangle (R)">
<svg><!-- Rectangle icon --></svg>
</button>
<div class="tool-flyout" hidden>
<button data-variant="rectangle">
<svg></svg> Rectangle <kbd>R</kbd>
</button>
<button data-variant="ellipse">
<svg></svg> Ellipse <kbd>O</kbd>
</button>
<button data-variant="polygon">
<svg></svg> Polygon
</button>
<button data-variant="star">
<svg></svg> Star
</button>
<hr>
<button data-variant="image">
<svg></svg> Place image <kbd>Cmd+Shift+K</kbd>
</button>
</div>
</div>
<script>
// Long-press to reveal flyout
const LONG_PRESS_DURATION = 300;
toolButtons.forEach(btn => {
let pressTimer;
btn.addEventListener('pointerdown', () => {
pressTimer = setTimeout(() => {
btn.querySelector('.tool-flyout').hidden = false;
}, LONG_PRESS_DURATION);
});
btn.addEventListener('pointerup', () => {
clearTimeout(pressTimer);
});
});
</script>
Powiązane zasady
- Gestalt: Bliskość i grupowanie: Organizacja paneli
- Hierarchia wizualna: Projekt listy warstw
- Teoria koloru: Kolor funkcjonalny: Status i zaznaczenie
- Odstępy i rytm: System siatki 8px
Często zadawane pytania
Jak działa technologia wieloosobowa Figmy?
Figma zbudowała własne rozwiązanie prostsze niż tradycyjne transformacje operacyjne (OT). Ponieważ Figma obsługuje obiekty na płótnie, a nie tekst w dokumencie, mogli użyć mniej złożonego systemu rozwiązywania konfliktów. Zmiany synchronizują się przez połączenia WebSocket, z pozycjami kursorów ograniczanymi (debounce) do interwałów 50ms dla wydajności. Użytkownicy są identyfikowani przez kursory oznaczone kolorami z etykietami imion, które pojawiają się przy aktywności.
Jaka jest różnica między Figma a FigJam?
Figma to precyzyjne narzędzie projektowe do pracy UI/UX z kontrolą na poziomie pikseli, komponentami i auto layout. FigJam to kolaboracyjna tablica do ideacji z cieplejszą paletą kolorów, karteczkami samoprzylepnymi z fizyką, stemplami, reakcjami i narzędziami do facylitacji jak timery i głosowanie. Oba dzielą paradygmat nieskończonego płótna, ale służą różnym celom w procesie projektowym.
Jak działają Figma Variables dla systemów projektowych?
Zmienne stosują trójwarstwową architekturę: prymitywy (surowe wartości jak blue-500: #2563EB), tokeny semantyczne (znaczenie kontekstowe jak interactive-default → blue-500) i tokeny komponentowe (specyficzne użycie jak button-background → interactive-default). To warstwowanie umożliwia przełączanie trybów dla motywów jasnych/ciemnych i wartości responsywnych, utrzymując jedno źródło prawdy.
Czym jest Dev Mode i dla kogo jest przeznaczony?
Dev Mode to dedykowana przestrzeń robocza dla programistów, która tłumaczy intencje projektowe na kod gotowy do produkcji. Projektanci oznaczają ramki jako „gotowe do dev", co blokuje je przed większymi edycjami i włącza śledzenie zmian. Programiści widzą wygenerowane fragmenty kodu CSS, Swift lub innych języków, odniesienia do komponentów oraz widok różnic pokazujący, co zmieniło się od ostatniego przeglądu.
Dlaczego Figma używa nieskończonego płótna zamiast stron?
Nieskończone płótno usuwa sztuczne ograniczenia narzucane przez narzędzia oparte na stronach. Projektanci mogą układać całe przepływy użytkownika obok siebie, porównywać warianty przy różnych poziomach przybliżenia i eksplorować pomysły bez zarządzania nawigacją między stronami. Poziomy przybliżenia służą różnym celom: 100%+ dla pracy pikselowej, 25-50% dla przeglądu na poziomie strony i poniżej 10% dla nawigacji z lotu ptaka.