Plugin di Figma

Con il plugin di Crowdin per Figma, puoi utilizzare i testi da Crowdin Imprese nei tuoi progetti, per far risparmiare tempo sia ai progettisti che agli sviluppatori. These could include original or translated texts. Se necessario, puoi aggiungerne di nuovi (es. titoli delle finestre, etichette dei pulsanti) e inviarli ai traduttori in Crowdin Imprese.

Casi d’Uso

• Quickly generate multilingual creative assets.
• Traduci i mockup e testali in diverse lingue prima che la programmazione inizi.
• Smetti di usare ‘Lorem Ipsum’, aggiungi testi reali da Crowdin Enterprise ai tuoi prototipi. Le stringhe aggiunte da Crowdin Imprese sono diventate collegate ai campi di testo su Figma.
• Crea e carica le stringhe di partenza dai tuoi design al tuo progetto di Crowdin Imprese. Le stringhe create sono collegate ai campi di testo su Figma. Così, gli sviluppatori potrebbero usare le stringhe caricate, riducendo il tempo dedicato allo sviluppo.
• Anteprima delle traduzioni e chiavi della stringa nei tuoi design.
• Carica screenshot etichettati al tuo progetto di Crowdin Imprese.

Eseguire Crowdin per il Plugin di Figma per la Prima Volta

1. Accedi a Figma.
2. Apri uno dei file del tuo progetto o clicca Nuovo file del progetto.
3. In the file menu, click Plugins > Manage plugins…. Alternatively, right-click the canvas and click Plugins > Manage plugins.
4. Usa il campo Cerca tutti i plugin per trovare il plugin di Crowdin per Figma.
5. Click on Crowdin for Figma plugin and select Save.
6. Passa col mouse sul plugin di Crowdin per Figma e clicca Esegui.

Connettere Figma con il Profilo di Crowdin Impresa

Configurare le Credenziali di Crowdin Imprese

Per specificare le tue credenziali di Crowdin Impresa in Figma, segui questi passaggi:

1. Nel menu del file, vai a Plugin > Plugin salvati. Alternatively, right-click the canvas and click Plugins > Saved plugins.
2. Passa a Impostazioni.
3. Fornisci il tuo Token di Accesso Personale.
4. Specifica il nome di dominio della tua organizzazione e clicca Connetti.

Per generare un nuovo token su Crowdin Imprese, segui questi passaggi:

1. Vai alla scheda Impostazioni dei Profilo, Token d’accesso e clicca Nuovo token.
2. Specifica il Nome del Token, seleziona Ambiti e Progetti, clicca Crea.

Selezionare il progetto di Crowdin Imprese

To select the project you’d like to work with, click the drop-down menu in Settings > Crowdin Project, and select a project from the list. Later, you can click Disconnect in the same section to switch to another project if needed.

Select a content type you’re going to work with in this project and click Save.

You can choose one of the available options:

• UI Localization
• Marketing Visuals Localization

The selected content type option affects which mode of the Crowdin for Figma plugin will be available to a user.

Seleziona il ramo specifico in cui saranno caricati i tuoi contenuti. Se il tuo progetto di Crowdin Imprese non contiene rami, lascialo vuoto.

UI Localization

Use the Strings tab when localizing UI and working on dynamic pages with your development and marketing teams. In questa scheda, puoi aggiungere le stringhe sorgente da Crowdin Impresa ai tuoi design in Figma in un click. Dopo che i testi sono usati nei design, puoi automaticamente caricare gli screenshot etichettati per riferimento ai traduttori in Crowdin Imprese.

Usare le Stringhe Sorgente da Crowdin Impresa in Figma

1. Apri il plugin di Crowdin per Figma.
2. In the Strings tab, use the Search field to find the specific copy. Puoi cercare le stringhe per testo sorgente, identificativo della stringa o contesto.
3. Seleziona il livello del testo a cui desideri aggiungere testo e clicca l’icona del link affianco alla stringa necessaria.

Dopo aver utilizzato le stringhe di origine da Crowdin Imprese nei tuoi progetti, vengono collegate con i campi di testo e puoi visualizzare le traduzioni in anteprima per queste stringhe su Figma e caricare degli screenshot correlati, sul tuo progetto di Crowdin Imprese.

