Figma & interface design

This page is part of HCDE’s Design Tools & Resources toolkit, created to help students explore and strengthen specific design skills. Explore the full toolkit here.

Figma foundations

Interface basics:

• Figma design for beginners
• Frames
• Layers
• Variables

Design systems

• What is a design system?
• Libraries
• Components
• Component architecture

Design / Prototyping

• Auto layout
• Scrolling/overflow
• Scaling
• Overlays
• Low-fidelity prototyping
• Mid-fidelity prototyping
• High-fidelity prototyping

Advanced concepts

• Advanced auto layout
• Advanced prototyping
  • Examples
  • Variable modes
  • Use expressions
  • Smart animate layers between frames
  • Multiple actions and conditionals
  • User variables in prototypes

Figma and accessibility

• Figma Stark plugin
• Figma Able plugin
• Figma community - accessibility tools

Other useful plugins

• Accessibility annotations
• Map maker
• Lorem ipsium
• Iconify, feather Icon, material design icons
• Color contrast checker
• Color blind
• Scroll bar

Additional resources

Listed below are other resources that you may find useful, at no cost.

• Figma webinars
• LinkedIn learning - Figma
• Figma crash course for beginners
• Figma UX design UI essentials course