Skip to content

loctools/figma-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Figma Connector

Overview

This connector allows to implement continuous localization approach for Figma documents. Unlike other localization plugins for Figma, it doesn't require manual importing/exporting steps. The premise is that designers work on designs, enable them for localization, all changes are published on a remote translation server, and translations are integrated back into the Figma files. Design changes and translation happen in parallel, with assets being automatically exported and saved as files whenever such changes occur.

Status & Limitations

The main design consideration for this plugin was to enable a continuous localization approach where Figma instance is fully controlled by the automation. Due to Figma Plugin API limitations, there has to be a dedicated (physical or virtualized) Windows or macOS computer that runs Figma with a single file opened and localization plugin running. There's no way to automatically switch between documents, but there can be a single document with multiple pages and multiple localizable frames per page.

Because of the technical limitations above, the plugin must be considered a proof-of-concept code rather than a scalable solution, and will likely require your periodic attention if you consider running it 24/7.

Features

  • Automatic scanning of document pages and frames;
  • Automatic exporting of localization data to a remote server;
  • Automatic import of localized strings back into Figma text object;
  • Automatic generation of final assets and sending binary image data to a remote server;
  • Automatic generation of preview data (for in-context preview scenarios where one can see a highlighted portion of a Figma image with the string being translated);
  • Automatic trimming of the text with ellipsis if it doesn't fit its frame;
  • Handling text objects with rich formatting;
  • Exploring/editing text objects and localized variants.

Usage

See docs/README.md for a guide on preparing designs for localization.

Components

In this repository, you will file the following components:

1. Figma Plugin (plugin-client folder)

Figma plugin that installs in Figma app itself. It allows to create multi-lingual Figma documents, where each text node has multiple variants (languages). Designers can switch assets between variants, and the plugin takes care of auto-fitting the text nodes, showing ellipsis in cases the text needs to be trimmed.

2. Figma Plugin Server (plugin-server folder)

HTTP Server that needs to be installed on the same machine Figma plugin is running. It synchronizes data between the local file system and the Figma Plugin. It allows to export strings into localization files and import translations back into a Figma document, export preview files and final localized assets.

3. Public Preview Server (preview-server folder)

HTTP Server that is installed on a publicly available server to allow previewing the images generated by the Figma Plugin Server (and synchronized via e.g. Git).

4. Example synchronization scripts (sync folder)

See sync/README.md for further information.