Introduction aux Design Systems avec Figma
A course by Javier CuelloConcepteur UX
A course by Javier Cuello, Concepteur UX
Apprenez à créer des systèmes de conception qui répondent aux besoins de vos utilisateurs
Derrière chaque interface, il y a une série de détails apparemment invisibles qui peuvent déterminer la direction de votre marque, entreprise ou produit. En intégrant les outils Design Systems à votre projet, vous pouvez vous assurer que votre interface est compatible avec tous les membres de votre équipe et qu'elle fonctionne de manière intuitive.
Dans ce cours, Javier «Simón» Cuello, un concepteur spécialisé dans les expériences utilisateur, vous aidera à construire l'interface d'un site Web, d'une manière organisée, cohérente et cohérente qui répond aux besoins réels de vos utilisateurs et clients.
Nous vous recommandons de consulter également les autres cours de Javier chez Domestika: Conception d'interface avec Sketch et Concevez une délicieuse application .
Qu'allez-vous apprendre dans ce cours en ligne ?
24 leçons & 39 vidéos téléchargées
Que ferons-nous pendant le cours?
4 minutes, 34 secondes
Avantages pour vous et votre équipe de travail
7 minutes, 48 secondes
Parties d'un système
6 minutes, 24 secondes
Identifier le contexte
7 minutes, 1 seconde
Penser les principes de conception
7 minutes, 45 secondes
Guide de style 1
13 minutes, 49 secondes
Que comprend ce cours ?
Vous commencerez ce cours en apprenant à connaître Javier, ses projets et ses influences tout au long de sa carrière, ainsi qu'une introduction aux principaux concepts de Design Systems.
Ensuite, vous découvrirez les avantages de Design Systems pour vous et votre équipe, et vous verrez toutes les pièces qui composent un système, y compris: les principes de votre conception, le guide de style, les éléments lâches et les composants de l'interface, le référentiel du code et de la documentation.
Javier vous apprendra à identifier la finalité de votre système en fonction du contexte du produit et vous montrera comment utiliser les critères qui guident votre conception pour établir les stratégies de votre projet. Cela vous aidera à créer un guide de style définitif pour votre interface.
Mets-toi au travail! À l'aide du logiciel Figma, vous concevrez les différents éléments, composants, motifs et prototypes de l'écran principal dans différents formats.
Pour conclure, vous travaillerez avec les éléments de communication et de collaboration afin que votre système de conception ait une évolution maîtrisée et supporté par tous les membres de l'équipe.
Javier vous apprendra l'importance des Design Tokens et comment documenter l'évolution de votre système. Il vous montrera comment différencier un travail en cours de celui déjà terminé et vous conseillera sur la façon de travailler avec les différents profils au sein d'une équipe.
Recommended software & tools for this course
What is this course's project?
Vous concevrez la page principale d'un site Web de voyage, en 3 tailles différentes.
Projets d'élèves du cours
Who is this online course for?
Pour les concepteurs d'interfaces qui souhaitent créer une conception organisée, cohérente et cohérente pour les sites Web et les applications.
Requirements and materials
Vous devez avoir une compréhension de base de Figma, y compris la création de styles, de composants et de fonctionnalités de mise en page automatique, ainsi qu'une familiarité avec la conception d'interface.
En ce qui concerne les matériaux, vous aurez besoin d'un ordinateur avec le logiciel Figma installé. Ce cours a été créé avec Figma 116.3.6. Si vous disposez d'une version plus récente, vous pourrez suivre le contenu sans aucun problème.
Avis
- il y a 2 mois
very nice overview and introduction to design systems. so far so good.
- il y a 3 mois
Até o momento, muito interessante. Vários insights interessantes e pontos de atencao negligenciados muitas vezes.
- il y a 4 mois
Il corso offre una panoramica abbastanza completa. Purtroppo però la traduzione audio in italiano (e di conseguenza i sottotitoli, che corrispondono perfettamente alla traduzione audio) è davvero pessima. Ci sono troncamenti di frasi e parole/traduzioni insensate che rendono dei passaggi pressoché incomprensibili. Questo compromette notevolmente la qualità del corso per chi ne usufruisce in altra lingua.
- il y a 6 mois
Very insightful!
- il y a 9 mois
Un curso bastante completo, me sirvió para reafirmar mis conocimientos en DS. Lo recomiendo mucho si estas empezando en el mundo de los sistemas de diseño.
Ce qui se reflète dans leur travail est le souci constant d'améliorer des détails apparemment invisibles, mais qui permettent à un projet numérique de briller au niveau de l'expérience utilisateur.
Contenu
- U1
introduction
- Présentation
- Les influences
- Que ferons-nous pendant le cours?
- U2
Systèmes de conception
- Avantages pour vous et votre équipe de travail
- Parties d'un système
- U3
Les bases de votre système de conception
- Identifier le contexte
- Penser les principes de conception
- Guide de style 1
- Guide de style 2
- U4
Conception du système
- Éléments 1
- Éléments 2
- Éléments 3
- Conception des composants 1
- Conception des composants 2
- Conception des composants 3
- Conception des composants 4
- Composants supplémentaires
- Motifs
- Écrans 1
- Écrans 2
- U5
Communication et collaboration
- Jetons de conception
- Comment documenter le système
- Modifications et mises à jour
- Équipes de travail
- PF
Projet final
- Introduction aux systèmes de conception avec Figma
Ce qu’il faut attendre d’un cours Domestika
Apprenez à votre rythme
Apprenez chez vous, sans horaires fixes et à votre rythme. C’est vous qui décidez de votre programme d’apprentissage.
Apprenez auprès de grands noms du secteur créatif
Apprenez les techniques et les méthodes les plus utiles auprès des meilleurs professionnels du secteur créatif.
Rencontrez des spécialistes reconnus
Dans chaque leçon, votre professeur vous transmettra ses connaissances avec enthousiasme, vous donnera des explications claires et vous fera bénéficier de son expertise.
Certificates
PLUSIf you're a Plus member, get a certificat personnalisé signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Soyez aux premières loges
Profitez de vidéos de haute qualité pour ne manquer aucun détail. Grâce à un accès illimité, vous pourrez les regarder autant de fois que nécessaire pour perfectionner vos compétences.
Partagez vos connaissances et vos idées
Posez des questions, demandez des avis ou suggérez des solutions. Partagez votre expérience d’apprentissage avec les autres élèves de la communauté qui ont, comme vous, une passion pour la créativité.
Rejoignez une communauté créative internationale
Cette communauté réunit plus de huit millions de personnes des quatre coins du monde, curieuses et passionnées, avec cette même envie de développer et d’exprimer leur créativité.
Assistez à des cours de haute qualité
Domestika sélectionne les professeurs avec soin et produit chaque cours en interne afin de garantir une expérience d’apprentissage en ligne de qualité optimale.
Foire aux questions
Un design system est un ensemble de composants, guides et patterns qui garantissent cohérence et efficacité dans les produits digitaux. Il facilite la collaboration, réduit les erreurs et accélère le développement, devenant un atout clé pour les équipes cherchant une harmonie visuelle et fonctionnelle.
Oui, ce cours s’adresse à ceux qui ont déjà des bases en design, idéalement à un niveau intermédiaire, et qui souhaitent approfondir la création et la gestion de design systems pour des produits digitaux.
Il est conseillé d’avoir une expérience de base en design digital et la maîtrise d’outils comme Figma. Des connaissances sur les composants, interfaces et principes de design permettront de mieux profiter du contenu.
Vous apprendrez à créer et gérer des design systems, définir des composants réutilisables, documenter les principes de design, optimiser les workflows et maintenir la cohérence visuelle au sein des équipes et produits digitaux.
Le cours enseigne comment appliquer les principes de Dieter Rams pour concevoir des interfaces fonctionnelles, intemporelles et minimalistes, en privilégiant la simplicité et l’équilibre entre forme et fonction.
Les outils principaux sont Figma pour le design et la création de composants, et ZeroHeight pour documenter les guides de style et principes, facilitant la collaboration et l’accès aux informations du système.
Oui, vous apprendrez à structurer et documenter composants, principes et guides de style avec des outils collaboratifs, garantissant une adoption et un maintien efficaces du système par toute l’équipe.