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!