Components are the foundation of a design system, and their effective creation and maintenance are critical to its success.

Design System teams need to know “where they’re at” with their components so that they make effective decisions about what which areas of the design system require improvement.

Teams need to answer questions like:

• Which components have been created in design, code and documentation and are ready to be adopted by product teams?
• Which components are “done” in design but still need to be created in code and documentation?
• etc

zeroheight provides tooling for the easy creation and maintenance of a view of your components that enables you to answer these questions

Component sets

A component set in zeroheight provides an overview of the components within a design system. Each component in a set can be linked to documentation, design and Storybook.

Components are automatically added to sets by linking a zeroheight styleguide, Storybook site and Figma file. Components in a component set are also automatically linked to their various sources, so they stay in sync.

Component sets exist within the Resources area of zeroheight.

Create a component set

• Login to zeroheight and navigate to Resources, make sure you’re on the Components tab and click Get Started (or Create component set if there’s already a set in your account)
• Connect a styleguide
  • Select the styleguide the contains pages for the documentation of the components in your design system
  • One will be preselected if you only have one styleguide
• Add design file(s)
  • To get the most benefit from component sets, select the main Figma file(s) that your designers use to build from
  • If the selected styleguide includes any Design blocks, the corresponding Figma file(s) will be preselected

• Add Storybook instance(s)
  • If you’ve connected Storybook to the selected styleguide, the Storybook instance(s) files will be preselected

• Click Generate component set

Finalising your component set

The names of items in the component set sources and the presence of Design and Storybook blocks are used to auto-match items to one another during the generation process

You’ll see a summary of the component once this process is complete:

Click Okay to see your component set

Review components

While the auto-matching will do the bulk of the work for you, you should spend a few minutes reviewing your component set. You should check:

• Do the items that have been matched to one another correspond to the same design system component? Are "missing" items really missing?
  • If the matching isn't quite right you can fix the issue by renaming components in the styleguide Figma or Storybook or moving design/Storybook blocks and then re-syncing the component set
  • Or you can manually remove/change links by editing the component. Note that editing components causes them to become locked. Learn more
• Is anything missing altogether?
  • Any components that don't yet exist in source can be be manually added to the set
• Is every component in my set an actual design system component?
  • Delete anything that doesn't correspond to a design system component

Review component statuses

If any of the default statuses aren't right - edit or remove the status by clicking on the status tag selecting a different status or remove it altogether.

Review unconfirmed components

It’s likely that your component set will includes items that only exist in one source and have names that aren’t typically used for design system components – these are unconfirmed components

Unconfirmed components that represent real design system components should be manually confirmed or manually linked to existing components.

Document your component set

Once you're happy that the component set is an accurate reflection of the components in your design system, you can add it to a styleguide.

• Go the page in your styleguide where you want to display information from the component
• Add the Status table block

• Click Component status table

• If you have multiple component sets created from the styleguide, you'll need to select the component set you want to add. If you only have 1 - it will be added immediately,

Any changes you make to the component set will be reflected in the Component set table in the styleguide.

Component set tables and releases

Changes to the component set are not applied to component set tables in previous releases - only the latest release. So the component set table in previous releases reflect the status of components when the release was created.

Component set feature overview

Editing components

Manually edit a component by clicking Edit on the right side of a component.

You can:

• edit the name
• edit a link
  • you can either remove the link completely or link to a new item in documentation, Storybook or Figma
• edit a status
  • you can also edit the status directly from the table
• configure whether or not the component’s links can update via sync
  • learn more about locked components here
• delete the component
  • you can also delete components by checking the box next to their names and clicking the Delete button

Unconfirmed components can also be confirmed via the Edit menu or by checking the box next to their names and clicking the Confirm button

Adding components

To do add a component:

1. Click the Add component button
2. Provide a name for the component
3. (Optionally) link to documentation, Storybook and/or design
4. Click Create component

Managing statuses

Components in your sets have an editable status.

For Storybook and Design, statuses are auto-set to Ready when a link is matched and To do when it’s not. For Documentation, if your linked Styleguide doesn’t use page status tags, the same rule applies.

But if your Styleguide does use page status tags, the status tag is synced with the component set. Updating a component’s Documentation status will update the page status tag – and vice versa.

You can disable or enable component/page status syncing by clicking the kebab menu in the Documentation column heading:

Statuses can be edited directly from the table or by Editing the component.

When the Documentation status is linked to page status tags (and you’re on a paid plan), you’ll be able to edit the available statuses using the page status tag feature. Note: you won’t be able to add a status for a component that’s missing a documentation link in this scenario.

In all other cases you’ll be able to choose from the statuses above.

Syncing the component set

As your documentation, Storybook and design sources evolve, you can keep your component set in sync with its sources:

You can either sync all or individual sources. When a source is synced:

• If sources contain components that are new since the last sync, they’ll be added to the set
  • If the names match an existing components, they’ll be linked to them. Otherwise they’ll be linked to new components.
  • The statuses will also update according the same logic described above
• If the names of components within sources have changed, links to components may change

In addition, when design is synced, the component previews from Figma are updated.

Locked components

If a component is manually added to a set or its link to a source is set manually, the component becomes locked.

Locked components’ links will not be modified (unless the linked item no longer exists in the source) during a component set sync.

A sync will still update the locked components’ display name, hyperlinks and Figma previews.

You can manage whether or not a component’s links will update via a sync by toggling the component links can update via sync setting when editing a component.

Managing a component set’s sources

If you want to add new or modify existing sources you can do so via the kebab menu:

If you didn’t connect a Storybook site and/or Figma file when you created your component set, you’ll be able to do so here.

You can make the following changes to existing linked: sources

• Change the section(s) of the styleguide
• Change the Storybook site and/or sections
• Change the Figma file and/or sections

Find components

If you’re looking for a specific component you can search for it by name:

The component set can be filtered according to whether the component has a link to each source. For example – if you want to filter your list of components to show all of the components that aren’t linked to Storybook

FAQ

Can I connect multiple styleguides/design files/Storybook sites to a component set?

Yes. You can select multiple Figma files or Storybook sites but only one styleguide can be selected. If you’d like to see multiple Design or Storybook columns in your set, let us know.

Can I delete or rename my component set?

Yes. Navigate to Resources, make sure you’re on the Components tab and click the kebab menu in the for the component set.

How many component sets can I create?

The limit is currently 5 per account, but this will be reviewed and may change following the beta period.