Creating design systems with Figma

Fabrizio Cuscini
Product Designer at Freelance

Learn how to collaboratively design and prototype a UI by creating reusable components, shared across a Team Library in Figma.

Summary

Figma is a cloud-based design tool that completely transforms the way you work with your team. It combines the best of everything in the world of UI design tools – prototyping, file version control, developer handoff – and adds some cool features such as live embedding and real-time collaboration.

In this workshop, you’ll learn how to design and prototype an app’s user interface and how to create a design system from scratch, using reusable styles, icons and components that can be shared across your team.

Who is it for?

This course is really for everyone, aimed at beginners as well as more experienced users, such as design professionals. If you are an experienced Sketch, InVision and/or XD designer, this course is also for you: you’re going to learn how Figma can positively change your daily workflow and improve your team collaboration. Please note that if you’re an advanced user of these tools, you may already be familiar with some of the concepts we’ll be discussing, so the main benefit of attending the course will lie in learning Figma as a new tool and the underpinning design systems methodology.

Key takeaways

  • Learn by doing: initially we’ll cover all the basics, and very quickly you’ll be putting your hands-on and work collaboratively on a real design project during the day
  • Improve your design workflow and discover more effective ways of collaborating on a project in real-time with your team
  • Learn how to implement the Atomic Design methodology to create UI components
  • Gain in-depth understanding of the anatomy of a Design System

On the day

Morning

  • An introduction to design systems and the Atomic Design methodology.
  • Learn how to organise your files and projects.
  • Create and manage a team.
  • Getting started with Figma: Pages, Frames, Layers, Layout constraints, Vectors and Shapes, Text, Shared Styles, Components, and so on.
  • Learn more advanced features like layout grids, Team libraries, real-time live collaboration and file version control.
  • An introduction to Figma plugins and those useful to improve your workflow.
  • Prototype your app with Figma: link screens, add overlays, animations and page transitions.
  • Share your designs with stakeholders: use the Figma Mirror app to preview your designs on your phone.
  • Hassle-free developer handoff with Figma.

Afternoon

We will create our very own small design system as a set of reusable UI components in our shared Team Library. With these components we will then create an interactive prototype of a banking mobile app. Since Figma is a breakthrough collaboration tool, all the attendants will be asked to work together and collaboratively on the same project.

Requirements

Just bring your shiny MacBook Pro or your PC laptop, that’s all you need for the day. Figma is a web-based application, so it can run either on Windows or on a Mac, as well as in the web browser.

About Fabrizio Cuscini

A Digital Product Designer Consultant, in the past ten years he’s been helping FinTech organisations in designing web, mobile and wearable applications – and, of course, Design Systems. He specialises in wealth management, banking and complex trading applications design.