Copy to code with our new Figma plugin

We’re excited to launch our Figma plugin. It’s taking us a step closer to our long-term goal of building a complete content design software to support product writing from design to code and back. The Figma plugin gives us a new surface area to meet our customers where a lot of the creative content design process is happening. Stay tuned over the coming months as we're releasing more great plugin features! 

Error-free copy handoff

For new features, handing off new copy usually requires devs to click through the mocks and copy one piece of text at a time into their code. Or, even worse, someone has to create product documentation outside Figma and manually extract the copy from Figma (and then worry about keeping the designs and documentation in sync). That in effect means each copy string has to be copied twice (design to documentation to code). All this can be error-prone and is certainly tedious for everyone involved.

Connecting Figma and Strings

Automatically generate localization-ready code

With our new copy-to-code export feature, Strings automatically generates code that developers can use to start coding the UI with. Here is how it works:

-> Once you’ve installed the plugin, you select the frames to export to Strings.

-> In Strings you can grab the strings code for each platform file type (iOS, Android and JSON for web) and share it with your developers. They save a bunch of steps needing to dig through design documentation to copy text.

-> We  automatically generate the string key names based on Figma design file elements. (They can always overwrite them if they use a different convention.) The code generated follows best practices for each file type and is ready for localization.

Get localization-ready code

Context-rich handover for localization teams

Many localization teams are organizationally separated from the content design process. When they get copy to translate it’s often done “blindly” without the visual context of the design file. We think there is a better way. With Strings, localization teams can view new copy next to the design visuals. Writers can add specific instructions and context for translators to provide additional context.

Localization handover

New free pricing tier

With the launch of the plugin, we also updated our website and adjusted our pricing to provide more flexibility for different team sizes. We also added a free tier! You can take a look here.

More to come

Launching our Figma plugin is just the start of expanding how we support the entire content design process. With Figma’s live collaboration environment, much of the content design workflow is now moving into Figma. We see this as an exciting opportunity to enhance Figma with better writer-specific functionality.

Stay tuned, more cool features to follow shortly.

Try Strings

Strings is a writer-friendly tool for editing an app’s string files.

Start for free