Figma Design System: 05 Spacing

Hello everyone, and welcome to the fifth episode in a series where we create a Design System in Figma called FDS.
In this episode, we’ll be doing Spacing Variables 🤟.
// Chapters
0:00 Intro
0:30 What is Spacing?
1:15 Spacing examples
2:53 Creating spacing variables
5:23 Using spacing variables
6:12 Outro
// FDS Starter Libraries
Download the Figma files I use in this series here:
drive.google.com/drive/folder...
// Software used
www.figma.com/
// For updates and other tutorials, follow me on
Twitter: / deanemachine
#figma #designsystem #spacing

Пікірлер: 16

  • @phuonghoang9268
    @phuonghoang92682 ай бұрын

    Just wanted to say thank you so much, Christopher, for everything you're doing for the design community. I truly appreciate your efforts! Please keep up the excellent work! You're making a significant impact for us, designers striving to enhance our design processes and elevate our craft. Thank you! 🙏

  • @abdul-UIUX
    @abdul-UIUX2 ай бұрын

    I really like the T-shirt sizing spacing mechanism. Looking forward to the next episode.

  • @nathaniel-web4493
    @nathaniel-web4493Ай бұрын

    I had to pause the video to give you this... You do have a strong sense of humour sir 😂

  • @ChristopherDeane

    @ChristopherDeane

    Ай бұрын

    Humour so dry, it’s got spice being harvested on it 🙂.

  • @MatteoBetti-bo5gc
    @MatteoBetti-bo5gc2 ай бұрын

    Hi Christopher, thanks for sharing! When will the iconography video be released? Thank you so much for your great work. Really well done. I am following all the steps to create my FDS.

  • @ChristopherDeane

    @ChristopherDeane

    2 ай бұрын

    Layout is next, then border radius and width. Once the foundation parts in Design Tokens are done, then I'll do Iconography 🙂.

  • @MatteoBetti-bo5gc

    @MatteoBetti-bo5gc

    2 ай бұрын

    @@ChristopherDeane can't wait! Thanks again

  • @abdul-UIUX
    @abdul-UIUX2 ай бұрын

    The cap is looking great.

  • @Underhills
    @Underhills2 ай бұрын

    After Figma got dark mode I haven't seen a single person using light mode. Not on youtube or any colleagues. No matter what time of day I use dark mode in Figma. Makes me wonder how many people use dark themes in general, perhaps I should start designing dark mode for everything I make. Myself I always use a browser theming plugin for desktop and I use the dark mode UI setting default for mobile, but I bet most of the UI's I'm exposed to are made light. Anyways, what a sidetrack! Thanks for sharing spacing strategies.

  • @ChristopherDeane

    @ChristopherDeane

    2 ай бұрын

    Blame it on After Effects, I’ve been using it since it was first released and it’s always been dark mode 🤘😀

  • @phuonghoang9268
    @phuonghoang9268Ай бұрын

    Hi Chris, I'm following Scale DS now. Just wonder how did you create Logo/Scale in different sizes? I tried with my brand logo many times, but couldn't resize it from the instance. Thanks

  • @phuonghoang9268

    @phuonghoang9268

    Ай бұрын

    Oh, just figured it out. Use scale tool instead. Took me hours on this. :(

  • @jonathangriffiths359
    @jonathangriffiths35919 күн бұрын

    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?

  • @ChristopherDeane

    @ChristopherDeane

    19 күн бұрын

    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 🤘.

  • @abdul-UIUX
    @abdul-UIUX2 ай бұрын

    I use (shift + enter) to duplicate a variable.

  • @ChristopherDeane

    @ChristopherDeane

    2 ай бұрын

    Which is something I find out after shooting this episode. I’ll use that trick in the next video 🤘