Puoi collegare una singola stringa di Crowdin a uno o più campi di testo su Figma. Tuttavia, un campo di testo è collegabile solo a una stringa di Crowdin. Se colleghi un campo di testo con una connessione esistente a una nuova stringa di Crowdin, la connessione precedente sarà terminata e ne sarà stabilita una nuova. Se vorresti scollegare una stringa di Crowdin da tutti i campi di testo a cui era precedentemente stata collegata, clicca con il destro sull’icona del link affianco alla stringa necessaria.

Aggiungere le Stringhe Sorgente da Figma a Crowdin Impresa

You can add strings that are already used in the designs.

1. Apri il plugin di Crowdin per Figma.
2. Per aggiungere le stringhe usate nei design, seleziona l’intero fotogramma, più fotogrammi o le stringhe necessarie sui fotogrammi.
3. Nella scheda Stringhe, clicca .
4. In the appeared dialog, fill in the required fields. You can filter the displayed strings if needed:
   • Select the Skip hidden elements filter option if some frames contain hidden elements that should not be added to Crowdin Enterprise.
   • Select the Skip untranslated elements filter option if some frames contain untranslated elements that should not be added to Crowdin Enterprise.
     
5. (Optional) To update the string context and set the max.length of the translated text, click toward the needed string.
6. Once all the needed strings are selected and configured, click Next.
7. In the next dialog page, select the preferred options:
   • Auto-link existing strings – automatically compare text to existing strings in Crowdin Enterprise. If there’s a match, the text element will be linked to the string in the Crowdin Enterprise project.
   • Create missing keys – only new text elements are added to Crowdin Enterprise.
   • (Optional) To add labels to the strings, alternately select them from the Select Label drop-down menu.
   • Merge duplicates – link identical text elements to a single new string in Crowdin Enterprise. È utile nei seguenti casi:
     • Aggiungendo diversi campi di testo con lo stesso testo, il plugin aggiungerà solo una stringa al tuo progetto di Crowdin Imprese e collegherà a essa tutti i campi di testo duplicati.
     • Se il tuo progetto di Crowdin Imprese contiene già una stringa con lo stesso testo che stai aggiungendo dai progetti, il plugin collegherà solo i campi di testo alla stringa esistente e non ne creerà di nuovi.
   • Send screenshots
8. Select the file in Crowdin Enterprise to which you want to add the strings. To add the same strings into multiple files in Crowdin Enterprise, alternately select the needed files from the Select File drop-down menu.
9. Clicca su Invia.
10. Once the strings are added to Crowdin Enterprise, you’ll see a summary of the content sent.

Le stringhe aggiunte saranno trasferite al tuo progetto di Crowdin Imprese e, inoltre, saranno mostrate nell’elenco della scheda Stringhe. You can edit, hide, or delete the strings from the same list anytime. Le rispettive modifiche saranno applicate anche alle stringhe nel tuo progetto Crowdin Enterprise.

Aggiungere Stringhe Sorgente con Forme Plurali

Puoi aggiungere le stringhe con forme plurali.

1. Apri il plugin di Crowdin per Figma.
2. Per aggiungere le stringhe usate nei design, seleziona l’intero fotogramma, più fotogrammi o le stringhe necessarie sui fotogrammi.
3. Nella scheda Stringhe, clicca .
4. In the appeared dialog, fill in the required fields. You can filter the displayed strings if needed.
   Note: When adding plural strings, the fields in the String column serve for adding the other plural form.
5. Click toward the needed string and click Add plurals.

6. In the appeared dialog, fill in the fields for each plural form and click Save. Depending on the source language of the connected Crowdin Enterprise project, there could be a different number of plural forms you should specify.

   Nota: Puoi aggiungere le stringhe plurali solo ai file che supportano le forme plurali (es. Android XML, Stringsdict, XLIFF, etc.).
7. Once all the needed strings are selected and configured, click Next.
8. In the next dialog page, select the preferred options.
9. Select the file in Crowdin Enterprise to which you want to add the strings.
10. Clicca su Invia.

Leggi di più sulle Forme Plurali.

Configurare i Segnaposto della Stringa Sorgente ICU

Usando le stringhe ICU nel tuo design, puoi impostare i valori dei segnaposto e, dopo aver aggiunto tali stringhe ai design, saranno mostrate in una vista formattata coi valori pre-configurati.

Once you use the needed ICU string from Crowdin Enterprise in your design, you can configure its placeholder values.

