Figma : La Toile Collaborative
Comment Figma a construit le design multijoueur en temps réel : indicateurs de présence, canevas infini, Dev Mode et design tokens. Avec des patterns d'implémentation CSS et JavaScript.
Figma : Le Canevas Collaboratif
« Dans l'approche Figma, nous voulions rendre l'IA multijoueur. La collaboration a toujours été au cœur de tout ce que nous faisons. » — Équipe Figma
Figma a transformé le design d'un métier solitaire en un sport d'équipe. En tant que premier outil de design avec édition collaborative en temps réel, Figma a prouvé que des outils créatifs complexes pouvaient être aussi fluides que Google Docs, tout en maintenant la précision qu'exigent les designers.
Pourquoi Figma Est Important
Figma n'a pas simplement ajouté le multijoueur aux outils de design. Il a réinventé la façon dont le design se fait. En intégrant la collaboration dans ses fondations, Figma a changé les workflows, la dynamique d'équipe et l'ensemble du pipeline design-développement.
Réalisations clés : - Premier outil de design avec édition multijoueur en temps réel - Pionnier du « canevas infini » comme paradigme d'interface - A rendu les design systems accessibles à toutes les équipes - A créé un pont entre design et développement avec Dev Mode - A bâti un empire créatif de 20 milliards de dollars sur la collaboration
Points Clés à Retenir
- Le multijoueur exige la simplicité - Figma a construit une solution maison plus simple que les transformations opérationnelles car les systèmes plus simples sont plus faciles à déboguer et maintenir
- Le canevas infini invite à l'exploration - Contrairement aux outils basés sur des pages, un canevas ouvert encourage l'itération et évite les contraintes artificielles
- Les interfaces contextuelles réduisent la charge cognitive - Les barres d'outils et panneaux qui s'adaptent à la sélection n'affichent que les contrôles pertinents
- Les design tokens font le pont entre design et code - Les variables avec des couches primitives → sémantiques → composants créent un langage commun entre designers et développeurs
- Dev Mode est un espace de travail dédié - Séparer les outils développeur des outils design respecte les différents modèles mentaux et workflows
Principes Fondamentaux de Design
1. Le Multijoueur Comme Fondation
Figma a construit une solution multijoueur maison plus simple que les approches traditionnelles comme les transformations opérationnelles (OTs). Leur objectif était la clarté : le système ne devait pas être plus complexe que nécessaire.
La philosophie : Puisque Figma n'est pas un éditeur de texte, ils n'avaient pas besoin de la puissance des OTs et pouvaient se contenter de quelque chose de moins compliqué. Les systèmes plus simples sont plus faciles à comprendre, implémenter, déboguer, tester et maintenir.
Patterns visuels pour le multijoueur :
INDICATEURS DE PRÉSENCE :
┌─────────────────────────────────────────────────────────────────┐
│ Canvas │
│ │
│ ┌──────────────────────────────────────┐ │
│ │ Component: Button │ (o) Alice │
│ │ ┌────────────────────┐ │ <- Curseur live │
│ │ │ Primary Button │ │ │
│ │ └────────────────────┘ │ │
│ └──────────────────────────────────────┘ (*) Bob │
│ <- Anneau sélection │
│ │
│ ┌──────────────────────────────────────┐ │
│ │ Input Field (+) Carol │ <- Mode édition │
│ │ ┌────────────────────────────────┐ │ │
│ │ │ | │ │ │
│ │ └────────────────────────────────┘ │ │
│ └──────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
DESIGN DU CURSEUR :
┌─────────────────────────────────────────────────────────────────┐
│ │
│ Anatomie du curseur : │
│ │
│ ▲ │
│ ╱ ╲ │
│ ╱ ╲ ← Flèche (couleur de l'utilisateur) │
│ ╱_____╲ │
│ ┌─────────┐ │
│ │ Alice │ ← Étiquette nom (apparaît au survol/activité) │
│ └─────────┘ │
│ │
│ États : │
│ • Inactif : Curseur seul │
│ • Actif : Curseur + étiquette nom │
│ • Édition : Curseur + nom + badge "Édition..." │
│ • Absent : Curseur estompé (50% opacité) │
│ │
└─────────────────────────────────────────────────────────────────┘
Principes d'implémentation : - Les utilisateurs sont identifiés par couleur, pas seulement par nom - Les anneaux de sélection montrent qui travaille où - Le mouvement du curseur est temporisé pour la performance - Les indicateurs de présence s'estompent quand les utilisateurs deviennent inactifs
2. Le Canevas Infini
Le canevas de Figma est un environnement ouvert et flexible permettant une itération rapide. Contrairement aux outils basés sur des pages, le canevas infini invite à l'exploration.
Patterns d'interaction du canevas :
NAVIGATION :
┌─────────────────────────────────────────────────────────────────┐
│ Espace + glisser Panoramique du canevas │
│ Défilement Panoramique vertical │
│ Shift + défilement Panoramique horizontal │
│ Cmd/Ctrl + +/- Zoom avant/arrière │
│ Cmd/Ctrl + 0 Zoom à 100% │
│ Cmd/Ctrl + 1 Zoom pour ajuster │
│ Cmd/Ctrl + 2 Zoom sur la sélection │
└─────────────────────────────────────────────────────────────────┘
NIVEAUX DE ZOOM AVEC INTENTION :
┌─────────────────────────────────────────────────────────────────┐
│ 100%+ Travail de détail au pixel │
│ 50-100% Édition de composants │
│ 25-50% Niveau page/écran │
│ 10-25% Vue d'ensemble des flux │
│ <10% Navigation vue d'ensemble │
│ │
│ L'UI s'adapte selon le zoom : │
│ • Le texte se masque sous le seuil de lisibilité │
│ • Les détails se simplifient à distance │
│ • Les étiquettes de frame restent toujours visibles │
└─────────────────────────────────────────────────────────────────┘
Pattern de mini-carte :
/* Mini-carte de navigation du canevas */
.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 {
/* Zone actuellement visible */
border: 2px solid var(--color-primary);
background: rgba(255, 255, 255, 0.1);
cursor: grab;
}
.minimap-content {
/* Rendu simplifié de toutes les frames */
opacity: 0.6;
}
3. La Barre d'Outils Comme Centre de Commande
La barre d'outils de Figma incarne la divulgation progressive : simple au premier regard, puissante à l'exploration.
Architecture de la barre d'outils :
ANATOMIE DE LA BARRE D'OUTILS FIGMA :
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ┌─────┬─────┬─────┬─────┬─────┬─────────────────┬───────────┐ │
│ │ [=] │ [>] │ [R] │ [O] │ [-] │ T (H) [...] │ Share v │ │
│ └──┬──┴──┬──┴──┬──┴──┬──┴──┬──┴────────┬────────┴─────┬─────┘ │
│ │ │ │ │ │ │ │ │
│ Menu Dépl. Frame Forme Ligne Texte/Main/ Collaboration │
│ outils outils Commentaire │
│ │
│ PATTERN DE MENU DÉROULANT : │
│ ┌─────┐ │
│ │ [R] │ <- Outil principal (clic) │
│ └──┬──┘ │
│ │ ┌─────────────────────────┐ │
│ └──│ [R] Rectangle R │ <- Appui long révèle options │
│ │ [O] Ellipse O │ │
│ │ [^] Polygone │ │
│ │ [*] Étoile │ │
│ │ [I] Placer image Cmd+K │ │
│ └─────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
BARRE D'OUTILS CONTEXTUELLE :
La sélection modifie dynamiquement les options de la barre :
Pas de sélection : [Déplacer] [Frame] [Forme] [Plume] [Texte]
Frame sélectionnée : [Déplacer] [Frame] [Auto layout ▼] [Grille ▼]
Texte sélectionné : [Déplacer] [Police ▼] [Taille ▼] [Graisse ▼] [Align]
Composant sélectionné : [Déplacer] [Variants] [Propriétés] [Détacher]
4. Panneau des Propriétés : Intelligence Contextuelle
Le panneau de droite s'adapte complètement selon la sélection, n'affichant que les contrôles pertinents.
Architecture du panneau :
ÉTATS DU PANNEAU PROPRIÉTÉS :
┌─────────────────────────────────────────────────────────────────┐
│ │
│ AUCUNE SÉLECTION : FRAME SÉLECTIONNÉE : │
│ ┌────────────────────┐ ┌────────────────────┐ │
│ │ Design Prototype │ │ Design Prototype │ │
│ ├────────────────────┤ ├────────────────────┤ │
│ │ │ │ Frame │
│ │ Sélectionnez │ │ L: 375 H: 812 │ │
│ │ quelque chose │ │ X: 100 Y: 200 │ │
│ │ pour voir les │ ├────────────────────┤ │
│ │ propriétés │ │ Auto Layout │ │
│ │ │ │ ═══ ↕ 16 ↔ 24 │ │
│ │ │ ├────────────────────┤ │
│ │ │ │ Remplissage │ │
│ │ │ │ ■ #FFFFFF 100% │ │
│ │ │ ├────────────────────┤ │
│ │ │ │ Contour │ │
│ │ │ │ + Ajouter contour │ │
│ │ │ ├────────────────────┤ │
│ │ │ │ Effets │ │
│ │ │ │ + Ajouter effet │ │
│ └────────────────────┘ └────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Pattern d'implémentation CSS :
/* Panneau de propriétés style Figma */
.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;
}
/* Sections réductibles */
.property-section[data-collapsed="true"] .property-section-content {
display: none;
}
/* Groupes de champs en ligne */
.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. Variables et Design Tokens
En 2025/2026, les équipes les plus avancées construisent leurs systèmes entièrement sur les Figma Variables : des décisions de design atomiques qui font le pont entre le design et le code.
Architecture des tokens :
STRUCTURE DES VARIABLES :
┌─────────────────────────────────────────────────────────────────┐
│ │
│ PRIMITIVES (Valeurs brutes) │
│ ├── colors/ │
│ │ ├── blue-50: #EBF5FF │
│ │ ├── blue-100: #D1E9FF │
│ │ ├── blue-500: #2563EB ← Couleur principale de marque │
│ │ └── ... │
│ ├── spacing/ │
│ │ ├── 4: 4px │
│ │ ├── 8: 8px │
│ │ ├── 16: 16px │
│ │ └── ... │
│ └── radius/ │
│ ├── sm: 4px │
│ ├── md: 8px │
│ └── lg: 16px │
│ │
│ SÉMANTIQUE (Signification contextuelle) │
│ ├── 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 │
│ │
│ COMPOSANT (Usage spécifique) │
│ ├── button/ │
│ │ ├── background: → interactive/default │
│ │ ├── text: → colors/white │
│ │ └── radius: → radius/md │
│ └── card/ │
│ ├── background: → surface/elevated │
│ ├── padding: → spacing/16 │
│ └── radius: → radius/lg │
│ │
└─────────────────────────────────────────────────────────────────┘
Propriétés CSS personnalisées issues des variables Figma :
/* Exporté depuis Figma Variables */
:root {
/* Primitives */
--color-blue-500: #2563EB;
--color-gray-900: #111827;
--spacing-16: 16px;
--radius-md: 8px;
/* Tokens sémantiques */
--color-interactive-default: var(--color-blue-500);
--color-text-primary: var(--color-gray-900);
/* Tokens de composant */
--button-bg: var(--color-interactive-default);
--button-radius: var(--radius-md);
--card-padding: var(--spacing-16);
}
/* Mode sombre via les modes de variables */
[data-theme="dark"] {
--color-text-primary: #F9FAFB;
--color-surface-primary: #1F2937;
}
6. Dev Mode : Le pont entre design et code
Le Dev Mode de Figma est un espace de travail dédié aux développeurs, traduisant l'intention de design en code prêt pour la production.
Flux de travail du Dev Mode :
FLUX DE TRANSMISSION DESIGN → DEV :
┌─────────────────────────────────────────────────────────────────┐
│ │
│ 1. LE DESIGNER MARQUE COMME PRÊT │
│ ┌─────────────────────────────────────────────────────────────┐│
│ │ Frame : Écran de connexion [✓ Prêt pour dev] ││
│ │ ││
│ │ Une fois marqué prêt : ││
│ │ • Apparaît dans la file d'attente du développeur ││
│ │ • Verrouillé contre les modifications majeures ││
│ │ • Suivi des modifications activé ││
│ └─────────────────────────────────────────────────────────────┘│
│ │
│ 2. LE DÉVELOPPEUR INSPECTE │
│ ┌─────────────────────────────────────────────────────────────┐│
│ │ ┌──────────────────┐ ┌──────────────────────────────────┐ ││
│ │ │ │ │ CSS │ ││
│ │ │ [Button] │ │ .button { │ ││
│ │ │ │ │ display: flex; │ ││
│ │ │ │ │ padding: 12px 24px; │ ││
│ │ └──────────────────┘ │ background: var(--primary); │ ││
│ │ │ border-radius: 8px; │ ││
│ │ Sélectionné : Button │ } │ ││
│ │ Composant : ui/Button │ │ ││
│ │ Dernière modif : 2h │ [Copier] [Passer en Swift] │ ││
│ │ └──────────────────────────────────┘ ││
│ └─────────────────────────────────────────────────────────────┘│
│ │
│ 3. COMPARAISON DES MODIFICATIONS │
│ ┌─────────────────────────────────────────────────────────────┐│
│ │ Modifications depuis la dernière consultation dev : ││
│ │ ││
│ │ - Padding : 16px → 12px ││
│ │ + Border radius : 8px (nouveau) ││
│ │ ~ Couleur : #2563EB → var(--primary) ││
│ └─────────────────────────────────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────────┘
Système de couleurs
L'interface de Figma utilise une palette neutre et sobre qui maintient l'attention sur le contenu de l'utilisateur.
/* Palette de couleurs de l'interface Figma */
:root {
/* Surfaces */
--bg-canvas: #E5E5E5; /* Arrière-plan du canevas */
--bg-primary: #FFFFFF; /* Panneaux, frames */
--bg-secondary: #F5F5F5; /* Panneaux secondaires */
--bg-tertiary: #E8E8E8; /* Champs de saisie, zones creuses */
/* Texte */
--text-primary: #000000;
--text-secondary: #666666;
--text-tertiary: #999999;
/* Bordures */
--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;
}
Typographie
Figma utilise Inter pour son interface, une police conçue spécifiquement pour les écrans.
/* 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);
}
Animations et micro-interactions
Figma utilise des mouvements subtils et intentionnels pour fournir un retour visuel sans distraire l'utilisateur.
/* 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;
}
Innovations clés
FigJam : étendre la métaphore du canevas
FigJam a étendu le canevas de Figma au tableau blanc collaboratif, prouvant que le canevas infini fonctionne pour l'idéation, pas seulement pour le travail au pixel près.
Décisions de design : - Palette de couleurs chaudes et ludiques vs. les tons neutres de Figma - Post-its avec effets physiques (peuvent être « lancés ») - Tampons et réactions pour les retours asynchrones - Minuteur et système de vote pour la facilitation
Variables : les design tokens en natif
Figma Variables a fait des design tokens un élément de première classe, permettant : - Le changement de mode (clair/sombre, thèmes de marque) - Les tokens responsifs (valeurs mobile/desktop) - Les variables numériques pour la logique de prototypage
Intégration de l'IA (2025+)
L'approche de Figma en matière d'IA est centrée sur la collaboration : - Vérification automatique par IA de la conformité aux tokens - Suggestions prédictives de variables - Recommandations d'optimisation de mise en page - Exploration générative du design dans Weave
Enseignements pour l'implémentation
1. Concevoir pour le multijoueur dès le premier jour
// 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. Interfaces contextuelles
// 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. Divulgation progressive dans les barres d'outils
<!-- 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> Polygone
</button>
<button data-variant="star">
<svg></svg> Étoile
</button>
<hr>
<button data-variant="image">
<svg></svg> Insérer une 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>
Principes Connexes
- Gestalt : Proximité et Regroupement : Organisation des panneaux
- Hiérarchie Visuelle : Conception de la liste des calques
- Théorie des Couleurs : Couleur Fonctionnelle : Statut et sélection
- Espacement et Rythme : Système de grille 8px
Questions Fréquemment Posées
Comment fonctionne la technologie multijoueur de Figma ?
Figma a développé une solution interne plus simple que les transformations opérationnelles (OT) traditionnelles. Puisque Figma manipule des objets sur un canevas plutôt que du texte dans un document, ils ont pu utiliser un système de résolution de conflits moins complexe. Les modifications se synchronisent via des connexions WebSocket, avec des positions de curseur limitées à des intervalles de 50ms pour la performance. Les utilisateurs sont identifiés par des curseurs codés par couleur avec des étiquettes de nom qui apparaissent lors de l'activité.
Quelle est la différence entre Figma et FigJam ?
Figma est un outil de conception de précision pour le travail UI/UX avec un contrôle au pixel près, des composants et l'auto layout. FigJam est un tableau blanc collaboratif pour l'idéation avec une palette de couleurs plus chaleureuse, des post-it avec physique, des tampons, des réactions et des outils de facilitation comme les minuteries et le vote. Les deux partagent le paradigme du canevas infini mais servent des objectifs différents dans le processus de conception.
Comment fonctionnent les Variables Figma pour les design systems ?
Les variables suivent une architecture à trois niveaux : les primitives (valeurs brutes comme blue-500: #2563EB), les tokens sémantiques (signification contextuelle comme interactive-default → blue-500), et les tokens de composants (usage spécifique comme button-background → interactive-default). Cette superposition permet le changement de mode pour les thèmes clair/sombre et les valeurs responsives, tout en maintenant une source unique de vérité.
Qu'est-ce que le Dev Mode et à qui s'adresse-t-il ?
Le Dev Mode est un espace de travail dédié aux développeurs qui traduit l'intention de conception en code prêt pour la production. Les designers marquent les frames comme « prêts pour le dev », ce qui les verrouille contre les modifications majeures et active le suivi des changements. Les développeurs voient le CSS généré, le Swift ou d'autres extraits de code, les références de composants et une vue diff montrant ce qui a changé depuis leur dernière inspection.
Pourquoi Figma utilise-t-il un canevas infini au lieu de pages ?
Le canevas infini supprime les contraintes artificielles que les outils basés sur des pages imposent. Les designers peuvent disposer des flux utilisateur entiers côte à côte, comparer des variantes à différents niveaux de zoom et explorer des idées sans gérer la navigation entre pages. Les niveaux de zoom servent différents objectifs : 100%+ pour le travail au pixel, 25-50% pour la révision au niveau de la page, et moins de 10% pour la navigation en vue d'ensemble.