Creating multi-channel multi-theme connected libraries in Figma - Jack M Andreamorgan M, Ryan L
ฝัง
- เผยแพร่เมื่อ 8 ก.ค. 2024
- 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 - วิทยาศาสตร์และเทคโนโลยี
Loved their approach, thanks for sharing Ford team
I love when teams show how they manage their libraries, it's so useful for those who are looking some structure to start with!
Simplicity is paramount
This is crazy cool. I cant wait to do something similar for my team.
This was a really great presentation!
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!
This is really amazing
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)?
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.
7:29 whoops
@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)
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
@@Figma It's _ or . as far as I know. That's what work for me at least. Never tried "_" or "." before
@@Underhills Yes, you both are saying the same thing. @Figma just decided to put it in quotes for the sake of the sentence.
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...
Home > left sidebar > Admin Section > Ressources > Libraries
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
@@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?
@@Diwala-Joe This is absolutely correct. Thanks for writing this out!
@@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.
@@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.
@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.
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.
Can you do variables with Typography?
Not yet, but in another talk they said this is on the roadmap
now you can
Their color library looks like a huge headache lol
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.