Want to join this workshop, but need a thorough introduction on UX/UI design and Figma? Join Christine in April for her UX/UI Design & Figma Introduction.

We will look at aspects such as general file setup, color and typography, components, variants, component properties, a loooot of auto layout and responsive design, and some prototyping.

This course will focus on understanding the technical aspects of setting up your design to improve the communication, documentation, and handoff between design and (front-end) development. Let’s demystify all the issues you never fully understood!

We will work with a good mix of theory and hands-on exercises and plenty of room for your questions.

Who Is This For?

Ideal for beginner/intermediate-level UI Designers or those switching from graphic design to UI Design who are eager to understand a little more about UI design’s technicality.

You might also like this workshop if you switch from another software like Sketch and XD. And, of course, as a special welcome to developers who want to improve the collaboration between design and code from the other side.

You should have basic knowledge of Figma and be able to set up a design, but no need to be an expert.

In this workshop, we’ll explore:

• Structure and Setup in Figma
  Layers, Pages, and Frames setup. How to set up a style guide and how to work with a system of traffic lights and notes.
• Colors in Figma
  How to choose, mix & match color variants and the 60, 30, 10 Rule. How to name and document colors.
• Grids & Responsive Setup
  Difference between grid and spacing system. Basic setups like Columns, Grutter, Margin, and Rows. Learn about responsive and adaptive grid behavior, breakpoints and CSS grid, and how to set them up.
• Responsive Typography
  Units, line height and different scaling methods. Contrast and accessibility. Christine will show you three approaches to Responsive typography and some tools to help you.
• Images & Vectors
  Why we design at 1x and what that means, Using images in Figma, how to export images.
• 8pt Spacing System
  How and why we use an 8pt Spacing System.
• Components & Variants
  Nesting, overriding and interactive components. Variants and documenting them. Creating components overview and specs.
• Auto Layout
  Nesting layout, resizing and constraints. Tips and tricks and how do we troubleshoot problems.
• Prototyping
  How to add flows and interaction.
• Teamwork and Handoff to Development
  The Figma team library. Version control, updating and accepting changes.

About Christine Vallaure

Christine is a UX/UI Designer with over ten years of experience and founder of moonlearning.io. She has worked internationally, in-house, and remotely on projects for leading brands, agencies, and startups. She cares deeply about creating well-thought-through and aesthetic products, and she firmly believes that designers should understand code and that UX/UI is a match made in heaven.

Currently, she is running moonlearing.io full-time and also writing about Design & Code on Medium.

She loves Figma, sunshine, and Dieter Rams. She also hates writing about herself, so let’s meet in FigJam instead!

Time & Schedule

This workshop is split over five days. The workshop sessions will run on the following days:

• Thu July 20, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Fri July 21, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Wed July 26, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Thu July 27, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Fri July 28, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)

Day 1 — The Right Setup

8:45 AM PT
Virtual doors open, registration, chat and introduce yourself.

9:00 AM – 11:00 AM
We’ll start with some design theory. pt, px, and resolution. What, why, and how? Understanding grids and spacing systems: Why 8pt and not 8px spacing systems, and why in Figma 1px=1pt?

Then we’ll jump into Figma. We’ll set up our file with frames (and understand why we use those sizes). We’ll be setting up responsive Grids and correctly adding our Design Elements to the Frame.

11:00 AM – 11:30 AM
Q&A with Christine on the day’s material. Chat with each other.

Day 2 — All about Components

8:45 AM PT
Virtual doors open, registration, chat and introduce yourself.

9:00 AM – 11:00 AM
Day two starts with Components: A short and sweet intro because today is 90% in Figma! Loads of Figma fun today: Setting up components and instances, nested components, variants, and component properties. We will also look at different ways to document, organize and share components. And, as usual, some tips, tricks, and advanced techniques to finish off.

11:00 AM – 11:30 AM
Q&A with Christine on the day’s material. Chat with each other.

Day 3 — Color, Typography, and Styles

8:45 AM PT
Virtual doors open, registration, chat and introduce yourself.

9:00 AM – 11:00 AM
We’ll start with color in UI design: Picking color set for UI design and system colors, color variants: why and how. You’ll learn about the 60-30-10 rule and documenting colors with accessibility in mind.

We will set up an accessible color stylesheet, save our styles in Figma, and set up internal and external libraries.

Typography! We’ll kick off with some basics. You’ll learn about different techniques to create a type scale, Px vs. Rem, and the importance of line height, and white space, and line length. We’ll end the day by setting up an accessible type scale and saving our styles in Figma.

11:00 AM – 11:30 AM
Q&A with Christine on the day’s material. Chat with each other.

Day 4 — Constraints and Auto Layout

8:45 AM PT
Virtual doors open, registration, chat and introduce yourself.

9:00 AM – 11:00 AM
Today is a real deep dive into responsive design with Figma.

Starting with the all-mighty auto layout and wrapping our heads around creating truly responsive components. Let’s begin from scratch and work our way up to resizing and the power of endless nesting to create more complex setups and even entire pages.

Then we will learn about constraints and how it’s a lifesaver when it comes to combining auto layout and grids.

Once we make sure we fully understand our responsive tools, we will learn about breakpoints, how they really work under the hood in CSS and how we can set up, test and document our design in Figma accordingly.

11:00 AM – 11:30 AM
Q&A with Christine on the day’s material. Chat with each other.

Day 5 — Prototyping

8:45 AM PT
Virtual doors open, registration, chat and introduce yourself.

9:00 AM – 11:00 AM
On the last day, you’ll learn about prototyping in Figma. From adding simple connections to more advanced techniques and animations with smart animate. Add consistency to your design with interactive components. To finish, we will document our prototype with flows, and I will show you some trips and tricks to make your presentation shine.

Now that we ran through all the major areas of Figma, let’s look at how all the skills we learned over the past five days come together and make handing off our designs a piece of cake.

11:00 AM – 11:30 AM
Q&A with Christine on the day’s material. Chat with each other.

Subjects and day-by-day might be slightly adapted.