What is it?
Detailed specifications on the component and how to build it.
Why do we do it?
So that Developers know precisely how to build the component and all the states required for it. It also helps us best understand how to make this component in Figma.
How do we do it?
Depending on if you’re creating a new component vs. updating an existing one, there are two methods for your spec doc.
Create a new spec doc if your component update differs substantially from the original.
Updating existing components can be much simpler to document. Just include a before and after, highlight the changes and give the updated values.
For new components, use a complete spec doc outlining all of the specifications from the ground up.
Take each variation in the following list and run the Eightshapes Specs plugin in Figma to break down your designs into full specs. You’ll want to review the results to make sure they line up.
You can do all of this manually, but a plugin will save you a lot of time — and this one is great.
If you want more information on these variants, head back to the exploration phase.
Include all of the different types available for this component.
Platform or screen size
|Desktop / large|
|Tablet / medium|
|Mobile / small|
|or pixel value|
Any elements that are shown/hidden or on/off
|Selected — Yes/No|
|Optional Messages — show/hide|
|Any text that is override-able|
|What text supports markup/markdown|
|Scale — any applicable min/max sizes|
Interaction and animation
You’ll need to add the details for these manually.
|Any tokens or values applicable to this, including animation duration and style|
|Visual text scaling and how the component changes with larger and smaller fonts|
Colour mode examples
Provide everything you’ve done above in different colour modes; this should be reasonably straightforward if you have variables set up for colour modes.
|Any other colour modes you might need|
- Alignment of final designs
- Figma file with component specs