Extract content strings

About this plugin

Read the post and documentation for this plugin.

Download a test file.

This Figma plugin helps you surface and extract content strings from your designs by scanning your Figma file for text layer names containing unique IDs, making it easy to copy and paste content strings for use outside of Figma.

How this plugin works

This plugin scans text layers on the current page of Figma file for content that matches the prefix of the unique ID (e.g., “content_string_”) you define. Most developers rely on prefixes to organize and manage these strings, and a typical content string might look something like this:

key: 'user.profile.settings.modal.description'

value: 'Adjust your profile settings'

context: 'A brief description indicating the purpose of the modal.'

A content string can include additional details, like the “context” in this example, but it must always contain a unique ID (sometimes referred to as a key, ID, or token) and the actual content, often called the value:

key: 'user.profile.settings.modal.description'

value: 'Adjust your profile settings'

Developers use the unique ID in their code to reference and display the corresponding content. This approach is particularly useful when localizing content, allowing teams to manage translations easily. By separating content from the code, developers can easily swap out language-specific strings without disrupting the application.

How to use this plugin

This plugin requires some initial manual setup to link unique IDs with content. Once configured, you can quickly copy and paste all your content strings!

The plugin scans text layers on the current Figma page for content strings that match the prefix of the unique ID you define (e.g., “content_string_”).

For example, if your content strings begin with “user.profile”, you’ll use that as your prefix.

1. Example unique ID: user.profile.settings.modal.description
2. Your search prefix: user.profile

Ensure the full unique ID is used as the layer name for the corresponding text.

1. Text layer name: user.profile.settings.modal.description

In summary

1. Define a prefix for your content strings (e.g., “user.profile”).
2. Ensure the full unique ID is used as the text layer name (e.g., “user.profile.settings.modal.description”).
3. Enter your prefix and run a search.
4. The plugin will scan the text layers and match content based on your prefix.
5. Easily copy and paste the extracted content strings.