Figma to Webflow : Comment préparer son Design System ? [Partie 1 Figma]
Вставка
- Опубліковано 14 жов 2024
- Un Design System est essentiel pour :
1) Mettre le design et le développement à l'échelle dans votre organisation
2) Assurer une intégration facile de vos maquettes vers la phase de développement web
3 ) Mieux collaborer avec toutes les équipes
4) Uniformiser vos process de design
5) Gagner du temps dès la phase de conception
Et le 7 novembre 2023 à 12:00, découvrez la première partie de cette nouvelle série co-animé par Thomas et Florian, fondateurs de l'agence Digidop, reconnue internationalement par la distinction Webflow Professional Partner of the Year en 2023.
🔥 Au programme :
→ Qu'est-ce qu'un Design System ?
→ Qui est concerné et quand le mettre en place ?
→ [Part 1] Focus sur la création d'un Style Guide dans Figma
→ Q&A
En résumé, un nouveau Live Build à ne pas manquer!
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
// TEMPS FORTS
Programme 01:58
Présentation 02:52
Qu'est-ce qu'un Design System ? 04:16
Focus sur la création du Style Guide Figma 11:20
FAQ & Conclusion 59:45
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
// RESOURCES
Figma : psxid.figma.co...
Figma Template : www.figma.com/...
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
// ABOUT US
Digidop est la première et seule agence webflow française à être triplement accréditée : Webflow Expert, Client-First et Webflow Global Leader.
👀 Digidop : www.digidop.fr/
🛍️ Acheter le Merch' digidop : store.digidop.fr/
🎨 Formation Webdesign sur Figma gratuite : academie.digid...
👨🏻💻 Reach Thomas :www.digidop.fr...
🧑🏼💻 Reach Flo : www.digidop.fr...
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
// FOLLOW US
Instagram : / digidop.fr
TikTok : / digidop.fr
LinkedIn : / digidop
Webflow Expert : webflow.grsm.i...
Behance : www.behance.ne...
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
// HASHTAGS
#designsystem #figma #process
![Mastering WEBFLOW STYLE GUIDES [Figma to Webflow Step by Step]](http://i.ytimg.com/vi/Uc0dGZb937s/mqdefault.jpg)
Génial!! Merci beaucoup pour toutes ces pépites :)
Avec plaisir !! Merci pour le message 🤩🤩
Merci beaucoup. Très complêt et très bien expliqué en français. En plus il y a les ressources. Bravo.
Merci pour ce retour ! 🤩🤩 Rendez-vous pour la partie 2 alors 😊
Merci à tous d'être venus 💛
Nous avons rencontré quelques soucis de son pendant ce live (surtout à la fin) - nous travaillons sur leur correction pour les futurs lives 🎙
Un grand grand merci pour ce contenu de qualité et ce partage !
Avec plaisir, merci pour ton message !
Merci pour la vidéo....Super encore et tres clair....Eclaire bien la difference entre le style guide et le design system....Le thème de la migration de figma à webflow peut etre aussi super instructif...😁
Merci pour ce retour ! 🤩
Nous aborderons la migration du Style Guide Figma vers Webflow dans un prochain Live 😊
Hello merci pour le live. Où puis-je retrouver la partie 2 ?
Hello, voici le lien de la partie 2 du live sur le Design System - qui fait un focus sur Webflow cette fois-ci : ua-cam.com/users/liveHTSOSOIXwtM?si=GV6CukSFfXSkJCRs
Merci de nous suivre et à bientôt sur la chaîne ! ✌️
À quand un tuto pour Apprendre à créer un design sytem : 0.0 Design Système
Merci pour le message, c'est noté pour les prochaines vidéo ! A suivre sur la chaîne .. 😉
D'ici là, voici un lien vers notre formation Design System sur la Digidop Académie : academie.digidop.fr/formations/figma/0-0-design-system
Mais peut-être l'as-tu déjà regardé, au vu de ton message 😊
Tres sympa ! Attention la c'est plus un ui kit et non un design system.
C'est composé normalement de :
Typographie
Couleurs
Icônes
Grid System
Composants d'interface :
Boutons
Formulaires
Cartes
Modales
Barres de navigation
Pieds de page
etc.
Guidelines : Règles sur comment utiliser le composant et pourquoi
Images et Médias : Directives sur l'utilisation d'images, de vidéos, etc.
Animation : Principes d'animation et transitions.
Logo et Identité Visuelle : Utilisation correcte du logo et des éléments d'identité de la marque.
Accessibilité : Directives pour rendre le design accessible à tous les utilisateurs, y compris ceux ayant des besoins spéciaux.
Documentation : Des guides et des documents pour expliquer comment utiliser le design system.
Design principe et tone of voice : Consignes pour la rédaction de contenu, y compris le ton, le style, et la voix.
Responsive Design : Consignes pour la conception et le développement adaptatif.
Versioning : Système de gestion de version pour suivre les évolutions du design system.
UI Patterns : Modèles de conception spécifiques récurrents.
Exemples cool:
Engie, decathlon....
Merci pour ton commentaire ! 😊 Tu as parfaitement raison, et c'est pour cela que nous avons consacré cette première partie à la création du Style Guide dans Figma, une des composantes essentielles du Design System.
Difficile de tout couvrir en une heure malheureusement, mais nous traiterons ces autres notions (Components Library, Patterns Library, Documentations, etc.), dans un prochain live.
Décathlon est un excellent exemple de Design System conçu avec @zeroheighthq, et nous le présenterons très probablement, en effet ! 😊