Russell Design System

Requirements

1. I had to create a library of components in Figma that will be used for designing company’s internal tools.
2. I had to use the existing style guide and try to avoid creating new styles.
3. The design system is targeted at web tools, which will also have mobile versions.

Grouping

All related components are placed in one separate frame. This way, I grouped all related components for the asset panel on the left.

In the example you can see that I have selected "Drop-down" and now I have a quick access to four related components:
‍
- Drop-down
- Drop-down with label
- Drop-down item
- Drop-down list

Variants of a component

I have grouped all different versions of the same component using Figma’s variants feature.

In this example the component “Button” has four different properties with different values:
‍
1. State
   a) Rest
   b) Hover
   c) Pressed
   d) Disabled
   d) Focused
‍
2. Style
   a) Primary
   b) Secondary
   c) Dark background
‍
3. Size
   a) Medium
   b) Large
‍
4. Icon
   a) On
   b) Off
‍
By selecting different combinations of these properties designer can choose one of 60 variants of the same button component.

Interactions within a component

I have also created interactions within some components.

I used this technique to simulate hover states, clicking buttons, selecting checkboxes etc.

Responsive components

Whenever possible, I created responsive components, so designers can easily modify the component based on their needs.

In this example the component is responsive in two ways:

1. You can change the width of the component and the text is going to wrap inside.

2. You can change the length of the text inside and the width of the component is going to stay, but the height will increase.

Components with icons

Some components contain icons. I have connected a separate Figma library of icons to those components.

Now designers can easily replace an icon within a component. The icon will also inherit the parent component’s style.

In this example you can see me replacing the "Check" icon with the "Bookmark" icon. It has the same color as the icon on the left. Even the "Hover" and "Selected" states are inherited.

Accessibility

I made sure all components meet the contrast requirements. You can see on the screenshot that some variants of the radio buttons are highlighted in red, because they don’t have enough contrast. In this case this is acceptable, because those variants are “Disabled state.”

For most components I have also created a “Focused state”, which indicates when a user has highlighted an element using a keyboard or voice (a border around the radio button.)

To meet sizing requirements most components have two sizes. For example, for main desktop versions of our tools the buttons are 32 pixels high with 14 font size. But for mobile the buttons are 44 pixels high with 16 font size.

Complex components

I have also created some complex components for our design system.

In this example you can see the data table component. Besides the data table itself, there is a separate component for row states and a separate cell component.

Using such components can save significant amount of time for the designers and increase their productivity.

Modifying complex components might not always be straightforward. That’s why whenever necessary I would add comments or detailed instructions. In some cases I would even record an instructional video like this one.