Advanced Component Building

Gathering Requirements

The first step involved with building a component is to make sure you have everything you need in order to get started. Some components may come from an external source, for example a product owner or other stakeholder, while others you may have to come up with yourself. I may look at inspiration from other design systems or Dribbble to help discover all states or properties needed for a component. For this specific example, we will be looking at a Stepper component.

To start, I know that we are going to need both a linear stepper and non-linear version of the stepper. It is a specific part of the requirements for a Report Builder that is needed for one of our Nielsen applications. Also, I will need some way to denote either an optional or required step, as some steppers may have a mix of both. In addition to that we need a way to see the "count" of selections in each step, which may be relevant for some or all of the steps in a flow.

The last part of requirements gathering involves thinking about ALL potential use cases, trying to "future-proof" the component so that it is robust to future changes. It helps to think about edge cases that may happen infrequently, in order to account for all scenarios.

Other features or properties that fall under this list include having a direction (vertical and horizontal), as I know sometimes horizontal or vertical screen real estate can be more important. I also know I will need some ability to distinguish between a step that is complete, incomplete, in progress, or potentially disabled. I may also consider a "position" state, which will show the beginning, middle, and end of a stepper and of COURSE, all of our components must include dark mode. 😉

Determining Properties and Sub-Components

So for this example of a Stepper component, I have determined it will consist of the following properties:

1. Mode: Light, Dark
2. Direction: Horizontal, Vertical
3. Type: Linear, Nonlinear
4. Position: Start, Middle, End
5. State: Complete, Active, To Do
6. w/ Count?: True, False
7. Required?: True, False

From these properties, I know there will be roughly 288 (2x2x2x3x3x2x2) overall different versions of this single component, which can be quite large and difficult to manage. I have found it very helpful when building out components to break it into sub-components. So here is what components I will be building:

• Stepper: this is the main component, so should be simple enough with few variants to be able to pull into a project quickly and get what you need. This components main responsibilty should be laying out the overall structure for the Stepper so you can easily drop it into a design.
  1. Mode: Light, Dark
  2. Direction: Horizontal, Vertical
  3. Type: Linear, Nonlinear
• Stepper Item: This will be where a lot of the magic happens. Most of the variants will go into this component so that a designer can easily add/remove stepper items and configure how they need.
  1. Mode: Light, Dark
  2. Direction: Horizontal, Vertical
  3. Position: Start, Middle, End, Nonlinear
  4. State: Complete, Active, To Do
  5. w/ Count?: True, False
  6. Required?: True, False

Note: In cases where variants get to a high number (let's say over 100) it may be useful to build out a helper component or two to manage updates if things change over time. These will exist only in Figma for the purpose of managing the component library. Two helper components I would consider in this use case might be some sort of form label, that includes the text style & required/chip indicators, and a component for the actual graphical indicator, since this is something we may want to tweak over time.

Building out Component(s)

First component to build is the progress-indicator "helper" component. This will be the graphic shown next to the names for the steppers, indicating WHERE the user is in the flow. One thing I want to make sure is that color is not the only way a user is able to determine status, and should be obvious in another way (filled in vs. empty circle). For this component, I'll start with what I think of as the first occurance of a stepper item, which is an active, first step. From there I will go on to build other variants (by copy, pasting, tweaking) including state, tail position (making sure I account for horizontal versions), and mode for light and dark. This is just a placeholder for now, as I am building it in a way so that I'm able to update easily later. The next step will be building out the form-label component, which will include the style for the text in all states, as well as a required indicator and chip that can be toggled on an off by the user. Again, this serves as a helper-component that will allow me to scale changes throughout the "main" component with a lot of variants in the future. Now it's time for the BIG component, stepper item. In this, I will basically piece together the other two helper components I already made into one main component with ALL of the possible variants. This way, if a designer is using a stepper component and wants to configure/make changes, I can direct them to go right to stepper item, instead of configuring each piece individually. At this point, I have decided on six main variants for this components, (Mode, Position, State, Direction, w/ Chip?, Required) which I will lay out logically in a grid on the canvas. In building out all of the possible variants, I discovered a few additional things that I will add to the component at this time. First, since this component should be clickable (to jump around to different steps), I will need to add a Hovered and Clicked state to each version with this ability. I also discovered that the horizontal and vertical versions need to have different widths: the vertical items will be fixed, since they display on the side panel where horizontal space is not as important, and the vertical items are now set to "hug contents" so that they save as much horizontal space as possible.

Finishing Touches

At this point, I've already done most of the grunt work and all that is left to do is put a bow on everything. The final component will just be called "Stepper" which consists of all of the sub-components I already made. This will have only a few variants (Mode, Direction, Linear or Nonlinear), to make it simple for the user to drop into their designs. After I think the component is finished, I always like to throw it in a number of different scenarios to make sure it behaves how I had expected. This includes testing it's responsiveness as you grow or shrink the height or width, as well as testing edge cases like "what happens if the stepper name is really long." From there I will make my adjustments, and because I constructed the component in an atomic way, it is really easy to make changes! And with that, the Stepper is ready to be published and go out into the world!