Export/import your Figma string variables to and from any spreadsheet app.
Figma Community page »
Watch the Demo (coming soon)
·
Report a Bug
·
Request a Feature
Table of Contents
String-along is a convenient Figma plugin designed to streamline the management of string variables within your design projects. With String-along, you can effortlessly export your string variables to a spreadsheet-compatible format, make edits or translations, and seamlessly import them back into Figma.
By providing a seamless bridge between Figma and your preferred spreadsheet software, String-along empowers you to efficiently manage and update text content across your designs. Whether you're working on a website localization project, updating copy for multiple screens, or simply need an organized way to collaborate on content design, String-along has you covered.
Features:
-
Select any collection: Easily export string variables from any of your collections in Figma. You have the flexibility to select the collections you want to export string variables from. As long as the collection has at lease one string variable, you can export their values with one click.
-
Copy/paste friendly formatting: The exported text is formatted in a way that allows you to directly paste it into any spreadsheet software of your choice. No cloud-tool authentication required. Effortlessly copy and paste the exported content into your spreadsheet and start editing.
-
Simple Import: Once you have made the necessary edits or translations in your spreadsheet, importing the updated values back into Figma is a breeze. Simply select the rows and columns containing the updated values, and copy/paste them directly into the String-along plugin. It will recognize the structure and map the values back to their respective string variables in Figma.
-
Flexible Delimiter Support: String-along offers the flexibility to choose any delimiter of your preference. Whether you prefer commas, tabs, or semicolons, String-along is designed to adapt to whatever you paste into it.
-
Preview your changes: When you paste your updated variables, the plugin will provide you with a tabular preview of the variable values and highlighting the values that will be updated.
-
Support for line-breaks, punctuation, etc.: Need a newline in your string? Want to use a punctuation that may or may not break a basic CSV parser? String-along handles all of these with no issues... that I know of! If you find one, report it please.
Limitations:
-
Import Schema: Currently, the import feature in String-along only supports the column schema of the exported spreadsheet. It means that you cannot upload any arbitrary spreadsheet for importing. The structure of the spreadsheet should match the exported schema.
-
Creating Modes and/or Variables on Import: Right now, the plugin only works as a way to update your existing variables. You can't create a new "mode" or a new variable at the same time as you import.
-
Variable Aliases: String-along does not fully support variable aliases at the moment. While the plugin allows you to export and import string variables, it may not handle aliases as expected. Open an issue if this is a deal-breaker for your use-case.
-
Error Descriptions: The error messages provided by String-along are not as descriptive as they could be. I'm working on improving the error handling to provide more detailed and useful descriptions.
-
Components' Text Property Limitation: Unfortunately, Figma itself has a limitation (as of now) where variables cannot be attached to component text props. This limitation is inherent to Figma and not specific to String-along but it's worth mentioning. For more information, you can refer to this discussion.
As Figma's variable functionality evolves and the API reaches its final version, addressing these limitations will become a priority.
-
Install it: Go to this page and click on "Try it out".
-
Run it: You can either click on "Resources" in the toolbar, then select the "Plugins" tab, and search for "String-along". Or you can right-click anywhere on the canvas, hover your cursor over "Plugins" to open a list of all the plugins you've installed on Figma, and click on String-along. OR press
Command + /orCtrl + /and type String-along. If the plugin is already installed, each of its commands will appear for you to run.
-
Export: Select the "Export string variables" plugin command. When the modal opens, select the collection you want to export from the dropdown input on the top-left and then click on "Generate". The resulting spreadsheet-compatible format of your string variables can be copied to your clipboard by clicking on the... well, giant "Copy" button!
-
Edit your variables: Go to your spreadsheet software, paste the variables, and get to editing. It's important that you don't change, edit, or add to the column headers. For now, you can only edit or remove any cell in the "String" column.
-
Import: Copy your updated columns and cells and run the "Import string variables" plugin command. Click on the text area and paste it. If the parsing goes well, the "Preview" tab will be enabled. You can use it to check the parsing and see what is going to change when you click on "Import". Then you can go ahead and do just that to update your variables.
- Update the theme to match Figma's styling.
- Refactor the code to make it more contributor friendly.
- More descriptive errors.
- (Considering) Ability to export annotated frame PNGs of where each string variable is used.
- Re-write in Typescript and maybe move to Svelte for more sensible code-splitting.
- Create modes and variables on import.
- Arbitrary import schema support.
Right now the code is in a "designer larping as developer" state. If you promise not to shame my abilities, you can fork the project, build your changes using npm build, and send a pull request. Bundling is done using Grunt and a few plugins for injecting CSS and JS.
Distributed under the MIT License.