Тёмный

Master Multi-Brand Design Systems with Figma Variables Sync in Tokens Studio 

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

Learn the different approaches to setting up a multi-brand design system in @TokensStudio that can sync to Figma Variables.
Apply to join our Slack design community: www.uicollective.co
Download the free version of our design system:
resources.uicollective.co/che...
Pre-register for the UIC Design System Linter plugin: www.uicollective.co/design-sy...
Email me video suggestions: hello@uicollective.co
Follow me on Twitter (X): / kirkmdesign
0:00 An Introduction
0:19 Types of Multi-Brand Design Systems
3:32 The Branded House Approach
11:09 Syncing with Variables
15:20 The House of Brands Approach
23:56 Outro

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

 

28 апр 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 29   
@tanyacequi6556
@tanyacequi6556 7 месяцев назад
Thanks for this! I think we need more videos like this one diving deeper on the Tokens Studio+ variables workflow for multi-brand and multi-color theme design systems that are required more frequently nowadays. I’m waiting for the UI collective Slack access approval 😊
@Silverjerk
@Silverjerk 7 месяцев назад
Appreciate all the hard work you guys put into these videos. One thing we’re missing in the community is exploring more high-level concepts, like file organization, developer handoff, scaffolding, etc. At least in my case, watching videos covering the fundamentals is an exercise in keeping skills sharp, rather than exploring new ideas. I’m guessing there are some experienced UX/UI designers that may be looking for advice or even just some insight on how other designers and teams manage their projects. As an example, I’m the UX lead for a health and fitness brand with 5 separate applications, some of those share components and basic architecture; all utilize the same design language; and at least one of these introduces vastly different features with separate component libraries that still relies on the skeleton of components from the major shared libraries. I started by creating files by app, and using pages to manage components, design system, etc. I then moved to using projects and libraries to make things more efficient, but this introduced other concerns and had its own brand of limitations. Would love to see some content around these topics. It’s rare to find this sort of education outside of Figma’s own educational videos, which are great, but are still seemingly targeting the more junior-level product designer. Either way, keep up the amazing work.
@UICollectiveDesign
@UICollectiveDesign 7 месяцев назад
We're actually working on some of these items now! Would you be open to providing feedback?
@Silverjerk
@Silverjerk 7 месяцев назад
@@UICollectiveDesign That's great news; I'd absolutely be willing to provide feedback. Excited to see what you guys are working on.
@UICollectiveDesign
@UICollectiveDesign 7 месяцев назад
Submit a request to join our Slack when you can! www.uicollective.co/apply-to-slack @@Silverjerk
@johan8008
@johan8008 7 месяцев назад
We need more approaches on advanced multi themes brands + token and structure. Thanks for this video, very useful.
@UICollectiveDesign
@UICollectiveDesign 6 месяцев назад
Another tokens vid is coming soon! Stay tuned.
@morgan.shaffer.design
@morgan.shaffer.design 5 месяцев назад
thank you, this was very helpful to my UX team as we are building out our design system
@UICollectiveDesign
@UICollectiveDesign 5 месяцев назад
Glad it helped! Be sure to join our Slack community :) invite your team as well for any token questions, etc...
@monabarzandeh377
@monabarzandeh377 Месяц назад
Thank you for this! I was just wondering whether Figma Variables supports Light and Dark modes with the separated brand approach you just showed us through Tokens Studio?
@UICollectiveDesign
@UICollectiveDesign Месяц назад
It does indeed! Take a look at our second most recent video it might make more sense
@sophiemulders
@sophiemulders 17 дней назад
Do you also have an intro on how to use token studio ( free version) ?
@UICollectiveDesign
@UICollectiveDesign 17 дней назад
Not an official version, but it is embedded in a number of our videos like this one.
@vaanresvaanica
@vaanresvaanica 7 месяцев назад
Simple, Useful & practical, thanks so much!!! Just a question why you don't make the brand as source?
@UICollectiveDesign
@UICollectiveDesign 6 месяцев назад
It just doesn't work. No real reason haha
@ramygamal91
@ramygamal91 7 месяцев назад
Thank you so much 🙏 Would you please share with me your experience on: sync the figma variables with Front End library (Code)? Best case if we can update the variables from Figma and reflect it on our Github/Storybook (or alternatives) Thanks wish you all the success and happiness 🙌
@UICollectiveDesign
@UICollectiveDesign 7 месяцев назад
Another one of the UIC team members can best answer that one :) Join our slack and I can connect you!
@ramygamal91
@ramygamal91 7 месяцев назад
@@UICollectiveDesign Thank you so much 🙏
@jonathanstithparedesramos9026
@jonathanstithparedesramos9026 Месяц назад
podrias tener un ejercicio pero con otro tipo de tokens la mayoria de los recursos los hacen con los colores
@UICollectiveDesign
@UICollectiveDesign Месяц назад
Sorry I only speak English. However, if Google Translate was right, we have some other videos on other types of tokens :)
@user-wi6cw3wo9h
@user-wi6cw3wo9h 6 месяцев назад
I thought with figma Variables we don't need the token studio plugin anymore? What are the advantages of token studio instead of only using the new Variables? Thank you for the video.
@UICollectiveDesign
@UICollectiveDesign 6 месяцев назад
There are a bunch of reasons, but the largest for me is that Tokens Studio supports font/type tokens/variables, and is far more robust. I, along with many others feel that variables was released half completed.
@user-rs5qq7tp9u
@user-rs5qq7tp9u 3 месяца назад
Quick question: Are the modes /number of brands here still limited to 4 like in the Figma pro accounts? I'm just facing this problem, I set up 4 Brands with normal figma variable modes but i need to do like 13 or so, for which i would need an organizational plan. Does this plugin work around this? Thanks for a quick response.
@UICollectiveDesign
@UICollectiveDesign 3 месяца назад
Can I ask why you need 13 modes? This will be a nightmare to manage.
@user-rs5qq7tp9u
@user-rs5qq7tp9u 3 месяца назад
@@UICollectiveDesign Because I have 13 Brands in my multi-brand system. And then I can just switch complete websites to the style of a different brand and have only one set of master components.
@user-rs5qq7tp9u
@user-rs5qq7tp9u 3 месяца назад
For example if you had Coca Cola in your example. How would you set it up so you can easily switch a corporate website layout between all 55 Coca Cola brands (Fanta, Powerade, Coke...)
@UICollectiveDesign
@UICollectiveDesign 3 месяца назад
This is a much deeper conversation. Request to join our Slack and I can connect you with someone who has a ton of experience with this.@@user-rs5qq7tp9u
@user-rs5qq7tp9u
@user-rs5qq7tp9u 3 месяца назад
I would love that. @@UICollectiveDesign
Далее
Will he fulfill the child's dream?💔
00:54
Просмотров 3,1 млн
Figma Variables & Advanced Prototyping - Crash Course
31:01