Figma: Die kollaborative Leinwand
Wie Figma Echtzeit-Multiplayer-Design aufbaute: Anwesenheitsindikatoren, unendliche Leinwand, Dev Mode und Design Tokens. Mit CSS und JavaScript Implementierungsmustern.
Figma: Die kollaborative Leinwand
„Bei Figma wollten wir KI multiplayer-fähig machen. Zusammenarbeit war schon immer das Herzstück von allem, was wir tun." — Figma Team
Figma hat Design von einem einsamen Handwerk in einen Mannschaftssport verwandelt. Als erstes Design-Tool mit Live-Kollaboration bewies Figma, dass komplexe kreative Werkzeuge genauso flüssig wie Google Docs sein können – ohne die Präzision zu opfern, die Designer verlangen.
Warum Figma wichtig ist
Figma hat nicht einfach nur Multiplayer zu Design-Tools hinzugefügt. Es hat neu definiert, wie Design entsteht. Durch die Integration von Kollaboration ins Fundament veränderte Figma Arbeitsabläufe, Teamdynamiken und die gesamte Design-to-Development-Pipeline.
Zentrale Errungenschaften: - Erstes Design-Tool mit Echtzeit-Multiplayer-Bearbeitung - Pionier des „Infinite Canvas" als UI-Paradigma - Design Systems für jedes Team zugänglich gemacht - Brücke zwischen Design und Entwicklung durch Dev Mode - Ein 20-Milliarden-Dollar-Kreativimperium auf Kollaboration aufgebaut
Kernerkenntnisse
- Multiplayer erfordert Einfachheit - Figma entwickelte eine hauseigene Lösung, die einfacher ist als Operational Transforms, weil einfachere Systeme leichter zu debuggen und zu warten sind
- Infinite Canvas lädt zum Erkunden ein - Im Gegensatz zu seitenbasierten Tools ermutigt eine offene Leinwand zur Iteration und verhindert künstliche Einschränkungen
- Kontextsensitive Interfaces reduzieren kognitive Last - Werkzeugleisten und Panels, die sich der Auswahl anpassen, zeigen nur relevante Steuerelemente
- Design Tokens verbinden Design und Code - Variablen mit Primitives → Semantic → Component-Ebenen schaffen eine gemeinsame Sprache zwischen Designern und Entwicklern
- Dev Mode ist ein dedizierter Arbeitsbereich - Die Trennung von Entwickler- und Design-Tools respektiert unterschiedliche mentale Modelle und Arbeitsweisen
Zentrale Designprinzipien
1. Multiplayer als Fundament
Figma entwickelte eine hauseigene Multiplayer-Lösung, die einfacher ist als traditionelle Ansätze wie Operational Transforms (OTs). Ihr Ziel war Klarheit: Das System sollte nicht komplexer sein als nötig.
Die Philosophie: Da Figma kein Texteditor ist, brauchten sie nicht die Leistungsfähigkeit von OTs und konnten mit etwas Unkomplizierterem auskommen. Einfachere Systeme sind leichter zu verstehen, zu implementieren, zu debuggen, zu testen und zu warten.
Visuelle Muster für Multiplayer:
PRESENCE INDICATORS:
┌─────────────────────────────────────────────────────────────────┐
│ Canvas │
│ │
│ ┌──────────────────────────────────────┐ │
│ │ Component: Button │ (o) Alice │
│ │ ┌────────────────────┐ │ <- Live cursor │
│ │ │ Primary Button │ │ │
│ │ └────────────────────┘ │ │
│ └──────────────────────────────────────┘ (*) Bob │
│ <- Selection ring │
│ │
│ ┌──────────────────────────────────────┐ │
│ │ Input Field (+) Carol │ <- Editing mode │
│ │ ┌────────────────────────────────┐ │ │
│ │ │ | │ │ │
│ │ └────────────────────────────────┘ │ │
│ └──────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
CURSOR DESIGN:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ Cursor-Anatomie: │
│ │
│ ▲ │
│ ╱ ╲ │
│ ╱ ╲ ← Pfeil (Benutzerfarbe) │
│ ╱_____╲ │
│ ┌─────────┐ │
│ │ Alice │ ← Namensschild (erscheint bei Hover/Aktivität) │
│ └─────────┘ │
│ │
│ Zustände: │
│ • Idle: Nur Cursor │
│ • Aktiv: Cursor + Namensschild │
│ • Bearbeitung: Cursor + Name + "Bearbeitet..."-Badge │
│ • Abwesend: Verblasster Cursor (50% Deckkraft) │
│ │
└─────────────────────────────────────────────────────────────────┘
Implementierungsprinzipien: - Benutzer werden durch Farbe identifiziert, nicht nur durch Namen - Selection Rings zeigen, wer wo arbeitet - Cursorbewegungen werden für Performance gedrosselt - Präsenzindikatoren verblassen, wenn Benutzer inaktiv werden
2. Der Infinite Canvas
Figmas Canvas ist eine offene, flexible Umgebung für schnelle Iteration. Im Gegensatz zu seitenbasierten Tools lädt der Infinite Canvas zum Erkunden ein.
Canvas-Interaktionsmuster:
NAVIGATION:
┌─────────────────────────────────────────────────────────────────┐
│ Space + Ziehen Canvas verschieben │
│ Scrollen Vertikal verschieben │
│ Shift + Scrollen Horizontal verschieben │
│ Cmd/Ctrl + +/- Hinein-/Herauszoomen │
│ Cmd/Ctrl + 0 Auf 100% zoomen │
│ Cmd/Ctrl + 1 Auf Ansicht einpassen │
│ Cmd/Ctrl + 2 Auf Auswahl zoomen │
└─────────────────────────────────────────────────────────────────┘
ZOOM-STUFEN MIT ZWECK:
┌─────────────────────────────────────────────────────────────────┐
│ 100%+ Pixel-genaue Detailarbeit │
│ 50-100% Komponenten-Bearbeitung │
│ 25-50% Seiten-/Screen-Ebene │
│ 10-25% Flow-Übersicht │
│ <10% Vogelperspektiven-Navigation │
│ │
│ UI passt sich pro Zoom-Stufe an: │
│ • Text wird unter Lesbarkeitsschwelle ausgeblendet │
│ • Details vereinfachen sich bei Entfernung │
│ • Frame-Labels bleiben immer sichtbar │
└─────────────────────────────────────────────────────────────────┘
Mini-Map-Muster:
/* 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 {
/* Aktuell sichtbarer Bereich */
border: 2px solid var(--color-primary);
background: rgba(255, 255, 255, 0.1);
cursor: grab;
}
.minimap-content {
/* Vereinfachte Darstellung aller Frames */
opacity: 0.6;
}
3. Toolbar als Kommandozentrale
Figmas Toolbar verkörpert Progressive Disclosure: Auf den ersten Blick einfach, bei näherer Erkundung leistungsstark.
Toolbar-Architektur:
FIGMA TOOLBAR ANATOMIE:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ┌─────┬─────┬─────┬─────┬─────┬─────────────────┬───────────┐ │
│ │ [=] │ [>] │ [R] │ [O] │ [-] │ T (H) [...] │ Share v │ │
│ └──┬──┴──┬──┴──┬──┴──┬──┴──┬──┴────────┬────────┴─────┬─────┘ │
│ │ │ │ │ │ │ │ │
│ Menü Move Frame Shape Line Text/Hand/ Kollaboration │
│ tools tools Comment │
│ │
│ FLYOUT-MUSTER: │
│ ┌─────┐ │
│ │ [R] │ <- Primäres Werkzeug (Klick) │
│ └──┬──┘ │
│ │ ┌─────────────────────────┐ │
│ └──│ [R] Rectangle R │ <- Langes Drücken zeigt Opt. │
│ │ [O] Ellipse O │ │
│ │ [^] Polygon │ │
│ │ [*] Star │ │
│ │ [I] Place image Cmd+K │ │
│ └─────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
KONTEXTSENSITIVE TOOLBAR:
Auswahl ändert Toolbar-Optionen dynamisch:
Keine Auswahl: [Move] [Frame] [Shape] [Pen] [Text]
Frame ausgewählt: [Move] [Frame] [Auto layout ▼] [Grid ▼]
Text ausgewählt: [Move] [Font ▼] [Size ▼] [Weight ▼] [Align]
Component ausgewählt: [Move] [Variants] [Properties] [Detach]
4. Properties Panel: Kontextuelle Intelligenz
Das rechte Panel passt sich vollständig basierend auf der Auswahl an und zeigt nur relevante Steuerelemente.
Panel-Architektur:
PROPERTIES PANEL ZUSTÄNDE:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ KEINE AUSWAHL: FRAME AUSGEWÄHLT: │
│ ┌────────────────────┐ ┌────────────────────┐ │
│ │ Design Prototype │ │ Design Prototype │ │
│ ├────────────────────┤ ├────────────────────┤ │
│ │ │ │ Frame │
│ │ Wähle etwas aus, │ │ W: 375 H: 812 │ │
│ │ um Eigenschaften │ │ X: 100 Y: 200 │ │
│ │ zu sehen │ ├────────────────────┤ │
│ │ │ │ Auto Layout │ │
│ │ │ │ ═══ ↕ 16 ↔ 24 │ │
│ │ │ ├────────────────────┤ │
│ │ │ │ Fill │ │
│ │ │ │ ■ #FFFFFF 100% │ │
│ │ │ ├────────────────────┤ │
│ │ │ │ Stroke │ │
│ │ │ │ + Add stroke │ │
│ │ │ ├────────────────────┤ │
│ │ │ │ Effects │ │
│ │ │ │ + Add effect │ │
│ └────────────────────┘ └────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
CSS-Implementierungsmuster:
/* 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. Variablen & Design Tokens
Bis 2025/2026 bauen die fortschrittlichsten Teams ihre Systeme vollständig auf Figma Variables auf: atomare Design-Entscheidungen, die Design und Code verbinden.
Token-Architektur:
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 │
│ │
└─────────────────────────────────────────────────────────────────┘
CSS Custom Properties aus 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: Die Brücke zwischen Design und Code
Figmas Dev Mode ist ein dedizierter Entwickler-Arbeitsbereich, der Design-Intentionen in produktionsreifen Code übersetzt.
Dev Mode Workflow:
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) ││
│ └─────────────────────────────────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────────┘
Farbsystem
Figmas Benutzeroberfläche verwendet eine zurückhaltende, neutrale Farbpalette, die den Fokus auf die Inhalte der Nutzer lenkt.
/* 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);
/* Interaktiv */
--color-primary: #0D99FF; /* Auswahl, Fokus */
--color-primary-hover: #0085EB;
--color-success: #14AE5C;
--color-warning: #FFCD29;
--color-error: #F24822;
/* Multiplayer-Farben (Benutzern zugewiesen) */
--cursor-1: #F24822; /* Rot */
--cursor-2: #FF7262; /* Koralle */
--cursor-3: #FFCD29; /* Gelb */
--cursor-4: #14AE5C; /* Grün */
--cursor-5: #0D99FF; /* Blau */
--cursor-6: #9747FF; /* Violett */
--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;
}
Typografie
Figma verwendet Inter für seine Benutzeroberfläche – eine Schriftart, die speziell für Bildschirme entwickelt wurde.
/* Figmas Typografie-System */
:root {
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* Schriftgrößen-Skala */
--text-xs: 11px; /* Labels, Metadaten */
--text-sm: 12px; /* Fließtext, Eigenschaften */
--text-md: 13px; /* Überschriften */
--text-lg: 14px; /* Abschnittstitel */
/* Schriftstärken */
--font-regular: 400;
--font-medium: 500;
--font-semibold: 600;
/* Zeilenhöhen */
--leading-tight: 1.2;
--leading-normal: 1.4;
--leading-relaxed: 1.6;
}
/* Anwendung */
.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);
}
Animationen & Mikrointeraktionen
Figma setzt auf subtile, zielgerichtete Bewegungen, um Feedback zu geben, ohne abzulenken.
/* Figmas Motion-Prinzipien */
:root {
/* Dauern */
--duration-instant: 50ms; /* Hover-Zustände */
--duration-fast: 100ms; /* Umschalter, kleine Änderungen */
--duration-normal: 200ms; /* Panel-Übergänge */
--duration-slow: 300ms; /* Seitenübergänge */
/* Easing-Funktionen */
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Panel-Einblendung */
.panel {
transform: translateX(100%);
transition: transform var(--duration-normal) var(--ease-out);
}
.panel[data-visible="true"] {
transform: translateX(0);
}
/* Auswahl-Hervorhebung */
.layer-item[data-selected="true"] {
background: var(--color-primary);
transition: background var(--duration-fast) var(--ease-out);
}
/* Cursor-Präsenz-Ausblendung */
.remote-cursor {
transition: opacity var(--duration-slow) var(--ease-out);
}
.remote-cursor[data-idle="true"] {
opacity: 0.5;
}
Wichtige Innovationen
FigJam: Erweiterung der Canvas-Metapher
FigJam erweiterte Figmas Canvas auf Whiteboarding und bewies damit, dass die unendliche Leinwand auch für Ideenfindung funktioniert – nicht nur für pixelgenaues Arbeiten.
Design-Entscheidungen: - Warme, verspielte Farbpalette im Gegensatz zu Figmas neutralen Tönen - Haftnotizen mit Physik-Simulation (können „geworfen" werden) - Stempel und Reaktionen für asynchrones Feedback - Timer und Abstimmungen zur Moderation
Variables: Design Tokens als Kernfunktion
Figma Variables machte Design Tokens zu einem erstklassigen Bestandteil und ermöglicht: - Modus-Wechsel (Hell/Dunkel, Marken-Themes) - Responsive Tokens (Mobile-/Desktop-Werte) - Numerische Variablen für Prototyping-Logik
KI-Integration (2025+)
Figmas KI-Ansatz konzentriert sich auf Kollaboration: - KI-gestütztes Linting für Token-Konformität - Prädiktive Variablen-Vorschläge - Empfehlungen zur Layout-Optimierung - Generative Design-Exploration in Weave
Erkenntnisse für die Implementierung
1. Von Anfang an für Multiplayer entwickeln
// Architektur des Präsenzsystems
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. Kontextsensitive Oberflächen
// 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. Progressive Disclosure in Werkzeugleisten
<!-- 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>
Verwandte Prinzipien
- Gestalt: Nähe & Gruppierung: Panel-Organisation
- Visuelle Hierarchie: Ebenenlistendesign
- Farbtheorie: Funktionale Farbe: Status und Auswahl
- Abstände & Rhythmus: 8px-Rastersystem
Häufig gestellte Fragen
Wie funktioniert Figmas Multiplayer-Technologie?
Figma hat eine hauseigene Lösung entwickelt, die einfacher ist als traditionelle Operational Transforms (OTs). Da Figma mit Objekten auf einer Leinwand arbeitet statt mit Text in einem Dokument, konnte ein weniger komplexes Konfliktlösungssystem verwendet werden. Änderungen werden über WebSocket-Verbindungen synchronisiert, wobei Cursorpositionen zur Leistungsoptimierung auf 50ms-Intervalle gedrosselt werden. Benutzer werden durch farbcodierte Cursor mit Namenslabels identifiziert, die bei Aktivität erscheinen.
Was ist der Unterschied zwischen Figma und FigJam?
Figma ist ein präzises Designwerkzeug für UI/UX-Arbeit mit pixelgenauer Kontrolle, Komponenten und Auto Layout. FigJam ist ein kollaboratives Whiteboard für Ideenfindung mit einer wärmeren Farbpalette, Haftnotizen mit Physik-Simulation, Stempeln, Reaktionen und Moderationswerkzeugen wie Timern und Abstimmungen. Beide teilen das Paradigma der unendlichen Leinwand, dienen aber unterschiedlichen Zwecken im Designprozess.
Wie funktionieren Figma Variables für Design Systems?
Variables folgen einer dreistufigen Architektur: Primitives (Rohwerte wie blue-500: #2563EB), semantische Tokens (kontextuelle Bedeutung wie interactive-default → blue-500) und Komponenten-Tokens (spezifische Verwendung wie button-background → interactive-default). Diese Schichtung ermöglicht Mode-Wechsel für Hell-/Dunkel-Themes und responsive Werte, während eine einzige Quelle der Wahrheit beibehalten wird.
Was ist Dev Mode und für wen ist er gedacht?
Dev Mode ist ein dedizierter Entwickler-Arbeitsbereich, der Designabsichten in produktionsreifen Code übersetzt. Designer markieren Frames als „ready for dev", wodurch sie vor größeren Bearbeitungen gesperrt werden und Änderungsverfolgung aktiviert wird. Entwickler sehen generierte CSS-, Swift- oder andere Code-Snippets, Komponentenreferenzen und eine Diff-Ansicht, die zeigt, was sich seit ihrer letzten Überprüfung geändert hat.
Warum verwendet Figma eine unendliche Leinwand statt Seiten?
Die unendliche Leinwand beseitigt künstliche Einschränkungen, die seitenbasierte Werkzeuge auferlegen. Designer können ganze User Flows nebeneinander anlegen, Varianten auf verschiedenen Zoomstufen vergleichen und Ideen erkunden, ohne Seitennavigation verwalten zu müssen. Zoomstufen dienen verschiedenen Zwecken: 100%+ für Pixelarbeit, 25-50% für Seitenebenen-Review und unter 10% für Vogelperspektiv-Navigation.