Figma : design UI/UX et prototypage collaboratif

Présentation de Figma

Figma est l'outil de design collaboratif de référence, fondé en 2012 et acquis par Adobe en 2022 (avant que la fusion soit bloquée par les régulateurs). Il fonctionne entièrement dans le navigateur — aucune installation requise — et permet à plusieurs designers de travailler simultanément sur le même fichier.

Figma en chiffres : 4M+ designers actifs · plan gratuit généreux (3 projets, collaborateurs illimités en visualisation) · disponible sur web, macOS, Windows. FigJam (tableau blanc collaboratif) est inclus dans tous les plans.

Pourquoi Figma s'impose dans les équipes dev/design

🌐 100% navigateur — pas de conflit de versions, accessible partout
👥 Collaboration temps réel — voir les curseurs de vos collègues en direct
🔗 Lien de partage universel — un URL pour présenter, recueillir des retours ou transmettre les specs dev
🧩 Composants réutilisables — mirror parfait des composants Angular
📐 Auto Layout — crée des layouts flexibles qui se comportent comme Flexbox/Grid
🔌 Plugins et API — écosystème riche (Iconify, Unsplash, Tokens Studio...)

Interface et concepts clés

Concept Figma	Équivalent Angular/HTML	Description
Frame	`<div>` conteneur	Zone de dessin avec contraintes de taille
Component	Composant Angular	Élément réutilisable avec propriétés
Instance	Usage du composant	Copie liée au composant maître
Auto Layout	Flexbox / CSS Grid	Disposition automatique des enfants
Variant	`@Input()` du composant	États différents d'un même composant (hover, disabled...)
Style	Variables CSS / Design tokens	Couleurs, typographies, effets réutilisables
Page	Route Angular	Espace de travail distinct dans un fichier

Composants et Design System

Les composants Figma sont l'équivalent des composants Angular : créez-en un, instanciez-le partout. Modifier le maître met à jour toutes les instances.

Créer un composant bouton

1. Dessiner un rectangle + texte "Primaire"
2. Sélectionner l'ensemble → Cmd/Ctrl+Alt+K → "Create Component"
3. Renommer : "Button/Primary"

4. Ajouter des variantes (clic droit → "Add Variant") :
   - Button/Primary/Default
   - Button/Primary/Hover
   - Button/Primary/Disabled
   - Button/Secondary/Default
   ...

5. Les variantes correspondent aux états CSS :
   .btn-primary           → Default
   .btn-primary:hover     → Hover
   .btn-primary:disabled  → Disabled

Design Tokens avec Tokens Studio (plugin)

// Plugin Tokens Studio for Figma → exporte les tokens en JSON
// Exemple de sortie tokens.json :
{
  "color": {
    "primary": { "value": "#3b82f6", "type": "color" },
    "text": {
      "default": { "value": "#1f2937", "type": "color" }
    }
  },
  "spacing": {
    "sm": { "value": "8", "type": "spacing" },
    "md": { "value": "16", "type": "spacing" }
  },
  "fontSizes": {
    "base": { "value": "16", "type": "fontSizes" }
  }
}

// Conversion en variables CSS Angular via Style Dictionary
// ou intégration directe dans les fichiers SCSS du projet

Auto Layout pour des UI réactives

Auto Layout transforme un Frame Figma en conteneur Flexbox. C'est la fonctionnalité la plus importante pour créer des designs qui correspondent au comportement réel du HTML/CSS.

Raccourci : Shift+A sur une Frame (ou bouton "+" dans la sidebar droite)

Options Auto Layout :
  Direction   : Horizontal (flex-direction: row) ou Vertical (column)
  Gap         : gap entre les enfants
  Padding     : padding interne (top, right, bottom, left)
  Alignment   : justify-content + align-items
  Wrap        : flex-wrap (nouveau dans Figma 2023)
  Min/Max W   : min-width, max-width sur les enfants

Correspondance CSS :
  Figma "Fill container"  → flex: 1 (ou width: 100%)
  Figma "Hug contents"    → width: fit-content
  Figma "Fixed width"     → width: 240px (valeur fixe)

Règle d'or : Utilisez Auto Layout pour tous vos composants dès le début. Un design sans Auto Layout génère des specs CSS qui ne fonctionnent pas en responsive et allonge considérablement le temps de développement Angular.

Prototypage et interactions

Figma permet de créer des prototypes cliquables sans écrire une ligne de code — idéal pour valider les flows utilisateurs avant de commencer le développement Angular.

// Créer une interaction :
1. Sélectionner un élément (bouton, carte...)
2. Aller dans l'onglet "Prototype" (sidebar droite)
3. Tirer une flèche vers la Frame cible
4. Configurer le déclencheur :
   - On Click → navigation page
   - On Hover → afficher tooltip
   - After Delay → animation automatique
   - Mouse Enter/Leave → effets hover

// Présenter le prototype :
Cmd/Ctrl+Alt+Enter → mode présentation
Partager l'URL → les stakeholders naviguent sans compte Figma

Animations avec Smart Animate

// Smart Animate : Figma interpole automatiquement entre deux frames
// Conditions pour que Smart Animate fonctionne :
// - Les layers ont le MÊME NOM dans les deux frames
// - Les propriétés changent (position, taille, opacité, rotation)

