Créez un Design System complet dans Figma avec les Design Tokens
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Créez un Design System complet dans Figma avec les Design Tokens

Olivier Krakus
Vente flash ! -52% Jusqu'au 04 avril, 17:10
12,00€24,99€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Objectif de la formation

Dans cette formation Figma, vous découvrirez comment concevoir un site web de A à Z en intégrant les bonnes pratiques de design moderne.
Nous partirons de la création des Design Tokens, pour construire un Design System complet, et aboutir à des maquettes prêtes à être intégrées.

Qu’est-ce qu’un Design Token ?

Un Design Token est une valeur stockée sous forme de variable (couleur, typographie, espacement, ombre, etc.), utilisée pour assurer la cohérence et la scalabilité d’un système de design. Grâce à eux, chaque élément de l’interface suit une nomenclature partagée, de la conception jusqu’à l’implémentation en ligne.
Ces tokens servent de briques fondamentales à la mise en place d’un Design System : une bibliothèque centralisée de composants et de styles pour gagner en efficacité et en clarté dans vos projets.

Au programme de ce tuto sur les Design Tokens et à la Création d’un Design System dans Figma

Au fil de cette formation orientée cas pratique, vous allez :

  • ✅ Prendre en main la nouvelle interface de Figma
  • ✅ Comprendre les bases de l’UX et de l’UI Design
  • ✅ Utiliser les outils essentiels de Figma
  • ✅ Créer et structurer des Design Tokens
  • ✅ Mettre en place un Design System réutilisable
  • ✅ Réaliser des maquettes fonctionnelles et les prototyper

Un QCM final vous permettra de valider vos acquis à la fin de la formation.
Besoin de précisions ou d’une vidéo complémentaire ? Une section d’entraide est là pour poser vos questions et échanger avec les autres apprenants.

Pour aller plus loin

Si vous souhaitez en apprendre plus sur Figma, découvrez ma formation complète.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Introduction
Chapitre 2
Le design token
Chapitre 3
Design system
Chapitre 4
Maquette
Chapitre 5
Prototypage
Chapitre 6
Conclusion

Plan détaillé du cours

Chapitre 1 : Introduction
02m55
 
Leçon 1Introduction
Leçon 2Avant propos
Chapitre 2 : Le design token
1h10
 
Leçon 1Intro chapitre 1
Leçon 2Appel du sujet et des ressources
Leçon 3Paramétrage de base
Leçon 4Le design token c'est quoi ?
Leçon 5Mise en place des tokens 1
Leçon 6Token de couleur
Leçon 7Token radius, opacity et shadow
Leçon 8Token spacing
Leçon 9Token typo
Leçon 10Tableau de variable
Leçon 11Variable ombre
Chapitre 3 : Design system
53m24
 
Leçon 1Introduction Design system
Leçon 2L'atomic design
Leçon 3Les bases de notre design system
Leçon 4Les icones
Leçon 5Liste à suivre
Leçon 6Les couleurs
Leçon 7Les textes
Leçon 8Atome
Leçon 9Importation du logo
Leçon 10Molecule
Leçon 11Composant
Chapitre 4 : Maquette
41m34
 
Leçon 1Introduction chapitre 3
Leçon 2Frame wireframe
Leçon 3Wireframe-zoning
Leçon 4Maquette 1
Leçon 5Maquette 2
Leçon 6Maquette 3
Chapitre 5 : Prototypage
12m34
 
Leçon 1Introduction prototypage
Leçon 2Prototypage bouton
Leçon 3Prototypage
Chapitre 6 : Conclusion
01m11
 
Leçon 1Conclusion

Aperçus

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Payer plus tard

Prix d'achat : 12,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1459 tutos gratuits

Notre politique de protection des données