No video :(

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

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

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

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

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

15 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@miervaldis42 Год назад

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

@TrifectaDev Год назад

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

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

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

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

very helpful, thanks team figma for this]

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

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

@xNerdkatViruskat 5 месяцев назад

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

@arnaudlesaint2961 Год назад

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

@mt000mp Год назад

design token?

@andrewc3310 2 месяца назад

At 20:51, how did you just swap the position of the two? It doesn't look like there was autolayout??

@Lukas-e9s 17 дней назад

What he did was at first, create a component, then added a variant. You can click than on the dotted border of the variants and apply an auto layout. Then he simply dragged and dropped the compontent to change place.

@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!!!

@ChittaranjanMaharana Год назад

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

@nonam1 Год назад

Whyte Inktrap by Dinamo Typefaces.

@samiramokaram7237 Год назад

🙏 ✨

@MilkShake Год назад

👌

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

16:00

@nativoluis Год назад

I always thought buttons were molecules :(

@miervaldis42 Год назад

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- 11 месяцев назад

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 5 месяцев назад

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!)