In this course, we will learn how to push your design from a pretty picture to a working and scalable UI design that fully uses all of Figma's impressive features.
We will work with a good mix of theory and hands-on exercises and plenty of room for your questions.
This course is for you if you are a graphic designer, UI Designer, or developer with basic knowledge in Figma and would like to bring your skills to the next level.
Day 1 – The correct setup
- pt, px, and resolution. What, why, and how?
- Understanding Grids
- Grids across different screen sizes
- Spacing systems: Why 8pt and not 8px spacing systems and why in Figma 1px=1pt
- A word on design tokens in Figma
- Understanding the Figma file structure
- Setting up our File with Frames (and understanding why we use precisely those sizes)
- Setting up responsive Grids
- Adding our Design Elements to the Frame the right way
- We are setting up the foundation for our project and adding some first elements.
Day 2 – All about components
- Components: Short and sweet intro, because today 90% is in Figma!
- Setting up components and instances
- Nested components
- Component Properties
- Organizing and sharing components
- Some advanced techniques
- Let's run through our project file and turn it into a component-based design.
Day 3 – Color, typography, and styles
Theory: Color in UI Design
- Picking color set for UI Design as well as system colors
- Color variants: why and how
- 60-30-10 rule
- Documenting colors with accessibility in mind
- We will set up an accessible color stylesheet and save our styles in Figma
- Setting up internal and external libraries
Theory: Typography in UI Design
- Some basics
- Different techniques to create a Typescale
- Px vs. Rem
- The importance of line-height
- White space and line length
- We will set up an accessible type scale and save our styles in Figma
- We are adding our type scale and color stylesheet to our documentation and linking the styles to our design.
Day 4 – Responsive Design: Constraints and Auto Layout
Theory: Responsive Design
- Responsive design and responsive components
- Understanding breakpoints
- What are constraints and how to use them
- When constraints are not enough: Intro to auto layout
- Setting up auto layout frames
- Resizing behavior
- Nesting auto layout
- Absolute positioning in Figma
- Responsive testing and documenting
- Many exercises today as auto layout is all about practice, practice, and practice
- Let's convert our components into auto-layout frames and add constraints to the grid positioning.
Day 5 – Prototyping, sharing, and hand-off
- Prototyping basics
- Connecting screens
- Different types of animations
- Interactive components
- Documenting Prototypes
- Finishing off our documentation
- Sharing with developers, designers, and anyone else
- Adding our prototype links and inviting each other in view mode for feedback