Тёмный

Master Figma Variables: Set Up a Multi-Brand Design System 

UI Collective
Подписаться 8 тыс.
Просмотров 6 тыс.
50% 1

In this tutorial, dive into the world of multi-brand design systems as we guide you through the process of setting up a powerful multi-brand design system using Figma variables with a miniature design system build.
*I apologize for some small audio errors early in the video. My mic went astray and I have been unable to edit them out
Join the community: www.uicollective.co/
Dark mode video referenced: • Figma Variables: Build...
Request an audit of your design system: www.uicollective.co/design-sy...
----
Looking for feedback on my Portfolio tool passion project: www.portfoliopro.io/
--
0:00 An Introduction
0:29 Lesson Brief
1:37 Brand Coke Collection Setup
7:15 Brand Sprite Collection Setup
12:12 Alias Collection Setup
22:28 Mapped Coke Collection
29:49 Mapped Diet Coke Collection
35:20 Mapped Sprite Collection
41:35 Applying Variables

Опубликовано:

 

15 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 26   
@ChristianoPinto
@ChristianoPinto 7 дней назад
Even though the "Mapped" collection for each brand makes it nice and neat the experience of switching different modes within a brand, the issue is that you must duplicate all your design tokens when doing Mapped/Coke, or Mapped/Coke_Diet etc. Therefore, if you delete one alias/mapped token in one place, you must make sure you delete it everywhere and ofc it also applies when adding new tokens. So in my opinion, in the end, this doesn't differ much from maintaining the same design tokens but in different BRAND FILES (e.g. Sprite DS, Coke Diet DS or Coke DS). In this approach, you still must import/recreate the same list of variables you have in your master, but you do it locally in the Sprite DS file, for example. The advantage here is that you don't need a Mapped collection, which basically exists just to make this workaround. With the local tokens that were copied/recreated from the master naming convention, you can be more straighforward and create Light x Dark in the first level of variables collection.
@UICollectiveDesign
@UICollectiveDesign 2 дня назад
Great comment and also another great approach :)
@NomNomCactus
@NomNomCactus 3 месяца назад
I was waiting for this video! Thanks!!
@UICollectiveDesign
@UICollectiveDesign 3 месяца назад
Sweet! Happy to help :) Please like, subscribe, and share our channel where you can
@porushpuri
@porushpuri 3 месяца назад
wow, very insightful. thanks for creating this.
@UICollectiveDesign
@UICollectiveDesign 3 месяца назад
No problem :) Please subscribe and share our channel :)
@Underhills
@Underhills Месяц назад
Great demo as always. When watching this the need of batch actions in Figma is apparent. Should be a function called "same as former" in the mode tables, or just a pre-filled row with all the properties from the former mode table, so if you only need to edit one of the values it could be a huge timesaver. Batching other stuff like autolayout props to many frames simultaneously would also be neat. Hope someone from Figma is taking notes.
@UICollectiveDesign
@UICollectiveDesign Месяц назад
100% agree. The process of creating variables and modes could be streamlined. Half the battle is recreating what you've already added!!
@j4fl929
@j4fl929 2 месяца назад
Really Informative and nice video please keep it up! Could you please explain to me the difference between alias and mapped ? English isn't my first language so I find it a bit confusing.( idek if it has smth to do with lang )
@UICollectiveDesign
@UICollectiveDesign 2 месяца назад
I would watch our video: Master Figma Tokens & Variables: Ultimate Guide to Advanced Naming and Set Up! It goes through this in-depth
@cp3onmtv963
@cp3onmtv963 3 месяца назад
Really appreciating the consistent AND relevant content!! Cant lie, Im really missing the purpose of the 'mapped' variables you suggest in your systems videos. Im struggling to figure out why ALIAS isnt enough. Is 'mapped' essentially your version of component specific components?? Ive watched all of these vids more times than I care to admit, every time I think I understand the purpose/value of 'mapped' I find myself wondering why that's necessary again...
@UICollectiveDesign
@UICollectiveDesign 3 месяца назад
Have you watched our 'Guide to Advanced Naming & Set Up' video?
@UICollectiveDesign
@UICollectiveDesign 3 месяца назад
I would take a look at this, as it goes through it more in-depth. If not, I can post a longer explanation here.
@cp3onmtv963
@cp3onmtv963 3 месяца назад
@@UICollectiveDesign thanks for getting back, and yes I have
@cp3onmtv963
@cp3onmtv963 3 месяца назад
@@UICollectiveDesign it actually may be good if you could post it here, this way myself and others can screen shot and paste in figma to reference the explanation when building their own system instead of trying to remember time stamps where a good point was made etc,
@UICollectiveDesign
@UICollectiveDesign 3 месяца назад
Okay just on the go right now will post a longer explanation when I can. @@cp3onmtv963
@diporko2486
@diporko2486 Месяц назад
Thanks for the video. 👏 Question: What if we need to make component-based tokens? Where should we put that? In Alias token? If yes why did we put radius token in Theme?
@UICollectiveDesign
@UICollectiveDesign Месяц назад
You can put them in Mapped :)
@rohancadney-moon7303
@rohancadney-moon7303 Месяц назад
Is there a way to sync your variables with Github without having to pay for the enterprise version of Figma?
@UICollectiveDesign
@UICollectiveDesign Месяц назад
Tokens Studio!
@user-tq1ny4jd7o
@user-tq1ny4jd7o 27 дней назад
You dont show how to apply a mode variable to the frame itself, how is that done? Thanks
@UICollectiveDesign
@UICollectiveDesign 26 дней назад
ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-xNk3QnuowKE.html I would watch this!!
@TheLinktolife
@TheLinktolife 2 месяца назад
Why are collections "Mapped/Diet Coke" and "Mapped/Sprite" created if the button uses "Mapped/Coke" and you just swap at the alias level?
@UICollectiveDesign
@UICollectiveDesign 2 месяца назад
Great question! Alias or theme swapping is good if the mapped variables are consistent (ie. action primary uses alias primary). But in some cases you might want to apply different theme colours to different mapped variables (ie. action primary uses alias secondary). We simply wanted to show both in this example.
Далее
Figma Variables Setup: Building a Variable Library
43:37
Create state in prototypes with variables
16:04
Просмотров 3,2 тыс.
Figma Type Variables | A Setup + Overview Guide
33:47
Просмотров 4,9 тыс.
Your First Design System in Figma (Beginner Tutorial)
14:57
Figma Variables vs Tokens Studio | Which to Use in 2024
11:25
How to Master Figma and Design 10X FASTER!
12:10
Просмотров 28 тыс.