How to deprecate old components in Figma design systems

In Figma, if you delete a component from a shared library, every instance of that component in any designs you’ve used it in will link to the last history point that the component existed.

A real-world example

When first creating Onfido’s design system in Figma, I wanted to try and achieve more flexibility, and give designers more options than our Sketch libraries at the time had support for.

Master components for each button state
New components, simplified to from eight to two master components.

1. Make deprecated elements visible

When the core problem is deprecated components not being visible, the obvious solution is to make them extremely visible. We do this with a shared component in our utilities library called [DEPRECATED].

Our component for making deprecated elements visible.
The deprecated layer being applied to our button.

2. Make deprecated components even more visible

While this layer makes it pretty clear on the canvas, it’s less clear in the layers panel unless you have the component expanded. So to be ultra-clear, we rename the layer to include a warning emoji and a big all-caps DEPRECATED to the end of the component name.

Make it clear in the layers panel by renaming the component too.

3. Publish your component

I’m not entirely sure this step is necessary, but to be very explicit about it I publish this visible version first, before deleting the component. If you wait a few days before going onto the next step, you’ll also give your team time to notice and give you a heads up if they really don’t want a component deprecated for one reason or another.

4. Delete your component

An earlier version of this article contained the following guidance for this step:

5. Other considerations

Auto-layout: We first developed this approach before auto-layout existed. This won’t work for components that have an auto-layout set on a component, as any component added would be put into the auto-layout flow, rather than being placed on top of the other layers. The workaround for this is creating a Fill style with the same tiling bitmap, and replace the component’s fill with that style.

Product Design Lead @ Onfido

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store