DESIGN COURSE
FUNDAMENTALS OF BUILDING A DESIGN SYSTEM IN FIGMA
WHO IS IT FOR?
People who want to up-skill in Figma and understand how design systems can benefit the design process. This is an entry level course focused on learning about the tools and features of Figma within the context of a simple design system.
COURSE DETAILS
Duration:
1 full-time day per week for 3 weeks.
Class size:
Max 5 students.
Delivery Method:
Face to face at the Hatchd studio, Perth CBD.
Prerequisites:
This is an entry level course. No prior experience is required.
What you’ll need:
All hardware resources supplied on premises. A personal Figma account is required.
LEARN FROM THE BEST
PAS WIJNBERG
CREATIVE DIRECTOR
EXPERIENCE DESIGNER
LYS KARVINEN
YOUR
LEARNING JOURNEY
MODULE 1
INTRODUCTION TO FIGMA TOOLS
Take a tour of Figma and practice working with some of the key tools to create a basic logo.
MODULE 2
INTRODUCTION TO DESIGN SYSTEMS
Understand the purpose of a design system and how it can help improve the design process.
MODULE 3
CREATE FIGMA COLOUR STYLES
Understand the importance of colour palettes in UI design and learn how to create Figma colour styles for your design system.
MODULE 4
INTRODUCTION TO COMPONENTS
Understand the purpose of components and learn about setting constraints. Use the logo you have made to create your first design system component.
MODULE 5
USING STYLES AND COMPONENTS
Create a splash screen for your app using the colour styles and components that you have added to your design system.
MODULE 6
ATOMIC DESIGN
Learn about the hierarchy of components in the atomic design approach and see how this applies to your design system.
MODULE 7
ORGANISE COMPONENTS
Create a new icon and follow naming conventions to easily find it in the assets library.
MODULE 8
CREATE FIGMA TEXT STYLES
Understand the importance of typography in UI design and learn how to create Figma text styles for your design system.
MODULE 9
AUTO LAYOUT
Follow along to create a tab group using auto layout. Then, using text styles and icons from your design system, use auto layout to build a card component.
MODULE 10
NESTED COMPONENTS
Identify reusable elements in the design and create the building blocks for the card components.
MODULE 11
ANATOMY OF A DESIGN SYSTEM
Take a look at the complete picture and understand how the work you’ve done so far fits into a design system. Learn about the importance of documentation and why clear design principles should be established for your product.
MODULE 12
VARIANT PROPERTIES
Understand variant properties and values. Follow along to create a component set that includes a variant for each button state.
MODULE 13
CREATE A SEARCH FORM
Create a component set that includes a variant for each input field state. Use button and form variants to create a search form.
MODULE 14
CREATE A GRID STYLE
Create a Figma grid style for a column grid. Use this grid style and the components you have created to build out the pages of your app.
MODULE 15
INTRODUCTION TO PROTOTYPING
Learn the basics of Figma prototyping and connect the pages you have created to make an interactive prototype.
PRICING
Total course price per person for 3 full days, includes lunch and all hardware is provided. Max class size of 5 people. Discounts apply when multiple places are booked.
1 person - $9,000 p/p ex GST
2 people - $8,100 p/p ex GST
3 people - $7,200 p/p ex GST
4 people - $6,300 p/p ex GST
5 people - $5,400 p/p ex GST
READY TO BOOK?
Unsure what you need? Don’t worry, we are not cookie cutter. Have a chat with us and we’ll customize your training and coaching program based on your team’s needs and budget.