1. Apri il plugin di Crowdin per Figma.
2. In the Strings tab, use the Search field to find the specific copy. Puoi cercare le stringhe per testo sorgente, identificativo della stringa o contesto.
3. Clicca sulla stringa ICU necessaria.
4. Clicca Imposta segnaposto.
5. Digita i valori necessari per i segnaposto della stringa ICU.
6. Clicca Invia per salvare i segnaposto inseriti.
7. Click Submit to update the source string text in designs.

Visualizzando le traduzioni in anteprima per le stringhe ICU su Figma, saranno mostrate anche in una vista formattata se i valori sono stati precedentemente pre-configurati.

Key Naming Pattern Settings

Per semplificare l’aggiunta di stringhe da Figma al progetto di Crowdin Imprese, puoi configurare lo schema di denominazione della chiave desiderato per gli identificativi della stringa sorgente nelle impostazioni del plugin. Il plugin di Crowdin per Figma suggerirà gli identificativi della stringa per le nuove stringhe in base allo schema selezionato. While adding new source strings, you can always edit the suggested identifier to the preferred look.

To select the key naming pattern, follow these steps:

1. Apri il plugin di Crowdin per Figma.
2. Passa a Impostazioni.
3. In the Key naming pattern section, select the preferred option from the drop-down menu.

Oltre agli schemi esistenti, puoi configurare il tuo. Per usare uno schema personalizzato, seleziona l’opzione Schema di denominazione della chiave personalizzata dall’elenco a tendina e specifica il tuo schema nel campo Schema di Denominazione della Chiave Personalizzata.

Caricamento di schermate etichettate su Crowdin Enterprise

Aggiungendo le stringhe sorgente usate nei progetti, assicurati di mantenere selezionato Invia screenshot. As a result, the Crowdin plugin for Figma will upload screenshots along with the source strings.

Inoltre, puoi aggiornare gli screenshot con un’opzione Aggiorna screenshot, modificando una stringa di Crowdin collegata ai campi di testo nei progetti.

Inoltre, puoi caricare in massa gli screenshot su Crowdin Imprese, per le stringhe collegate con i campi di testo nei progetti.

1. Apri il plugin di Crowdin per Figma.
2. Seleziona uno o più quadri con le stringhe collegate.
3. Nella scheda delle Stringhe, clicca su per caricare gli screenshot per i quadri selezionati.

Per scoprire di più, leggi l’articolo sugli Screenshot.

Previewing Strings

Visualizza le traduzioni in anteprima da Crowdin Imprese per le stringhe usate nei design su Figma. These could include original or translated texts. When previewing translations in the new frames, you can populate them with the actual translations or with string keys for further use by developers.

To preview strings populated with translations, follow these steps:

1. Apri il plugin di Crowdin per Figma.
2. In the Strings > Preview Strings section, select Preview in duplicated page or Preview in the current page.
3. Select Create with language.
4. Select the target language you want to preview translations for (optionally, you can select the preferred plural forms). You can also choose All languages.
5. Seleziona i contenuti che vuoi vedere in anteprima su Figma. Seleziona Tutti i Quadri o Quadri Selezionati.
   

To preview strings populated with key names, follow these steps:

1. Apri il plugin di Crowdin per Figma.
2. In the Strings > Preview Strings section, select Preview in duplicated page.
3. Select Create with key names.
4. Seleziona i contenuti che vuoi vedere in anteprima su Figma. Seleziona Tutti i Quadri o Quadri Selezionati.
   

Filtering Strings

Per visualizzare solo le stringhe collegate ai campi di testo specifici, segui questi passaggi:

1. Seleziona i campi di testo necessari.
2. Nella scheda delle Stringhe, clicca Filtra stringhe.
3. Seleziona Mostra le stringhe collegate agli elementi di testo selezionati.

Allo stesso modo, puoi filtrare le stringhe collegate ai campi di testo per l’intero fotogramma o per più fotogrammi.

Marketing Visuals Localization

Usa la scheda Pagine per localizzare le pagine statiche, come brochure e banner. In questa scheda, puoi inviare testi con contesto per i traduttori a Crowdin Imprese e ricaricare le copie tradotte su Figma.

Invio di testi per la traduzione a Crowdin Enterprise

Puoi inviare testo per le traduzioni da tutti i quadri o da quelli selezionati da un file di Figma. Translators will work with those texts in the list view and use designs as an additional context for even higher translation quality.

Su Crowdin Imprese, una cartella di root figma-plugin sarà creata. Conterrà una cartella secondaria denominata dal tuo file di Figma con i file HTML per ogni quadro all’interno. If needed, you can disable content segmentation in the plugin Settings so the long texts will not be split into sentences.

