custom figma Plugin Development

Learn how we built a custom Figma plugin for a language service provider to translate designs into various languages without building them from scratch.

Project Description

Translated collaborated with CodeRiders to build a plugin for the collaborative interface design tool, Figma. The plugin allows Figma users to translate their design into multiple languages without leaving Figma. One of CodeRiders’ software developers worked on this 4-month project together with a project manager.

CodeRiders’ software developer provided daily reports about the project's progress through online calls, while our project manager held organizational calls to deal with the non-technical questions. Our first cooperation with the team Translated was a success, so we carried on with other projects as well. Now, our partnership is ongoing, and we are working on other projects, providing custom API development services for the translation industry.

Challenge

Translated is an Italy-based language service provider. It uses a powerful combination of human creativity and machine intelligence to craft consistent, high-quality translations at speed by translating professional documents, manuals, websites, and software and adjusting them to the client's schedule and requirements.

The company provides human translation services in 194 languages and 40 areas of expertise. Translated has been in the market for the last 20 years and has over 260K+ clients.

CodeRiders provided one software developer and a project manager to expand the company’s “service package” and to build and implement a new translation plugin for Figma users.

The client’s goal was to expand its variety of services to Figma users by translating designs into various languages without building them from scratch.

Solution

CodeRiders built and implemented this plugin from scratch. We cooperated closely with the client on a time-and-material-based software development engagement model using Agile methodology. The plugin should have had 2 types of translation flows: machine only and human. We created and combined these 2 translation flows along with the following main functions and more:

  • Build simple ModernMT API key memorization to request translation and manage memories. ModernMT is the state of the art machine translation platform.

  • Build translation tabs with the following selections through base import functionality:

    • Content selection
    • Service selection
    • Language selection
    • Settings selection
  • Log-in functionality for human translation users and order tracking functionality

  • Update functionality for translate tabs

  • Connect with the Translated TMS (translation management system), TranslationOS in human translation requests

  • Work with Webpack to combine all the project modules into one or more bundles

  • Work with UI design.

The CodeRiders' project manager took care of all the non-technical questions, management, and organizational matters as the software developer was experienced enough to carry on with smooth communication.

The project is already completed and will be available in the Figma plugin community soon.

Technologies

  • React.js
  • Redux
  • Webpack
  • Plugin API

Client Name

Translated

Country

Italy

Industry

Language service provider

Team Composition

1 software developer, 1 project lead

Duration

4 months

Client's

Feedback

...

“CodeRiders gave us very valuable support for the design of the Figma plugin. We agreed on the project management workflow and the checkpoints, the deadlines and the expectations, and, from there on, the project flowed in a linear way with effective and productive collaboration between the project leader and the developer. The outcome is very satisfying for us in terms of the quality of the product and with respect to the timeline and budget. For all these reasons, we started a new project together that is currently in the development phase.”

Antonio Farina

Director of Engineering, Translated

See Also

Total size should not exceed 10 MB