Figma Resources / Build it in Figma - Create a Design System / Tutorials x 5

 Build it in Figma - Create a Design System

Build it in Figma / tutorial / part II 

Big thanks to Rogie 

Build it in Figma link to Figma file with great resource links! 

Links are also pasted below

For reference - know it doesn't look cool - but quick access to resources is my aim!

Type Scale

https://type-scale.com/

https://spencermortensen.com/articles/typographic-scale/

https://alistapart.com/article/more-meaningful-typography/

https://practicaltypography.com/

https://practicaltypography.com/typography-in-ten-minutes.html

https://betterwebtype.com/articles/2018/10/15/rhythm-in-web-typography/

Color Palette Plugins

https://www.figma.com/community/plugin/740832935938649295/Color-Palettes

https://www.figma.com/community/plugin/797696673804519719/Color-Kit

https://www.figma.com/community/plugin/739475857305927370/Color-Designer

https://www.figma.com/community/plugin/742549221432366731/Palette

Accessibility Plugins

https://www.figma.com/community/plugin/734693888346260052/Able-%E2%80%93-Friction-free-accessibility

https://www.figma.com/community/plugin/732603254453395948/Stark

https://www.figma.com/community/plugin/748533339900865323/Contrast

https://www.figma.com/community/plugin/733343906244951586/Color-Blind

https://www.figma.com/community/plugin/733159460536249875/A11y---Color-Contrast-Checker

Grids & Spacers

https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

https://material.io/design/layout/responsive-layout-grid.html#breakpoints

Shared Styles

https://betterwebtype.com/articles/2018/10/15/rhythm-in-web-typography/

———————————

EPISODE 2: COMPONENTS

Material Design Responsive Layout Grids:

https://material.io/design/layout/responsive-layout-grid.html#grid-customization

Icon Grids:

https://www.youtube.com/watch?v=S9P7ob7Nx5I

https://www.figma.com/community/file/868494350497530898

———————————

EPISODE 3: COMPONENTS CONTINUED

Created:

Tooltip component

Media component

Card component

Textfield component

Toggle component

Checkbox component

———————————

EPISODE 4: TESTING YOUR COMPONENTS

Created:

Dialog

Image sizes

Popover component

Menu items

Links:

Material Theming Design System: https://www.figma.com/community/file/809865700885504168

Primer Web Design System: https://www.figma.com/community/file/854767373644076713

iOS 14/iPadOS 14 UI Kit: https://www.figma.com/community/file/858143367356468985

Contrast Plugin: https://www.figma.com/community/plugin/748533339900865323/Contrast

Change Text Plugin: https://www.figma.com/community/plugin/735148445325474400/Change-Text

Content Reel Plugin: https://www.figma.com/community/plugin/731627216655469013/Content-Reel

Data Populator Plugin: https://www.figma.com/community/plugin/787488293482536319/Data-Populator

Faker Plugin: https://www.figma.com/community/plugin/833836762121994814/Faker

Similayer Plugin (for selecting multiple similar layers): https://www.figma.com/community/plugin/735733267883397781/Similayer

———————————

Notes:

Maintaining aspect ratio in fluid width components: https://medium.com/@vitalii.solokub/figma-components-with-a-fixed-aspect-ratio-elements-c7272e2ada9