Sheets <> Variables
One Source of Truth: Building a Figma Plugin to Align Copy Across Teams
Product Background
Managing UI copy in design systems can be a logistical nightmare—especially with multiple contributors and over 50 Figma files. Updates often originate outside of Figma from non-designers, and even when made within Figma, they rarely reflected across all screens and files. This led to multiple versions of the same copy and confusion among QAs, PMs, engineers, and designers.
We initially experimented with storing copy in Figma components and later with variables. But Figma wasn’t intuitive for everyone, so we moved the source of truth to a more familiar and accessible tool: Google Sheets.
Designers became consumers of copy written in the Sheet. The challenge then became: how can we keep Figma updated without relying on manual effort?
Existing plugins in Figma community didn’t meet our needs, so I decided to make it my personal quest to build a custom solution–the Sheets <> Variables plugin.
Team
Alin Saenchaichana, Product Designer & Developer (Me)
My Role
I independently ideated, designed, and developed the Sheets <> Variables plugin, leveraging Google Sheets API, Figma Plugin API, and AI to create an automated synchronization process.
Development Timeline
3 nights :P
Year
2025
The Problem
Challenges to Solve
- Manual updates between Google Sheets and Figma variables were unsustainable and error-prone.
- No existing plugins supported key requirements, such as reconciliation, ignoring rows and columns, and tab-to-collection mapping.
Goals
- Automate syncing between Google Sheets and Figma variables.
- Build a flexible tool that accommodates real-world workflows.
The Journey
Understanding the Pain Points
From our workflow, I found that most Figma plugins didn’t work well for real-life use cases. They expected the spreadsheet to be too clean and structured, which wasn’t realistic for our team.
-
No Reconciliation: When we added or removed variables in Google Sheets, those changes didn’t show up in Figma.
-
Can’t Ignore Rows/Columns: We often use extra rows or columns for notes, but existing plugins couldn’t skip them, causing errors during sync.
-
No Tab-to-Collection Mapping: We organized different components into separate tabs. Each tab needed to map to its own Figma collection, but most plugins only supported syncing from one tab.
Exploring Technical Solutions
As someone who isn’t a professional developer, I relied heavily on AI tools to guide and co-write the code. I utilized the Google Sheets API to read data from a Google Sheet and the Figma Plugin API to map and sync this data into variable collections in Figma.
For the UI of the plugin, I kept it simple by utilizing Thomas Lowry amazing lightweight UI library.
The Solution
Key Features of the Sheets <> Variables Plugin
- Reconciliation Logic: Using Google Sheets as the source of truth, the plugin not only create new variables and update existing ones, but it also delete variables from Figma if they were removed from the Google Sheets.
- Selective Syncing: To give users more flexibility in using Google Sheets, a period (.) can be added to any rows or columns to exclude them from being read by the plugin.
- Tab-to-Collection Mapping: Each Google Sheet tab maps directly to a Figma variable collection. In addition, users can also choose to sync only certain tabs, remove unnecessary sync time and unwanted updates.
The Results
It was rewarding to see the community resonate with the tool and its potential to streamline workflows. The plugin has helped designers manage UI copy, eliminating inconsistencies and manual effort, becoming a reliable tool for teams to synchronize data and maintain a single source of truth.