As a professional product designer, I am always trying to learn new methods and techniques. This is because professional designers must control their tools to work with them effectively.

Some designers say it doesn’t matter and you can design with pen and paper, but to my mind, that’s not true. Think about how you’ll hand off a project to the developers if the only tool you know is a pen and paper.

Why I created these exercises?

It is difficult for us to study and practice the latest techniques in our daily routines because we concentrate on design.

Studying and exercising are key things you can do to improve your Figma skills. By taking some time to learn new techniques and features, you will be able to utilize them in your work and work faster and more efficiently.

Because many designers I mentor ask me about the most important features of Figma, like auto layout, components, and component properties, I created three simple exercises you can do to improve your knowledge of Figma.

They are built like Legos, and each will help you to build the final goal, which is to build a mobile app card.

You can look at the file I uploaded to the Figma community to see how I did it.

If you need more information about Figma features, check out my articles.

Here are the three exercises, each with a small brief and acceptance criteria. Apart from that, you can design the card how you want.

1. Create a favorite icon

Create a favorite icon component.

Acceptance criteria

◉ The Icon should have two states, selected and no selected.

◉ The user will able to change the states from the properties menu (Right menu).

◉ Colors must be linked to styles.

2. Create a button system

Create a button component.

Acceptance criteria

◉ The button should have a label and an icon.

◉ The icon will have three states:

• Enable
• Hover
• Disable

◉ From the Right menu, the user will able to:

• Change the button state.
• Change the label.
• Toggle the icon on and off.

◉ The button width will grow and shrink depending on the label text.

◉ Colors must be linked to styles.

3. Create a mobile app card

Create a component card for a mobile app.

The card should include

• Image
• Title
• Description
• Price
• Button
• A favorite icon

Acceptance criteria

◉ From the Right menu, the user will able to:

• Change the description and the title.
• Hide and show the button.
• Select the button state (enable, hover, and disable).
• Switch between two images, square and rectangle.
• Toggle the favorite icon between selected and not selected.

◉ The card should grow automatically when the user changes the image, title, or description.

◉ You must use the auto layout component and component properties.

◉ Text and colors must be linked to styles.

To summary

My goal was to show you three exercises to help you learn Figma’s most essential features.

These exercises will help you practice Figma to work faster and more efficiently.

Feel free to comment if you have any suggestions or want me to upload more exercises.

aThank you for reading the article. I hope that this article helped you to improve your Figma skills. Please feel free to share it with your friends or team members, and if you have any questions, please let me know.

If you enjoyed my article, I suggest you follow me and subscribe so you’ll receive an email whenever I post.

Want to get the most out of Medium? Click here to become a member. As a member, you’ll support me and lots of other writers.