Creating multi-channel multi-theme connected libraries in Figma - Jack M Andreamorgan M, Ryan L

Подписаться 538 тыс.

Просмотров 19 тыс.

50% 1

Speakers:
Jack Minogue - Lead Product Designer, Ford Motor Company
Andreamorgan Mattheeussen - Design System Lead, Ford Motor Company
Ryan Larish - Lead Product Designer, Ford Motor Company
With any design system, as it becomes larger and starts to accommodate multiple themes and multiple brands the complexities grow with it. Constructing a multi-channel multi-theme design system utilizing Figma libraries and library swapping to create a connected system allows the ability to quickly create and maintain experiences for different themes and brands to deal with complexities like time-consuming updates, inefficient design workflows, and lack of cross-channel and cross-brand consistency. You'll learn about structuring different levels of libraries, internal library configuration, and how to utilize base component structure.
Please visit config.figma.com/video-on-dem... to view ASL version of this Config 2023 session.
Figma is free to use. Sign up here: bit.ly/3msp0OV
____________________________________________________
Find us on ⬇️
Twitter: / figma
Instagram: / figma
LinkedIn: / figma
Figma forum: forum.figma.com/
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #Config2023

Наука

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

15 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 27

@irvro 9 месяцев назад

I love when teams show how they manage their libraries, it's so useful for those who are looking some structure to start with!

@jimb0connolly 9 месяцев назад

This was a really great presentation!

@justsprx 10 месяцев назад

This is crazy cool. I cant wait to do something similar for my team.

@EMILIOYERO 6 месяцев назад

Simplicity is paramount

@aracelimartinez5325 9 месяцев назад

Is there a public Figma file that would allow us to review all the variables shown in this talk? I would love to inspect further so that I can better understand the different collections and their purposes. Thanks!

@yesongkim5824 10 месяцев назад

This is really amazing

@Solonomade 10 месяцев назад

Nice approach, but how did they implement the differences between iOS and Android platform specific patterns? Or did they just ignore them at all (which makes it a lot easier to setup)?

@SeanCameronCooley 9 месяцев назад

23:05 anyone else running into issues with overrides when using this nested base approach? As soon as I switch state, it’s forgetting my overrides.

@alleycat7171 10 месяцев назад

@Figma Question about variables: is there an easy way to control which Variables get published for all product teams to use vs. which variables are only for the Design Systems team use? (Thinking about how prefixing a Style with a "." or a "_" will do so without needed to uncheck them manually in the library publish changes modal)

@Figma 10 месяцев назад

Hello, you can hide an entire collection of variables from publishing to team libraries if you prefix the collection name with "_" or "." Learn more here: help.figma.com/hc/en-us/articles/360039238193#Hide_a_variable_collection

@Underhills 10 месяцев назад

@@Figma It's _ or . as far as I know. That's what work for me at least. Never tried "_" or "." before

@christinawhite396 10 месяцев назад

@@Underhills Yes, you both are saying the same thing. @Figma just decided to put it in quotes for the sake of the sentence.

@IStMl 10 месяцев назад

7:29 whoops

@megaroeny 10 месяцев назад

13:01 What is the meaning of the 20 in this formula? And why the -1 ? I'd love to work on vehicles as my next industry for systems if I had the choice. Especially cars like the Mach-E

@samuelsmith620m 9 месяцев назад

@@Diwala-Joe That's what I would figure too, I forgot about subtracting from both the numerator AND denominator! I guess this must mean that they don't have pure black in their system then, because that formula would yield "-5" as the assigned number?

@jminogue413 9 месяцев назад

@@Diwala-Joe This is absolutely correct. Thanks for writing this out!

@jminogue413 9 месяцев назад

@@samuelsmith620m pure black against pure black would be 1:1, I misspoke when I said "a range of 0-1000." putting 1 into that equation would yield zero, which would be the numeric identifier for pure black.

@samuelsmith620m 9 месяцев назад

@@jminogue413 Ah! I misread the contrast ratio of one color to the same color; I thought it was 0 for some reason. Thanks for the reply and thanks for giving this talk! Our team is getting inspired by this method and I love how the numeric identifier is unique and arbitrary, yet systematically defined. When you all were defining this formula, did you consider that multiple "red" colors could have the same contrast ratio, and therefore the same numeric identifier? Wondering how to work around that.

@cp3onmtv963 3 месяца назад

This was really insightful, but Im missing the part about HOW you can join libraries together that were once built separately?? Havent found this pivotal detail in any of the many videos on DS on youtube...

@user-gl8ti7uu6s 3 месяца назад

Home > left sidebar > Admin Section > Ressources > Libraries

@DavidLopez-jp2ic 10 месяцев назад

Can you do variables with Typography?

@heyiamilse 10 месяцев назад

Not yet, but in another talk they said this is on the roadmap

@teunisvorsteveld1788 10 месяцев назад

@Figma When Ryan speaks to consolidating all of the Component Libraries to a single Design Resources library, is he saying that literally everything is now in one library that provides your typical foundations styles AND all of the components? We use two libraries. One for foundations and one for components. I'm wondering if consolidating to one is what's actually happening here. Thank you.

@jminogue413 9 месяцев назад

Yes, we're in the process of consolidating everything into one library. This approach may not be the move for some design system teams out there, but we've found it to be successful in our efforts thus far! I will note that our type styles still live in external libraries, and will continue to sty external until Type Variables are launched.

@TheCds777 Месяц назад

Their color library looks like a huge headache lol

@AvanaVana Месяц назад

14:06 this is a deplorable, frivolous, hype-driven, and incautious use of “AI”. AI, at least at this point in time, does not give deterministic answers to things like equations, but rather merely synthesizes a semblance of what an answer “should” look like, according to its training data set. This leaves room for interpretation on the part of the AI-“creative freedom”, rather than algebraic determinism. This simple problem could instead have been solved with a 4-line bash script that prints the results of all the color calculations into a text file, or even built right into figma as a plug-in.