Per inviare i design di Figma per la traduzione, segui questi passaggi:

1. Apri il file necessario di Figma.
2. Vai a Plugin > Crowdin per Figma.
3. Nella sezione Pagine > Da Figma a Crowdin, seleziona i contenuti che vorresti tradurre. Seleziona Tutti i Quadri o Quadri Selezionati.

Quando i file sorgente sono caricati al tuo progetto di Crowdin Imprese, puoi invitare collaboratori a tradurli e revisionarli.

Leggi di più sulle strategie di traduzione.

Pseudo-localizzazione

Anche prima del completamento delle traduzioni, puoi verificare se la tua applicazione è pronta a esser localizzata usando la pseudo-localizzazione. Questa funzionalità ti consente di stimolare come apparirà l’UI dell’applicazione con diverse lingue, per verificare se le stringhe sorgente dovrebbero esser modificate prima dell’inizio della localizzazione del progetto.

Una volta inviati i tuoi testi per la traduzione, puoi avviare la pseudo-localizzazione.

1. Apri il file necessario di Figma.
2. Vai a Plugin > Crowdin per Figma.
3. Nella sezione Pagine > Pseudo-localizzazione, seleziona i contenuti che vorresti testare con la pseudo-localizzazione. Seleziona Tutti i Quadri o Quadri Selezionati.
4. Nella finestra apparsa, configura le impostazioni secondo le tue preferenze.
5. Clicca su Invia.

Leggi di più sulla Pseudo-localizzazione.

Caricare le Traduzioni da Crowdin Imprese a Figma

Puoi sincronizzare i testi tra Figma e i progetti di Crowdin Imprese quando vuoi, per verificare la copia tradotta su Figma o generare risorse multilinguistiche.

Per caricare le copie tradotte in Figma, segui questi passaggi:

1. Apri il file necessario di Figma.
2. Vai a Plugin > Crowdin per Figma.
3. Nella scheda Pagine, sezione Da Crowdin a Figma, seleziona la lingua di destinazione per cui desideri caricare le traduzioni. You can also select All languages.
4. Scegli il contenuto che vuoi vedere in anteprima su Figma. Seleziona Tutti i Quadri o Quadri Selezionati.
   Nota: I nomi della pagina in Figma possono consistere di sole lettere (a-z, A-Z), numeri (0-9) e caratteri speciali - _ .

   

Dopo aver caricato le traduzioni su Figma, il file modificato conterrà un quadro separato con le traduzioni per ogni lingua di destinazione. The newly uploaded translated versions won’t override the ones you uploaded previously. You can always delete the translated copies you no longer need.

If you’d like the newly uploaded translated versions to override the previously uploaded ones, open the plugin Settings and select Override existing translations.

Crowdin for Figma Plugin in Dev Mode

Figma’s Dev Mode allows designers and developers to collaborate, ensuring accuracy in implementation and a smooth transition from design to code.

Read more about Figma Dev Mode.

The integration of Crowdin for Figma plugin with Dev Mode extends the functionality of both platforms, enhancing the localization process within the design environment. While Dev Mode in Figma has its limitations – it’s read-only, certain limitations apply to the Crowdin for Figma plugin’s capabilities:

What You Can Do:

• Access the Strings tab to view and manage strings.
• Explore string details, including file, key, context, and labels.
• Quickly copy string keys for efficient workflow.

Features not available in Dev Mode: adding new strings to Crowdin, linking strings, sending screenshots, previewing translations, editing, hiding, or deleting strings.

Using Crowdin for Figma Plugin in Dev Mode

Despite the limitations, the Crowdin for Figma plugin remains valuable in Dev Mode, offering developers a streamlined approach to text elements management. Here’s a typical use case:

1. Enter Dev Mode.
2. In the right sidebar, switch to the Plugins tab.
3. Click on Crowdin for Figma.
4. In the Strings tab, click Filter strings and select Show strings linked to selected text elements.
5. Select the needed string on the frame and hover over the icon in the string list to view all needed information (i.e., key, context, file it’s stored in, labels) about this particular string.
6. (Optional) Click Copy string key to clipboard to further use it in code.

Compatibility with Figma for VS Code

Furthermore, the Crowdin for Figma plugin seamlessly integrates with Figma for VS Code, extending its functionality to developers using this environment.

Read more about Figma for VS Code.