Figma to Webflow : Comment préparer son Design System ? [Partie 1 Figma]

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

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

// 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.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

// FOLLOW US

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

// HASHTAGS

#designsystem #figma #process

[laurapandjatcharam]

Génial!! Merci beaucoup pour toutes ces pépites :)

[franckv]

Merci beaucoup. Très complêt et très bien expliqué en français. En plus il y a les ressources. Bravo.

[digidop]

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 🎙

[elbellajyahia]

Un grand grand merci pour ce contenu de qualité et ce partage !

[christophetoulouse]

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...😁

[NBNG-fjlv]

Hello merci pour le live. Où puis-je retrouver la partie 2 ?

[ryujigtr]

Bonjour j'aimerai m'associer avec un designer je suis developpeur web

[pierreantoine]

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....

[belondjobolankoko]

À quand un tuto pour Apprendre à créer un design sytem : 0.0 Design Système