Design and component life cycles

We have talked about "continuity" a lot, so it's about time we address how to deal with change in practice.

Let's look at a few different ways in which we can support a mature design and component life cycle. It's going to be a mixed assortment of things:

  • Figma document versions

  • Handling changes in token names

  • Supporting versions in Storybook

  • Some tips on deprecating tokens and components

  • How to protect your code against a rapidly changing Figma file

Let's begin with versioning.

How to version your Figma document#

Figma's documentation on version history is instructive and concise if you need a reference to bookmark for later.

You can access Figma's version history by clicking the small arrow to the right of your file name and then selecting Show version history.

Show version history

Figma will autosave your file after an interval of inactivity (currently 30 minutes of inactivity), so you should see some number of previous versions as well. A version can be loaded individually, as you will soon see.

Figma explicitly states that version history is not the same as version control, which is to say that it doesn't quite fill the shoes of something like Git to store and control your Figma data. Instead, you should see the version history capability as a way to keep certain linearly changed file states available.

To store a version, click the plus sign. Add your title and description; note that the title will be used exactly as written when you specify which file you want to load in Figmagic's configuration.

Version history

You can edit the title and description after creating the version, so no biggie if you slip up here. Do this by right-clicking and choosing Edit version info.

Edit version info

I'll adjust a couple of colors (styles, tokens) and create a version here so we can try it out.

Loading a versioned file with Figmagic#

To actually use the versioned file, we will modify our Figmagic configuration (figmagic.json), so go ahead and open it up.

Add a version key to it, and the value should be a string representing whatever your version file was called. Example:

Before adding the version key, Figmagic would always automatically resolve to use latest, which you can also pass in manually if you'd prefer.

Make the change and pull new tokens with npx figmagic. You should see the new tokens appear just like expected.

This is powerful stuff and something you could definitely combine into your design process or as a mechanism to safely try out bigger changes to complete sets of tokens and similar large-scale disruptions without risking messing up the actual Figma file.

How to handle token name changes#

Token name changes in individual applications shouldn't be too hard. Trivial token name changes, like a color token named DeepBlue changing into DarkOcean, could be handled with a basic find-and-replace-all in any application or system using the old token name.

Figmagic also has some built-in resilience when it comes to parsing unknown values, for example, if tokens would remain unchanged after updating elements. For element generation, it will also prompt whatever it couldn't connect to known token values.

Start a new discussion. All notification go to the author.