In the file : Tokens, variables & design system multi-marques
HTML-код
- Опубликовано: 21 апр 2024
- Nouveau sur Figma ? Inscrivez-vous gratuitement : bit.ly/3msp0OV
Déjà sur Figma ? Contactez un membre de l'équipe pour en savoir plus sur les plans Organisation, Entreprise et Dev Mode : bit.ly/4apWMNW
Dans ce livestream, les équipes de Groupe BPCE expliquent comment elles répondent aux besoins d'un groupe bancaire multi-marques avec Neo, un Design System sémantique mis en place dès 2017 et aujourd'hui à sa 3e itération. Elles y présentent notamment tout le travail pionnier fait sur les design tokens avant l'arrivée des variables, et comment différentes solutions d'automatisation leur permettent à présent de simplifier à l'extrême la gestion de librairies multi-thèmes dans Figma.
01:43 - Introduction
04:41 - Présentation du Design System Neo
10:08 - La création de design tokens sémantiques
20:17 - La mise en place des variables Figma
28:34 - Automatiser les workflows entre code et variables
39:11 - Mettre à jour et tester dans Figma
43:03 - Prochaines étapes de migration
48:00 - Questions
____________________________________________________
Retrouvez-nous sur ⬇️
X (anciennement Twitter) : / figma
Instagram : / figma
LinkedIn : / figma
Forum Figma : forum.figma.com/
____________________________________________________
#Figma #Config #Design #DesignSystems #Variables #DesignTokens #NothingGreatIsMadeAlone 
Наука
Omgeee! This needs to be in english
Ouah ! Le travail est impressionnant ! C'est très intéressant de voir comment il est possible d'uniformiser plusieurs marques. Bravo pour toute l'organisation et le travail que cela doit demander. Merci pour ce partage !
Auto-translate helped me a lot to grasp these concepts 👍🏽
Why is French on a non-localized channel? AI translation of audio would be the very least you could do.
Very much so!
Indeed, some advanced AI systems can handle translations well.
Perhaps soon, they'll be able to assist. In the meantime, you can try using the RUclips English subtitles, though they're not always perfect and can be quite entertaining at times!
Very much agree. I feel that they don't have a holistic approach to their yt channel yet and do a lot of experimentation. The playlists are a bit messy and not all content is very well organised in playlists. But I hope they get it straight soon :)
why does this tutorial use French
Apologies, we're French, but the slides are in English. You can try using the RUclips English subtitles, though they're not always perfect and can be quite entertaining at times!
you have to change variable modes to English
Bravo. Beau boulot. Est-ce que vous appliquez des modes "devices" (dans une collection différente) pour varier le padding/margin/gap avec des tokens de size pour adapter un component d'un device mode à un autre?
Oui, on n’a pas eu le temps de parler de tout, mais notamment pour les variables de typographies, récemment ajoutées à Figma, nous avons une troisième collection pour les Devices (Mobile/Desktop). Les variables sont rattachées aux styles, comme cela, on peut en changeant de collection modifier les styles qui eux s’appliquent au texte. Cela peut sembler compliqué, mais c’est relativement simple à gérer et le lien entre variable et style est très pratique. Notamment pour la migration de la libraire qui nous a permis de passer tous nos styles typographiques en variables et ainsi de réduire leur nombre de moitié.
I'm coming!
Do not mislead the viewers with a title in a different language!
Hi Justina, thank you for your comment, and I'm sorry for any frustration caused. In both French and English, the terms "tokens" and "variables" are used in the same way. The term "multi-marques" is specific to French and translates to "multi-brand" in English. I assure you there was no intention to mislead. 🤷♂
UX left the room ...
Oh please shut up. Another UX-Doofus being arrogant, how strange.