Extract content strings
by Jess Eddy
Extract content strings from you Figma files with unique IDs in layer names.
Installs
28
Likes
7
Users
294
Views
939
Preview
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 worksThis 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 pluginThis 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.
Example unique ID: user.profile.settings.modal.descriptionYour search prefix: user.profileEnsure the full unique ID is used as the layer name for the corresponding text.
Text layer name: user.profile.settings.modal.descriptionIn summaryDefine a prefix for your content strings (e.g., “user.profile”).
Ensure the full unique ID is used as the text layer name (e.g., “user.profile.settings.modal.description”).
Enter your prefix and run a search.
The plugin will scan the text layers and match content based on your prefix.
Easily copy and paste the extracted content strings.
More import & export plugins plugins
View allhtml.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)
Paidby divRIOTS
Convert any website into fully editable Figma designs
Figma to HTML
by Figma2HTML
Convert Figma design to HTML
TinyImage Compressor
Paidby Hypermatic
Export/downsize compressed JPG, PNG, SVG, WebP, GIF, WebM, MP4, AVIF and PDF image files from Figma
Pitchdeck Presentation Studio
Paidby Hypermatic
Turn your Figma designs into animated slide decks or export them to PowerPoint/PDF