DEV Community

Loot Nurakhmetov
Loot Nurakhmetov

Posted on

Revolutionizing Figma Text Management with My Lokalise Plugin

The Text Management Challenge in Figma

As designers and developers, we often find ourselves navigating the intricate world of digital design tools and localization platforms. Figma, a leading interface design tool, offers unparalleled flexibility and efficiency. However, even in this advanced ecosystem, managing texts can be a challenge, especially when it comes to localization.

The Struggle with Manual Synchronization

The manual process of updating texts from Lokalise in Figma often becomes a bottleneck for designers and translators. It involves a repetitive and meticulous task of ensuring that every text element in Figma matches the latest translations in Lokalise. This not only consumes valuable time but also increases the risk of inconsistencies and errors in the design. The need for an automated, efficient solution to streamline this synchronization is evident, as it would greatly reduce the likelihood of errors and save significant amounts of time in the design and localization process.

Introducing the Plugin

This plugin seamlessly integrates into Figma workspace, adding powerful features without disrupting your existing workflow. Once installed, it allows you to connect directly to your Lokalise account using an API token. From there, you can effortlessly manage text synchronization:

  • In Figma: The plugin scans your design file to identify text elements and links them to Lokalise, preparing them for seamless translation and localization.
  • In Lokalise: Once texts are translated or updated in Lokalise, the plugin enables you to pull these changes back into your Figma file, ensuring that your design stays updated with the latest content.

Key Features of the Plugin

Overview of a project
The Lokalise plugin for Figma is designed to transform the way teams manage text in their design projects. It brings a host of powerful features, split into two primary models: Push and Pull.

Push Model - From Figma to Lokalise

Automatic Text Linking: When you click 'Auto assign texts', the plugin scans your Figma file to identify and link text elements to Lokalise. This automates the process of preparing texts for translation.

Multiple Key Handling

If multiple keys are identified for a single text element, the plugin offers a choice of keys to the user, ensuring precision in text mapping.
Multiple Key Handling

Key Generation

In cases where no key is found, the plugin suggests a new key name based on the text content. This can be customized by the user, offering flexibility and control over key naming conventions.
Key Generation

Pull Model - Synchronization with Lokalise:

Easy Text Updates
Easy Text Updates: With the 'Sync' button, the plugin fetches the latest translations from Lokalise and updates the linked text elements in Figma, ensuring your design is always up-to-date.

Individual Text Adjustment
Individual Text Adjustment: Users can also click on specific text elements in Figma to manually adjust their linked Lokalise keys or change the language. This feature provides an extra layer of customization and is particularly useful for projects with multiple language versions

Try the Plugin and Share Your Ideas

I invite you to experience the difference my Lokalise plugin can make in your Figma workflow. Check out what it can do, play around with its features, and see how it can make your design localization a breeze.

Get the Plugin Here: Unofficial Lokalise Plugin for Figma
Full demo here: https://youtu.be/VPveQklO4OE

Your suggestions for new features or improvements are always welcome!

Top comments (0)