You don’t need to have have read every document to build solid Figma components. The key is sticking to recognisable patterns across the component library. Reusing patterns leads to a lower learning curve for other members of the team and perceived speed increase.

Getting started

Before firing up a new Figma file, it is best to spend time going back to the built live or annotated component. This will provide an overview of what the component structure should be. Figma components should align as much as possible with the Compound component or live code.

• Review the component documentation and note the goals and variations of the component.
• Use the annotation of the component as a blueprint but be aware things can change in development.
• Finally, it is important to play with the live component and get an understanding of how it works. You can use the two sources above as a reference point.

Points of Reference

As the component library builds up you will see similar patterns are used in one component or another.

Working through the research phase above, it will be easy to identify existing components that have parts of the requirements you need. It’s always useful to have them open as a point of reference as you build.

As highlighted in the overview, sticking to patterns in your components will make it more familiar to users.

Breaking ground

You can start to build things out around the same time the Development team is requesting an initial review of a component they have in build. By this point the documentation and specification should be almost complete and provide a reference point for both checking the component in build and creating your Figma component.

Things are easier to work with when you get something down on the page. There are two approaches for starting a new component.

The kitchen sink

Fire up Figma and try and build the most complex variation (aka the Kitchen sink) of the component you have identified.

The kitchen sink approach is the best way to start for components that are a composition or nest other components. From there it is easier to deconstruct the variations and variant properties as you need.

Start small

For smaller, more atomic components; lists, buttons, form elements, it is best to start small on a single element e.g a list item.

These smaller components are usually used in variations of the same elements. When it comes to testing it makes sense to group them how they will be applied so you can test for defects more realistically.

Remember the guides