Design systems pour sites internet sur Figma
A course by Filip FelbarDesigner digital
A course by Filip Felbar, Designer digital
Découvrez le prototypage de design system pour créer des sites internet au visuel unique avec Figma et maximisez votre flux de travail
Ayant travaillé dans plusieurs domaines créatifs, le designer numérique Filip Felbar sait à quel point un manque de structure peut causer des problèmes. Son processus est dédié à structurer et à rendre les choses plus faciles et plus accessibles. C'est là qu'interviennent les systèmes de conception. Un système de conception est une bibliothèque collective qui rassemble tous les éléments nécessaires à une équipe pour planifier, réaliser et développer un produit de manière efficace et conforme à sa marque. Il peut contenir tout, des directives de style aux informations de codage.
Dans ce cours en ligne, Filip partage avec vous ce que sont les systèmes de conception et son approche pour les développer et les recycler. Apprenez également à naviguer efficacement dans les outils de Figma pour créer des systèmes de conception numérique pour les sites Web. Explorez les composants globaux et la mise en page automatique pour accélérer votre processus !
Qu'allez-vous apprendre dans ce cours en ligne ?
22 leçons & 23 vidéos téléchargées
Introduction aux systèmes de conception
6 minutes, 58 secondes
Comment les systèmes de conception peuvent vous aider à accélérer votre flux de travail
8 minutes, 0 secondes
Présentation du projet et de l'approche
6 minutes, 36 secondes
Configuration du fichier Figma et début des premières explorations 1
18 minutes, 40 secondes
Configuration du fichier Figma et début des premières explorations 2
16 minutes, 19 secondes
Extension du système d'explorations et de conception 1
19 minutes, 36 secondes
Que comprend ce cours ?
Commencez par rencontrer votre professeur, Filip Felbar. Il partage son parcours dans le design numérique et ses inspirations.
Ensuite, découvrez les systèmes de conception avec lesquels vous travaillerez et les avantages qu'ils offrent. Filip vous présente quelques exemples rapides de la manière dont les composants et les styles globaux peuvent être mis à jour efficacement avant d'examiner le projet que vous aborderez dans ce cours.
Ensuite, commencez à préparer votre contenu avec Figma. Faites une liste de contrôle des éléments à inclure et configurez les éléments initiaux et globaux. Explorez les directions de conception et plongez dans la mise en page automatique, en mettant à jour les composants et les styles au fur et à mesure.
Ensuite, affinez votre système avec une page assemblée, créez-en une nouvelle avec la version terminée et écrivez les directives pour l'utiliser.
En prime, Filip partage son processus de création d'éléments de marque supplémentaires pour les médias sociaux.
À la fin du cours, vous serez en mesure de penser de manière structurée, ce qui vous aidera à donner vie à vos projets créatifs et à accélérer votre flux de travail.
Recommended software & tools for this course
What is this course's project?
Apprenez à créer une conception de site Web visuellement attrayante et un système de conception organisé avec la documentation appropriée.
Projets d'élèves du cours
Who is this online course for?
Toute personne souhaitant en savoir plus sur les systèmes de conception et la conception Web.
Requirements and materials
Figma ou un outil similaire.
Une expérience antérieure avec Figma profitera aux étudiants.
Avis
- il y a 2 mois
Es un curso apto para principiantes, ayuda a potenciar tus conocimientos en figma
- il y a 2 mois
Muy buen curso, bien explicado paso a paso, vale la pena!
- framantebPLUSil y a 5 mois
muy malo realmente
- il y a 5 mois
Comenzó bien, muy inspirador. Pero finalmente resulta tedioso... una gran parte es acompañar al tutor en su propio proceso y resulta un poco narcotizante. Y de lo que me gustaría haber escuchado, como la organización de variables, foundations o variantes mobile, no hay contenido.
- il y a 7 mois
Me falto más información pero si lo básico te lo da, si vas empezando está muy bien
Contenu
- U1
Introduction
- Présentation
- Mes sources d'inspiration
- U2
Systèmes de conception
- Introduction aux systèmes de conception
- Comment les systèmes de conception peuvent vous aider à accélérer votre flux de travail
- Présentation du projet et de l'approche
- U3
Le processus de conception web et système
- Configuration du fichier Figma et début des premières explorations 1
- Configuration du fichier Figma et début des premières explorations 2
- Extension du système d'explorations et de conception 1
- Extension du système d'explorations et de conception 2
- Organisation des pages design system 1
- Organisation des pages design system 2
- Exploration de variantes lors de la création de composants
- U4
Affiner le site web et le système de conception
- Affiner le système de conception avec une page assemblée 1
- Affiner le système de conception avec une page assemblée 2
- Affiner le système de conception avec une page assemblée 3
- Configuration de nouvelles pages avec le système de conception complet 1
- Configuration de nouvelles pages avec le système de conception complet 2
- Configuration de nouvelles pages avec le système de conception complet 3
- Comment aborder la création de documentation pour le système de conception
- U5
Conclure et aller au-delà du web
- Nettoyer et utiliser une mise en page automatique
- Utilisation du design sur d'autres éléments de la marque
- Dernières pensées
- PF
Projet final
- Design systems pour sites internet sur 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 système de design est un ensemble de composants réutilisables, de directives et de normes qui facilitent le web design, garantissent la cohérence de la marque et simplifient la collaboration. Utiliser un système de design fait gagner du temps, évite les tâches redondantes et améliore la scalabilité des projets numériques.
Ce cours s'adresse aux designers de niveau intermédiaire qui ont une compréhension de base des principes du web design et des outils comme Figma. Une expérience avancée n'est pas nécessaire, mais une certaine familiarité avec le design numérique ou les notions de front-end est un plus.
Vous aurez besoin d'accéder à Figma, car le cours montre comment créer et gérer un système de design dans cette plateforme. Une connaissance de Notion pour organiser les projets est recommandée, mais aucun codage ni logiciel avancé n'est requis.
Vous apprendrez des stratégies pour structurer vos projets de design, créer des checklists de contenu, gérer les ressources et utiliser des outils collaboratifs pour garder un flux de travail efficace et organisé, adapté aux projets web évolutifs.
Le cours couvre la création, la nomination et la gestion des composants réutilisables, l'application des styles globaux et la documentation des workflows dans Figma pour assurer cohérence et efficacité à travers les projets.
Oui, le cours enseigne des techniques de documentation, des processus standardisés et des workflows basés sur les composants qui fluidifient la collaboration et aident les équipes à maintenir la qualité et la cohérence du design.
Vous développerez des compétences pratiques pour organiser et appliquer la typographie, configurer des grilles de mise en page et établir des hiérarchies typographiques afin de créer des interfaces web visuellement structurées et accessibles.