Build your design system - Lesson 3 : Introduction to design systems

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

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

50% 1

Figma is free to use. Sign up here: bit.ly/3msp0OV
Habitz design system Community file: bit.ly/3BVcql4
Video course: bit.ly/3WwqzyI
Written course: bit.ly/3MvUvX1
In this lesson, we’ll join Kai and the Habitz team as they build their design system. We’ll focus on some core design system features in Figma: styles and components. As well as some tips for defining and organizing your system.
____________________________________________________
Resources:
Best Practices: Components, Styles, And Shared Libraries: bit.ly/433Zjdg
Figma Component Library Structure Twitter Thread: bit.ly/3orGCRS
Atomic Design by Brad Frost: bit.ly/43mZFvu
Best Practices: Component Architecture In Figma: bit.ly/3MyrwlH
Best Practices: Creating and Organizing Variants bit.ly/3BOips2
Figma Help Center: Auto Layout: bit.ly/4229f5K
Figma Help Center: Nudge Values: bit.ly/42itdcR
Figma Help Center: Styles: bit.ly/427hIoe
Figma Help Center: Components: bit.ly/3OuMLr4
Figma Help Center: Add Style And Component Descriptions: bit.ly/3OyQzr8
Figma Help Center: Component Properties: bit.ly/3WsTbJ8
Space Grotesk: bit.ly/3BOje46
DM Sans: bit.ly/3ouGtx6
Smooch Sans: bit.ly/3IDQ3Vg
Google Material Design: bit.ly/3IBbfuN
____________________________________________________
00:00 - Introduction
00:24 - Styles
01:02 - Components
01:33 - Libraries
03:23 - Set up the file
03:42 - Audit breakdown
04:15 - Atomic design
05:56 - Audit breakdown
6:50 - Spacing
07:19 - Creating styles: Layout grids
08:47 - Autolayout
09:11 - Nudge settings
09:25 - Creating styles: Colors
09:55 - Creating styles: Organizing colors
10:29 - Creating styles: Naming conventions
11:00 - Creating styles : Slash naming
11:30 - Creating styles: Typography
13:50 - Creating styles: Elevation
14:25 - Creating styles: Additional styles
15:08 - Creating styles: Create shadows
15:46 - Creating styles: Create shadow styles
16:18 - Create components: Icons
17:33 : Create components: Illustrations
19:14 - Create components: Day toggle
20:55 - Create components: Action presentation card
23:10 - Patterns
23:19 - Create patterns: Day selector
24:39 - Create patterns: Navigation
25:21 - Summary
____________________________________________________
Find us on ⬇️
Twitter: / figma
Instagram: / figma
LinkedIn: / figma
Figma forum: forum.figma.com/
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems

Наука

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

12 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@miervaldis42 11 месяцев назад

Thank you going deeply into an actual example of a design pattern !

@webbychen7639 Год назад

i love you Figma, amazing for sharing this. I personally think i've understood a lot about design systems, but wooow

@Future_ology 11 месяцев назад

I'm happy to have a firm grasp on any part of the design process lol great video

@arnaudlesaint2961 Год назад

Thanks a lot for this video guys ! See you soon :D

@bradmacdonald6591 7 месяцев назад

Thanks for uploading, I found the music to be a distraction.

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

Awesome video. Very curious if the voice is AI-generated? 🤔

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

Thanks for the lessons so far, but the music choice is too loud and distracting.

@MilkShake Год назад

👌

@samiramokaram7237 Год назад

🙏 ✨

@ChittaranjanMaharana Год назад

What's the font name used for each section? Eg. "Components"

@nonam1 Год назад

Whyte Inktrap by Dinamo Typefaces.

@mt000mp Год назад

design token?

@ijidau Год назад

Pretty big hint drop for Design Tokens at ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-0XSLMGh8yhM.html. Can't wait until the June 22 announcement!

@trunghieunguyen8443 Год назад

Really? I'm so excited!!!

@marcinzajko9600 8 месяцев назад

16:00

@nativoluis 11 месяцев назад

I always thought buttons were molecules :(

@miervaldis42 11 месяцев назад

Maybe you mainly deal with buttons containing an icon, then it can be considered as a molecule. Buttons with just text are an atom. But, don't worry, each designer have their own way of thinking. I met designers telling me buttons can be either a molecule or atom depending on the breakdown of your system. As long as you stay consistent, it's okay :)

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

I have so many problems with Figma, it's all nice and well in the video, but in reality it's trash (sorry). Typography styles won't include things RTL/LTR or won't even recognize RTL even though it's an RTL font. why dose it have to be automatic?? just show the rtl button all the time) you can't change text box vertical trim when style is applied, and most settings are hidden in styles so many times you need to disconnect the style or make a new style just for small text here and there. can't change Colors in hover, you need multiple variants for several color hovers and it's one buggy mess that just won't work properly. Can't connect different components through actions, you must use variants but you can't add multiple triggers to the same variant and using IF/else won't use smart animate. All and all making complex large prototypes in Figma is a big hassle that force you to make multiple variants, colors and more unnecessarily just because of poor product decisions when I make simple elements, Figma is awesome, but for complex website with working prototype? it's absolute nightmare!!!!

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

Please, if you have more than 1 video in one playlist - change the music) I really TIRED SO MUCH AAAAAA listen same lofi hip hop more than 30 min( It's killing me and my desire to watch a new video with the same music! You have a great animation in your video, now please think about change the music. Thank you!)