Skip to main content

UX/UI Design & Figma Introduction

Christine Vallaure
Your instructor
Christine Vallaure
Tickets
Get a ticket ↓

Workshop includes:
  • 🔖  Examples to take away
  • 🗣  Active participation
  • 🎁  Workshop recordings
  • 🏅  Smashing Certificate

Workshop, 5×2.5h + Q&A Thu, Fri & Wed, April 20–28 2023
09:00 – 11:30 AM PT ( 18:00 – 20:30 CET ) • Check your time zone

If you are new to UX/UI Design and/or Figma then this workshop is what you are after. We will start from scratch, getting to know the all-mighty Figma and all its features.

During the course of 5 sessions, we will learn everything from component-based UI to basic responsive setup and hand-off. Always based on the UX/UI principles that we will get to know along the way.


Here’s What You Should Be Expecting:

  • Interactive live sessions

    5 × 2.5h live sessions

  • Practical insights

    From principles to practice

  • Hands-on exercises

    With reviews by your teacher

  • Life-time access

    To all video recordings and examples

  • Dedicated Q&A time

    To ask all your questions

  • Smashing Certificate

    A well-deserved reward for your work


A person with a laptop

Want to become a UX/UI designer in Figma? Start with this workshop where you’ll be learning base UX/UI principles, and apply these in Figma designs. In June we are running a follow up on this workshop with the Figma Design Masterclass.

$350 .00 $450.00Register for this workshop →5 × 2h live sessions + Q&A. April 20–28.
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with a Smashing Membership.

Who Is This For?

This is for anyone that wants to get started with UX/UI Design and Figma. Whether you are new to the field, switching from graphic design or are a developer who wants to learn the basics of UX/UI and Figma, this is a great workshop to get started.

All you need is to sign up for a free Figma account and you are ready to go. No previous knowledge is required.

What Will Attendees Learn In This Workshop?

At the end of the course, you will have gained an in-depth understanding of:

  • Principles of UX Design
  • Principles of UI Design
  • Understanding the Figma file structure and setup
  • Setting up basic wireframes and designs in Figma
  • Setting up interactive prototypes in Figma
  • Understanding how color, typography and grids work in UI design
  • Setting up styles for color and typography in Figma and documenting them
  • Working with components and instances in Figma
  • Understanding how responsive UI Design works under the hood
  • Setting up responsive components and pages with auto layout
  • How to document, store and share your designs in Figma
  • How to handoff design files to development

In this workshop, we’ll explore:

Introduction to Figma

  • General file structure
  • Building a basic wireframe.
  • Exploring the Figma tools.
  • Creating reusable styles, components and instances in Figma.

Understanding UX Principles

  • Understanding UX design principles.
  • How to plan a page flow, structure, and interaction?
  • How to guide visitors through our content
  • How to present the right type of information on the right time?
  • How to plan for errors?

Basic Prototyping in Figma

  • How to turn the wireframe into a clickable prototype.

Understanding UI Principles

  • Principles of UI design.
  • How to create a hierarchy with color, size, and shape
  • How to focus the visitor’s attention and create a clear, easy-to-digest structure

Design elements in Figma

  • Color, Typography, and Images in UI & Figma
  • Figma file structure
  • Typography and Color in Figma
  • Creating stylesheets in Figma

Responsive Design

  • How to adapt our design and components to different screen sizes.
  • Theory behind responsive design by understanding CSS breakpoints and responsive grid setup.
  • Let’s turn our components and pages into adaptive designs using auto layout and constraints.

Sharing, documenting, and handing off design

  • How to add structure to our design to improve sharing and working as a team.
  • Storing our styles and components and setting up and consuming team libraries.
  • Let’s talk about the famous handoff to development and have a look at inspect mode.

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 April 20, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Fri April 21, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Wed April 26, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Thu April 27, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Fri April 28, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)

$350 .00 $450.00Register for this workshop →5 × 2h live sessions + Q&A. April 20–28.
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with a Smashing Membership.


Day 1 — Introduction to Figma

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

9:00 AM – 11:00 AM
Let’s get to know Figma! We will start with the general file structure and add our first frames to build a basic wireframe from scratch, getting to know all of Figmas impressive tools bit by bit.

We will push our simple design to a more systematic setup by creating reusable styles and components and instances in Figma.

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

Day 2 — UX Principles & Prototyping

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

9:00 AM – 11:00 AM
In the first part of today’s session, we will make sure to understand UX design principles. How should we plan our page flow, structure, and interaction? How can we guide visitors through our content without overwhelming them and present the information correctly? And what if errors happen? How can we plan for that? Let’s look back at our wireframe from day 1. How can we improve it?

Once we adapted our wireframe to the laws of UX, let’s bring it alive and turn it into a clickable prototype.

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

Day 3 — UI Principles & Design Elements in Figma

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

9:00 AM – 11:00 AM
Let’s understand the principles of UI design. How can we create a hierarchy with color, size, and shape? How can we focus the visitor’s attention and create a clear, easy-to-digest structure? And is it really important that the UI “looks good” (and what does that mean) would a good UX not be enough?

Back in Figma, let’s first sort out our file structure. We will then discuss typography and color in a little more depth and create stylesheets based on the theory we just learned.

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

Day 4 — Responsive Design

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

9:00 AM – 11:00 AM
On day 4, we will learn how to adapt our design and components to different screen sizes. We will start by understanding the theory behind responsive design by understanding CSS breakpoints and responsive grid setup.

Once we understand how responsive design works in theory, let’s turn our components and pages into adaptive designs using auto layout and constraints.

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

Day 5 — Sharing, Documenting, and Handing Off Design

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

9:00 AM – 11:00 AM
Now that we know how everything works in Figma, let’s learn how to add structure to our design to improve sharing and working as a team. We will look at storing our styles and components and setting up and consuming team libraries.

Let’s talk about the famous handoff to development and have a look at inspect mode.

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.

$350 .00 $450.00Register for this workshop →5 × 2h live sessions + Q&A. April 20–28.
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with a Smashing Membership.