Hi, I'm Christopher Deane. I'll be posting design tutorials and other videos that help you scale design, design products, animate and become a better designer.
Found the last video of Primitive colours was nicely explained. Not able to catchup on this video, not getting how the Semantic color palette is created @3:00.
Hi Christopher, this series is really helpful, thank you!! I have to apologize because I accidentally pressed the ask to edit button in your figma file. Please decline my request(the account named Wang) if it's convenient for you.
Thank you so much for this design system tutorial, I can't express how appreciative I am for this series. As a solo designer at a startup company, sorting out the design system is really a pain for me. Your videos really helped me A LOOOOOT on growing my knowledge of design system as a whole as well as how to build it from scratch.
Hi, Your content is highly valuable, and I really appreciate it. May I ask a small question? Why do we need to create multiple shades of a color? I’m concerned that we might not use all of them or could use them inconsistently without a clear purpose. Sometimes, I cannot know when we will use the shade from 100 to 400 or from 700 to 900 Thank you so much
Watch the next episode about Semantic Color Variables, you won’t be using them inconsistently and once you start using them on illustrations and charts as well as UI elements, you’ll soon find that you use most is them 🙂.
From experience, I’ve done dark mode so many times now I know what works. This is similar to what is in my DS called Scale that I use on all of my projects. scaledesignsystem.com
Hi Christopher, I replicated most of it but is there a way to transform those semantic typos into styles? I cannot linked the semantic typo as a whole to a text.
Before using the styler plugin select all the elements and use the layers plugin to sort the layer in x or y axis which will fix random order after style are created ❤
thank you couldnt find any comparsion video for similary priced mcbooks mbp 16 inch and mba m1 all are mostly comparing with the m1 pro which is bound to be better, but also a bit expensive, wanted to see if i9 performas any better because it was a top model back in 2019
"Semantic" has been the terminology I've been using for a while now (Semantic meaning, semantically driven etc) and "Primitive" is a term that replaced what I used to use, which was "Raw". Primitives --> Semantic is also all I need for my own systems and the ones I build for the organisations I work for.
When will upload a new video about design system series and how many videos are there this series more? Thank you very very much for this useful lessons.
I've been sick for 3 weeks and attending to family issues. The next one will be up in a week or two and it's an ongoing series that'll move into components, then into other design system related content.
Adding more or less "Lightness" value is the same as adding increments of light in one direction and black in another. And the plugin I use provides the exact same values if you do it manually.
Hey can you do a video with a general overview about how to structure a multibrand setup, i understand there are many different skews one can take and wondered what your thoughts were, thanks
This is the info I need, currently refactoring a design system with 14 brands (using variables and modes), I nailed the typography side of things but the colour sent me into a spin, thanks
Hi Christopher, thanks for this video as well! I was wondering, what is the advantage of creating the units with a name-value correspondence and primitives + semantic? Because having seen how Figma handled type variables in their videos, they directly insert numerical values into the weights, sizes etc., and then created multiple modes directly in primitives, connecting then the text styles to primitives. Even if they change for example the Medium size from 14 > 16 every text style using the size M will get updated. So why create semantics and units and not just primitives like Figma? Here the reference video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-APNWWhXIg04.htmlsi=z4WEHEHnZJynoZ54 Thank you!
You don't have to use them, but I prefer to do so as they set the expected values across the entire system and can be used for any number value variable, not just text size or line-heights.
@@ChristopherDeane And why the choice of recreating text styles in variables? Could the primitives have been directly used by linking them to the text styles? Is this choice due to seeing exploded and organized values? Because what I would have done by looking at the Figma tutorials would have been to directly create the breakpoints in the primitives and insert the different units (instead of link multiple scales L XL etc...)
This is done to re-create the concept of a type mixin that exists in code inside Figma, and to make it easier to create responsive text modes in the semantic set and not multiple modes inside the primitive set.
This is really great. Can you please help how to use semantic token names if I am working on a large project? This is the big problem for most of the freelancers like me.
One of the best videos on RU-vid. One questions - If I am working on a mobile app (large crypto app) should I create wireframes first or design system?
I really like the way you go through the topic and convey it clearly. Really professional! Some time ago I saw something somewhere about aliases in connection with variables... can't remember where. Is there any info on this? Why alias? How do you do that? Thanks at all
I cover this in the semantic colour variables episode: Figma Design System: 03 Semantic Color Variables ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-zfFZ99MBEPk.html You assign color variables to semantic ones 🙂.
Everything explained in such a cool and understandable way. And even I, who don't speak English, can follow ... TOP. One of the best tut series ever ....
hey christopher, thanx for the content. You should try a color generator plugin called 'Foundation: Color Generator' and skip the all manual process to create styles and naming after creating style iam using 'style to variables' plugin then delete all the styles. Give it a shot
thanks for the plugin rec, i didnt know that! about the tshirt sizing instead of common naming: how does that read in development? how does the dev know that "Heading L" is the H1 in a page, for example?
Since the size of h1 is up to the consuming product, in Figma, you can add descriptions to each style or variable like "h1 on web" then your engineers will create a base.scss style sheet where they do this: h1 { @include fds-type-heading-l; }; Where "fds-type-heading-l" is a mixin that includes all of these variables: @mixin fds-type-heading-l { font-family: var(--Family-Main, Inter); font-size: var(--Heading-L-Semi-Bold-Size, 32px); font-style: normal; font-weight: 600; line-height: var(--Heading-L-Semi-Bold-Line-Height, 40px); letter-spacing: var(--Heading-L-Semi-Bold-Letter-Spacing, -1px); }; This is copied from my own DS called Scale, and in the next episode I'll be setting this up in FDS and taking you all through it 🙂.
Thanks! Just started following your tutorials, and they are pretty refined and accurate. Also you explain the hard complex things in an easy to follow and in practical way. As a product designer, I am working on building manageable DS, your tutorials are helping me in refining our DS for better! Thanks a ton!
Hi Christopher, really super useful and very clear material! I have a small doubt about the typography variables part. I still don't understand the advantage of creating a new collection of only typography breakpoints? Why can't I just create them directly with the modes?
This will become clearer in the next episode where I take you all through type variables. They include responsive text sizing modes and in those modes we also have the frame width so the frame resizes automatically 🙂.
Thanks so much, your pace is perfect and level of knowledge is amazing! Quick question which I can't seem to find the answer to. I've seen others set up number primitives using an 8pt grid and then linking to them as aliases doing it this way. I can't understand the value of doing this (your way seems much more straightforward), do you know a reason why you'd do it this way?
I actually do this in my premium design system called Scale where I have a set of variables called "Unit" that start at 2, then 4, 8, 12 then multiples of 8 up to 120. I then use these as aliases whenever I create a number based variable. It's a good way to set a global set of values that no none in your organisation can go out if, ie: 6 or 31. You can take a look at Scale here: scaledesignsystem.com In the FDS series, I'm trying to keep things as less complex as possible and still end up helping you create a DS that you could use in a mid to large sized organisation 🤘.
