Skip to main content

Figma Workflow Masterclass

Christine Vallaure
On the web
www.moonlearning.io
On Twitter
@moonlearning
Tickets
Get a ticket

Workshop includes:
  • 🍵 Tea, coffee, snacks and drinks during the whole day
  • 🥪 Lunch
  • 📒 Paper and pen/pencil

Full-day workshop • Thursday, October 13, 2022.
Ever handed off this fantastic design to development and then wasn’t quite so happy (putting it politely) when seeing it in the browser? Do you have some experience with designing, but don’t know how to set up your project in such a way to get your ideas across? Then this workshop might be just right for you.

We will look at aspects such as Figma Auto Layout, responsive designs, components, exporting assets with Figma. We will be working with a good mix of theory and hands-on exercises and plenty of room for your questions.


Here’s What You Should Be Expecting:

  • Inspiring & Immersive

    A full day of teaching in a small group

  • Interactive & Practical

    Plenty of time for practice & feedback

  • Hands-on exercises

    With reviews by your teacher

  • Cooperate

    Learn from your teacher and other attendees

  • Dedicated Q&A time

    To ask all your questions

  • Digital Smashing Certificate

    A well-deserved reward for your work


We’ll dive deep into file setup in Figma. We will learn why setting up your files the right way and establishing a system is key to creating solid designs, whether working alone, in a team or sharing designs for development.

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

Who Is This For?

Ideal for beginner/intermediate-level UI Designers, those switching from graphic design to UI Design, developer who want to be able to design in Figma and anyone who is eager to understand a little more about the technicality of UI Design and Figma.

You should have basic knowledge of a visual program, be it Figma, Sketch or Illustrator, and be able to set up a design, but no need to be an expert. We’ll be providing a free month of moonlearning.io, in case you need an intro to Figma or a refresher.

What Will Attendees Learn In This Workshop?

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

  • Professional file setup with Figma;
  • Essential features in Figma such as Auto Layout, Components and Variants.
  • How to document and share designs for development with Figma;
  • Setting up component libraries and specs for re-usable items;
  • Understand different ways to deal with and demonstrate responsive design and grids.

At the end of this class, you will have the perfect setup for your design to get coded the way you imagined it to be. As a developer you get to feel the magic of designing in Figma. And as a designer, your developers will probably love you a little bit more.

What Hardware/software Do You Need?

To get the most out of the workshop, you’ll need to bring a laptop.

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.

  • Responsive Setup & Grids
    Learn about responsive and adaptive grid behavior, breakpoints and CSS grid, and how to set them up. Difference between grid and spacing system. Basic setups like Columns, Grutter, Margin, and Rows.

  • Components & Variants
    Nesting, overriding and interactive components. Variants and documenting them. Creating components overview and specs. We’ll dive into organizing and sharing components and some advanced techniques.

  • Auto Layout
    Nesting layout, resizing and constraints. Tips and tricks and how to troubleshoot problems.

  • Images & Vectors
    How to use images in Figma and keeping aspect ratio.

  • Working with Data
    How to work with external data like Google sheets and Notion, and using real(time) data in your designs.

  • Documentation and Handoff
    How to document in Figma, and what are the best practices for designers and developers. 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 and hates writing about herself, so let’s meet in FigJam instead!

Time & Location

This full-day workshop will take place the day after SmashingConf. The workshop will be running from 9:30 AM to 5:30 PM on Thursday, October 13.

Schedule for Thursday, October 13

9:00 AM – Doors open, Registration
9:30 AM – Introduction & Kick-off
11:00 AM – Coffee Break
1:00 PM – Lunch
2:00 PM – Afternoon Session
3:30 PM – Coffee Break
5:30 PM – The End

Save 100 USD when signing up for the conference and a workshop!

Register for this workshop →