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

Exercise

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