EX23 - Components

The time making machine

They seem like a huge investment upfront, but components easily save you and your team hours of work over the course of a project.

Updated May 15, 2020

The visual design of your project is beginning to pick up speed, but components can be a challenge.

While you've actively established your brand and created the styles that your components will be utilizing, determining what should and shouldn’t be a component can be difficult. To more accurately assess the scope of your task, you’ll need to zoom out far enough to view the project as a whole.

There are two types of elements that should be built into reusable components and they represent the bulk of the work ahead.

Digital LEGOs

When you first encounter LEGOs, they don't seem like much but once you start building with them it becomes clear why they are popular. The same can be said for the buttons, cards, notifications, and other smaller elements that you'll create for the project. Individually, they won’t look like much, but these smaller components are the foundation of the work ahead. The same button you use in a navbar will be used in a form and your card design could be used in a variety of different configurations.

In addition to the basic versions of these smaller elements, designers should also take time to create the various states of each element. It's far easier to determine what a hover or inactive state should look like when you just finished working on the active state.

The Chunks

Navbars and footers are the two most obvious examples of large scale components that appear on virtually every view of your project. As every project has unique needs, no two projects will have the same number of large components.

If you have an ordering system, you can likely create a series of components to make prototyping easier. The same could be said for a scheduling, or account services.

Anything you use more than once in your design is a candidate to become a component, so your options are as wide as you want them to be.

Resources for review

Please use the following items to guide your exercise attempt:

Video/Article Source/Author
Creating Components with Figma New Pragmatic
A pathway to components New Pragmatic
The language of systems New Pragmatic


Length: Six-to-eight hours to complete.

In this exercise, you're tasked with creating and organizing the components needed to turn your project into a prototype.

Start first with your smaller elements as those will often be leveraged in your larger components. Take the time during the creation process to build the various states that will be needed for each instance of your components.

Be sure to logically name your components and save them appropriately so that they are easy to access from the Assets panel.

This is a long exercise, so feel free to submit your work to the Feedback Loop as often as you like prior to completion.


Once complete, update your Program Journal with links to the assets produced for this exercise. Post your Journal in the #Feedback-Loop channel for review.


Up next Fresh Market: Testing, Round 2

Receive daily feedback and weekly meetings with Chris Courtney by signing up for monthly mentorship today!

Sign up today!