The Side Effects of Introducing Variants

In late October 2020, Figma released an update containing the highly useful Variants feature. It has many strengths; see the video below.

This document, however, focuses on a side effect of the update.

• If you are unfamiliar with the Google Sheets Sync plugin, see https://www.figma.com/community/plugin/735770583268406934/Google-Sheets-Sync.

Before the Update

1. You could freely rename layers inside a Figma instance.
2. The Google Sheets Sync plugin could bring spreadsheet text into Figma. This required the text-layer names in Figma to match the sheet's column names. When using components, you could rename a text layer inside an instance to match the specific data you wanted to sync.
3. By combining this with reusable components, you could keep one main component and manage multiple text versions simply by renaming layers inside duplicated instances.
4. This was especially useful for managing one project in multiple languages.

After the Update

1. The introduction of Variants changed component naming rules. You could no longer rename a layer inside an instance.
2. To manage text with Google Sheets Sync, you now had to set the text-layer name in the main component.
3. A main component may already be used very broadly. Changing it with every use case in mind takes a great deal of time.
4. In an active project, the fastest short-term response is to detach every relevant instance and rename each text layer manually before syncing the sheet.
5. But detaching naturally removes the benefit of linked components. Regardless of Variants itself, managing text through a sheet now takes more time than before.

A Solution?

• Unless Figma rolls back the change, the existing process cannot continue unchanged, because Figma is a web-based tool.
• The workarounds are not simple either.

1. Name layers with Google Sheets in mind from the moment the main component is created.

→ This could require a design-system-wide refactor.

→ It also prevents using developer-oriented naming for that component.

1. As described above, detach every instance in a project that needs Google Sheets.

→ Figma does not offer a bulk detach action, so deeply nested components make detaching very time-consuming.

→ Once everything is detached, it can no longer be managed at the component level.

Insights

• Because Figma is web-based, users always have to follow the latest update. That is fine when every update is beneficial, but a change that conflicts with an established process becomes a real operational risk.
• It is especially important to remember that plugins are not developed by Figma itself. Plugins are useful, but a Figma update can sharply reduce their value, as it did here. Unfortunately, I do not have a good solution.