Build it in Figma: Design Systems — Components Continued…

Figma Resource

This is a fun new project idea. I’m livestreaming building a design system from start to finish. It’ll be a bit messy, but I’ll publish as I go, semi-weekly!

EPISODE 1: FOUNDATIONS

Here’s some handy links for resources for this stream:

Type Scale


https://type-scale.com/


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

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