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://spencermortensen.com/articles/typographic-scale/
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