// Exemple : animation d'ouverture d'un modal
Frame 1 → opacity: 0, scale: 0.8
Frame 2 → opacity: 1, scale: 1
Interaction : On Click → Smart Animate → 200ms ease-out

Collaboration en temps réel

Partager un fichier

// Partage depuis Figma :
Bouton "Share" (haut droite) → 3 modes :
  1. "Can view"   → stakeholders, clients (lecture seule)
  2. "Can edit"   → designers (modification)
  3. "Can comment" → reviewers (annotations uniquement)

// URL publique (sans compte Figma requis) :
https://www.figma.com/proto/<fileKey>/<fileName>?node-id=<nodeId>

Commentaires et annotations

// Raccourci : C → mode commentaire
// Cliquer sur n'importe quel élément pour annoter

// Usage en équipe :
// - Designer → "La couleur du bouton doit être #3b82f6"
// - Dev       → "@designer Quelle taille en mobile ?"
// - PO        → "✅ Validé en sprint review"

// Les commentaires sont résolus (√) une fois pris en compte

Handoff développeur (Inspect)

Le panneau Inspect de Figma est votre traducteur design → code. Sélectionnez n'importe quel élément et obtenez immédiatement les valeurs CSS.

// Sélectionner un élément → onglet "Inspect" (sidebar droite)
// Informations disponibles :

Dimensions :
  width: 320px  height: 48px

Spacing :
  padding: 12px 24px

Typography :
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.02em;

Colors :
  background: #3b82f6
  color: #ffffff

Border :
  border-radius: 8px

Shadow :
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1)

// Export des assets :
// Sélectionner l'élément → "Export" en bas du panneau
// Formats disponibles : PNG, SVG, JPG, PDF, WebP

Figma to CSS automatique (Dev Mode)

Dev Mode (plan payant) affiche directement le CSS, les tokens et les snippets de code des frameworks (React, Angular, Swift...) pour chaque composant. Il permet aussi de voir les différences entre versions du design.

Plugins utiles

Plugin	Usage
Iconify	100k+ icônes SVG directement dans Figma (Material, Lucide, Heroicons...)
Unsplash	Photos libres de droits en un clic pour remplir les maquettes
Tokens Studio	Gestion des design tokens + sync GitHub
Figma to HTML	Export HTML/CSS approximatif depuis les frames Figma
Contrast	Vérification WCAG AA/AAA du contraste des couleurs
Autoflow	Création automatique de flèches de flow UX
Lorem ipsum	Remplissage automatique de faux textes

Figma et Angular : workflow design-to-code

Un bon workflow Figma → Angular réduit les allers-retours entre design et développement et garantit une fidélité maximale entre la maquette et le produit final.

Workflow recommandé

1. DESIGN  →  Designer crée les composants Figma avec Auto Layout + Variants
2. TOKENS  →  Tokens Studio exporte les design tokens (couleurs, typographie, spacing)
3. import  →  Développeur importe les tokens dans Angular (SCSS variables ou CSS custom props)
4. INSPECT →  Dev consulte le panneau Inspect pour les valeurs CSS précises
5. BUILD   →  Dev crée les composants Angular en miroir des composants Figma
6. REVIEW  →  Comparaison côte à côte maquette / rendu navigateur

Intégrer les design tokens dans Angular (SCSS)

// styles/_tokens.scss
// Variables générées depuis Tokens Studio
:root {
  --color-primary:     #3b82f6;
  --color-text:        #1f2937;
  --color-background:  #ffffff;

  --spacing-sm:        8px;
  --spacing-md:        16px;
  --spacing-lg:        24px;

  --font-size-base:    16px;
  --font-size-lg:      20px;
  --border-radius-md:  8px;
}

// Utilisation dans un composant :
// button.component.scss
.btn {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-primary);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-base);
}

Figma Code Connect (Angular)

// Code Connect lie les composants Figma aux composants Angular
// Permet d'afficher le code Angular réel dans le Dev Mode Figma

// figma.config.json
{
  "codeConnect": {
    "parser": "html",
    "include": ["src/**/*.figma.ts"]
  }
}

// button.figma.ts
import figma, { html } from '@figma/code-connect/html';

figma.connect('https://figma.com/file/...?node-id=...', {
  props: {
    variant: figma.enum('Variant', {
      primary:   'primary',
      secondary: 'secondary'
    }),
    label: figma.string('Label'),
    disabled: figma.boolean('Disabled')
  },
  example: ({ variant, label, disabled }) => html`
    <button
      class="btn btn-${variant}"
      [disabled]="${disabled}"
    >
      ${label}
    </button>
  `
});

Conclusion

Figma est devenu l'outil standard du design d'interfaces web et mobiles — la collaboration temps réel, les composants réutilisables et le handoff développeur intégré en font un partenaire indispensable de tout projet Angular sérieux.

🧩 Composants + Variants — mirror exact des composants Angular
📐 Auto Layout — designs responsives qui se traduisent directement en Flexbox
🔍 Inspect — valeurs CSS précises pour chaque élément
🔗 Code Connect — lier les composants Figma au code Angular réel
🎨 Design Tokens — cohérence design/code grâce à des variables partagées

Plan gratuit : Le plan gratuit Figma permet 3 projets avec un nombre illimité de collaborateurs en visualisation — largement suffisant pour démarrer un projet Angular en solo ou en petite équipe.