Throughout the section, your challenge is to take the information you learn and actually applying them to your own design or to modify the project we are working on to make it "your own". We're excited to see what you create at the end of this thing! If you have any questions, please use the #design channel in our Discord community!

Tools

• Figma

• Color Contrast Analyzer

Individual Figma Files

• Grids + Spacing Resource

• Typography Resource

• Color Resource

• Forms + UI Elements Resource

• Imagery + Iconography Resource

• Accessibility Resource
  

Figma Plugins

• Logo Creator

• Color Search

• Image Palette

• Content Reel

• Lorem ipsum

• Font Scale

• Font Explorer

• Color Palettes

• Color Contrast Checker

• Able – Friction free accessibility

• Pexels

• Remove BG

• Duotones

• Blush

• Illustrations

• Humaaans for Figma

• Streamline Icons

• Feather Icons

• Material Design Icons

• Iconify

• Contrast

  
  

Extra Figma Files

1. Color

   1. Color Styles

2. Imagery + Iconography

   1. Free 60 illustrations - Surface Pack

   2. 💥 Vector Illustrations

   3. 1100+ Free Vector Illustrations

      
      

Extra Articles/Websites + Resources

1. Grids + Spacing

   1. Spacing, Grids and Layouts

   2. The Comprehensive 8pt Grid Guide. Start your UI project right with this…

2. Typography

   1. Google Fonts

3. Color

   1. Colorable

   2. Coolors - The super fast color schemes generator!

   3. Adobe Color: Color wheel, a color palette generator

   4. Colormind - the AI powered color palette generator

4. Imagery + Iconography

   1. Noun Project: Free Icons for Everything

   2. Blush: Illustrations for everyone

   3. Material Icons

5. Accessibility

   1. Colorable

   2. Contrast Checker

   3. Web Content Accessibility Guidelines (WCAG) 2.0

   4. World Wide Web Consortium (W3C)

   5. Color Contrast Analyzer