- Resource library
- Design basics
- How to use an existing design system
Figma Exercise: How to use an existing design system

Share Figma Exercise: How to use an existing design system
Explore more from
Design basics
Create, collaborate, and ship in Figma
All your design work, in one place.

Set up in this Figma file are some basic components — the beginnings of a defined system that can scale with a product. Use these basic elements, much like LEGO bricks, to piece together a series of app screens.
There are buttons, icons, images, colors, and type styles for you to use. Your constraint here is to only use them, and not introduce additional elements of the same kind (with the exception of photos, you can use additional images). Don't feel obligated to use every element. For example, there are a few photos for you to use, but they don't have to be used if they don't fit within your product.
Create ten app screens that work together consistently, feeling like one, cohesive experience.
To be clear, you can make whatever you want with these elements. I recommend emphasizing the work that you've done already in the other exercises, but it is not necessary.
Keep reading

Reducing design complexity
Get hands-on practice by challenging yourself to simplify a sample login screen
Learn more

What is visual hierarchy
If everything looks the same, then you see nothing. Visual hierarchy can change that.
Learn more

Design brief and moodboard
Learn how to create compelling design briefs and how to develop mood boards for your projects.
Learn more