7 questions to ask yourself before you adopt Figma as a Source of Truth
Do you have a multilingual product designed in Figma? Then you’ve probably wondered if it’s worth adopting it as a SoT, or if sticking with the regular integration will do. Find answers to the most common questions here before you commit.
Figma has transformed design workflows by enabling real-time collaboration and rapid prototyping, making it a favorite among software development teams. Its cloud-based platform allows designers and developers to work together seamlessly regardless of location, speeding up the design process and enhancing creativity through immediate feedback. With its intuitive interface and flexible integration capabilities, Figma has become essential for teams seeking streamlined and adaptive design solutions.
This flexibility has sparked interest in moving the localization process closer to the design phase of the development cycle. Many teams aim to prototype their designs in various languages before development to ensure they look just as great in languages with longer words (looking at you, German 👀), different alphabets, or right-to-left scripts.
There are multiple approaches to previewing Figma designs in different languages. In this article, we'll focus on the tightest and most robust integration of all — turning Figma into the Source of Truth (SOT) for all your textual content. These are some of the most commonly asked questions we get from our clients about it.
🔎 Is Figma as a SOT a good solution for us?🔗
Before deciding if Figma as a SOT is right for you, let's explore what this workflow entails and the potential benefits it can bring.
Design all possible scenarios🔗
The main benefit of using Figma as SoT is creating a tight link between your designs and the user-facing product. Every possible user scenario must be designed in Figma, which has some advantages.
⭐️ Benefits
Allow for concurrent translation and development processes🔗
Translators can translate the uploaded content at the same time as developers work on the new features.
⭐️ Benefits
Handle duplicates in Localazy🔗
We offer various strategies for handling duplicated content, including Duplicate Management, Translation Memory, and the Clustering feature.
⭐️ Benefits
What you need to consider🔗
While these benefits are significant, it's essential to weigh them against the added complexity and demands on designers. Designing all possible scenarios requires a profound understanding of the product, the design, and how customers are expected to interact with new features. This approach can slow down the design phase but significantly enhance the designs' robustness.
Developers also face increased complexity. Traditionally, developers define source keys directly in their codebase, so adapting to this new workflow can take time. However, once accustomed, the time commitment becomes comparable.
So, is it a good solution for you? We believe it can be, but it's crucial for you and your team to understand the implications and how it will affect your production cycle before you decide.
⏩️ Is it even possible for us at this stage?🔗
Absolutely – adopting Figma as a Source of Truth is feasible at any stage of your product development. However, you'll need to prepare your team for this shift, educate them on how to work under the workflow and oversee the implementation. It's a significant change; every team member must understand and adapt to this new workflow.
For larger projects, synchronizing existing designs with the developed product can take a few weeks. This involves migrating current designs to Figma and linking them to keys in the code. We can partially automate this process by assisting you in building a custom script, but you'll still need to create any missing designs in Figma and remove unused keys in the code.
While this transition is possible at any stage, implementing it as early as possible in your product's lifespan is easier, and the transition period is more seamless.
🤹♂️ How does it affect designers, developers, and translators? And our whole production cycle?🔗
The integration of Figma as a Source of Truth brings distinct changes and benefits to designers, developers, translators, and the overall production cycle.
Designers🔗
Designers are required to consider and design all possible scenarios, notifications, and error states to ensure that all textual content is available in the TMS. The benefits include greater confidence in their designs and a deeper understanding of the entire user experience. Additionally, they can import the translations back into Figma, allowing them to view all language variations at a glance.
Translators🔗
Translators gain significant advantages. They have access to Figma screenshots, allowing them to see the context of the content. Moreover, they can begin the translation process much earlier without having to wait for the developers to implement the designs.
Recommended by LinkedIn
Developers🔗
Developers no longer need to upload source keys themselves. Instead, they use source keys that have already been uploaded from Figma. Depending on the devs' expectations, these keys can have readable names assigned by designers in Figma or be renamed and organized with export aliases in Localazy. Although this requires developers to adapt to a new workflow, their work pace isn't slowed down once they are accustomed to it, as they would still need to name and organize the keys regardless of the process.
With Figma adopted as a SoT, developers no longer need to upload the source keys themselves, translators get more context and freedom, and designers can import translations back to Figma to visualize all language variations at a glance
🤔 Can we prepare only some designs in Figma and implement the rest without it?🔗
We advise against this. It's best to either prepare everything in Figma or not use Figma as the Source of Truth at all. Mixing methods can lead to confusion over what exists in Figma and what doesn't, increasing the risk of duplicated keys or lost content. Furthermore, this fragmentation undermines one of the workflow's main benefits — the design robustness that comes from planning all possible scenarios before development.
However, if you're unsure about adopting this workflow, consider alternative approaches like quick prototyping in different languages using machine translations. Quick prototypes enable designers to preview their designs in various languages, boosting their confidence without necessitating any changes in the workflow of other teams.
🤓 Can Localazy help us implement this workflow?🔗
Absolutely! Localazy offers extensive resources, including articles and a YouTube video, to guide you through this process. If you plan to migrate an existing project and connect it with your Figma designs, we can provide a script template and assist with customizing it to fit your project structure. This script will automatically link keys in your code with text nodes in Figma and identify strings that exist only in your codebase or Figma, ensuring a seamless integration of your workflow.
🔦 Is there a point in using the Figma plugin if Figma is not the SoT?🔗
Even if Figma is not the SOT for your textual content, using the Figma plugin can still offer significant benefits. One of the primary use cases for the plugin is previewing translations in different languages before handing the designs over for development. 🧑💻 This functionality allows you to see how your designs look with various translations, helping to ensure that nothing overflows and that the overall visual appeal remains consistent across different languages.
By incorporating the Figma plugin into your workflow, you can identify and address potential issues early in the design phase. This ensures that your designs are polished and user-friendly, regardless of the language, greatly enhancing the quality of the final product.
🎨 Can it help us create a more visually consistent product?🔗
Absolutely. Using Figma as a SOT can significantly enhance your product's stability and visual consistency. By designing all possible scenarios, notifications, and error states in Figma, you address potential issues during the design phase rather than discovering them after release. This approach ensures that every aspect of the user experience is considered and refined before development begins.
Moreover, designers benefit from increased confidence in their work. With Figma serving as the SOT, they can trust that what they see in the design tool closely matches what users will experience in the final product, at least regarding textual content. For visual accuracy, however, designers must rely on developers to implement the designs with pixel-perfect precision.
To further enhance this process, you can combine quick machine translations with Figma's capabilities. Start by connecting to a separate Localazy project to preview your designs in various languages using machine translations. This helps identify and address initial design gaps. Once the designs are polished, you can then connect Figma to your production project and use it as the SOT for both translators and developers.
📌 Additional considerations🔗
Before committing to using Figma as a Source of Truth, there are several key factors to consider to determine if this workflow aligns with your needs:
1. What is your release cadency?🔗
Figma as a SOT introduces a longer and more complex workflow, but it ultimately leads to a higher-quality product. If your team values quick release cycles and operates under tight deadlines (which is common in startups), you may find that a faster release cadency is more suitable for your current needs.
2. Do you often go through multiple design and development iteration rounds?🔗
One of the advantages of using Figma as a SOT is the ability to work on translations and development concurrently. This can significantly streamline the process and reduce time to market. However, it requires well-thought-out designs. If your workflow involves frequent iterations of designs and textual content after development has started, Figma as a SOT might have limited benefits.
3. Where are you in the project lifecycle?🔗
Implementing Figma as a SOT is generally easiest at the beginning of a project. If you're considering adopting this approach later in the project lifecycle, it's better to make the change sooner rather than later.
By carefully evaluating these factors, you can make a more informed decision about whether integrating Figma as a Source of Truth will benefit your project and team.
✔️ Conclusion🔗
In summary, adopting Figma as a Source of Truth can offer significant advantages in creating a more robust, stable, and visually consistent product. By centralizing your textual content in Figma, you can streamline your design and development processes, ensuring that all scenarios are carefully considered and translations are accurately reflected. This approach not only enhances the quality of your product but also facilitates concurrent translation and development, ultimately speeding up your release cycles.
🤓 Need more resources? Find all of our Figma plugin guides here, or check our documentation for the full technical details
However, it's important to weigh the benefits against the added complexity and time required for implementation. Consider your team's release cadency, the potential for working on translations and development simultaneously, and whether implementing Figma as a SOT fits best at the beginning of a project or later in its lifecycle.
If you need guidance on whether this workflow suits your team, don't hesitate to get in touch. We're here to help you navigate the transition and optimize your design and development processes.
Author: Daniel Charvat