Par Mylène Dreyer, modifié le 24 août 2026 ERACOM — S5 — Classe ID441 [email protected]



Description

Ce dernier cours de design d’interfaces traite de la constitution de Design Systems. A travers plusieurs exemples existants, nous verrons ce qu’est un design system, à quoi il sert et à qui il est utile.

Techniquement, ce cours va aller en profondeur dans les outils Figma indispensables à la création de design system : Color Style, Text Style, Autolayout et Components Propertites.

Objectifs

A la fin du semestre, vous saurez:

<aside> 💁 Expliquer ce qu’est un design system, ce qu’il contient, à quoi il sert et dans quel contexte.

</aside>

<aside> 📱 Utiliser des design system existants pour prototyper rapidement des visuels

</aside>

<aside> ⚙ Créer un design system cohérent, documenté, avec des composants réutilisables.

</aside>

<aside> 📦 Penser vos documents en vue du “Design-to-Development handoff”

</aside>


Projets

Cours 1 — 20.08 — Intro

Projet 1 — Figma System

Théorie

Design System.pdf

Atomic Design.pdf

Source: https://atomicdesign.bradfrost.com/chapter-2/

Calendrier

Cours Contenu Théorie Commentaire
19 aoû. 1 Intro du cours Design System
26 aoû. 2 Consignes projet 1 Atomic Design
02 sep. 3
09 sep. 4
16 sep. 5
23 sep. 6 Consignes projet 2 Component properties Rendu Projet 1, début du cours
30 sep. 7
07 oct. 8
14 oct. - Vacances
21 oct. - Vacances
28 oct. 9
04 nov. 10
11 nov. 11 Consignes projet 3 Rendu Projet 2, début du cours
18 nov. 12
25 nov. 13
02 déc. 14
09 déc. 15
16 déc. 16 Rendu du projet 3, fin du cours
23 déc. 17
30 déc. - Vacances
06 jan. - Vacances
13 jan. 18
20 jan. 19

Ressources