Guida alla traduzione dei file Figma per UX designer

In un mondo sempre più interconnesso, la necessità di esperienze utente di localizzazione si moltiplica. Per i designer UX che vogliono espandere il loro campo d’azione a livello internazionale, la traduzione dei progetti Figma è un passo fondamentale.

Figma è uno strumento di design e prototipazione collaborativo che designer e team utilizzano per creare, condividere e iterare progetti di design in tempo reale. Figma è una piattaforma che funziona sulla base del cloud, consentendo agli utenti di accedere e lavorare sui loro design da qualsiasi luogo e favorendo una collaborazione fluida tra i membri del team. Con Figma, i designer possono creare design UI/UX, wireframe, prototipazioni interattive e sistemi di design. La sua interfaccia intuitiva e le sue potenti funzionalità sono state ampiamente utilizzate dalla comunità di design, rendendo Figma una delle opzioni principali per i flussi di lavoro attuali nell’ambito del design. Figma ha circa 4 milioni di utenti in tutto il mondo e il suo bacino di utenza è in costante aumento.

Questo blog post fornisce una procedura completa per i designer UX affinché possano tradurre efficacemente i loro progetti Figma in altre lingue, mantenendo l’essenza del progetto originale.

Quali sono gli elementi Figma che potresti tradurre?

Quando un progetto Figma diventa globale, solitamente ci si concentra sulla traduzione e sull’adattamento dei seguenti elementi:

1. Contenuto testuale: Include tutti gli elementi testuali nel design, come le etichette dell’interfaccia utente, i pulsanti, le intestazioni e qualsiasi altro contenuto a base testuale. La traduzione del testo assicura che gli utenti con background linguistici diversi possano comprendere e interagire facilmente con l’interfaccia utente.
2. Immagini e grafiche: Alcune immagini e grafiche potrebbero necessitare della localizzazione a seconda del contesto culturale. Alcuni elementi visivi potrebbero avere connotazioni o significati diversi in altri paesi ed è dunque fondamentale rivederli o adattarli.
3. Simboli e icone: Assicurati che i simboli e le icone utilizzati nel design siano culturalmente appropriati e comprensibili per i destinatari. Se necessario, considera la possibilità di creare varianti o alternative per soddisfare specifici mercati.
4. Formati di data, ora e numeri: Questi elementi possono variare da mercato a mercato ed è dunque fondamentale regolare i formati di data, ora e numeri a seconda delle preferenze del mercato di destinazione.
5. Colori: Alcuni colori possono essere associati a culture diverse. Anche se potrebbe non essere una traduzione diretta, un’accurata scelta dei colori può aiutare a creare un design che abbia un maggiore impatto sui destinatari.
6. Layout e struttura dell’interfaccia utente: L'espansione del testo e le modifiche al design potrebbero essere necessarie per conformarsi al testo tradotto senza compromettere l’esperienza complessiva dell’utente. Assicurati che il layout sia coerente e visivamente accattivante in tutte le versioni tradotte.
7. Flussi e interazioni degli utenti: Considera le norme e le preferenze culturali dei destinatari quando si progettano i flussi e le interazioni degli utenti. Alcune azioni o gesti possono essere più familiari e intuitivi per alcuni utenti rispetto ad altri.
8. Call-to-Actions: Le CTA sono fondamentali per guidare gli utenti e la loro efficacia potrebbe variare da una cultura all’altra. Localizza le CTA per incoraggiare gli utenti a compiere le azioni desiderate in modo da avere un impatto maggiore su di loro.
9. Messaggi e notifiche di errore: Assicurati che i messaggi e le notifiche di errore siano chiari, concisi e culturalmente appropriati, e che siano utili agli utenti per comprendere qualsiasi problema incontrato durante le loro interazioni con il prodotto.
10. Informazioni legali e di conformità: Se il tuo prodotto richiede dichiarazioni legali di esclusione di responsabilità, termini di servizio o politiche sulla privacy, assicurati che questi documenti siano tradotti accuratamente e in conformità delle leggi e dei regolamenti relativi al mercato di destinazione.

Preparazione del design Figma per la traduzione

Per garantire un fluido processo di traduzione, è fondamentale impostare correttamente il design Figma. Organizza i tuoi file di design con convenzioni di denominazione adeguate e strutture di livello chiare. Questo sarà utile ai traduttori per identificare e tradurre gli elementi testuali in modo efficace. Evita l’uso di testo incorporato nelle immagini, in quanto rende più difficile il processo traduttivo.

Tradurre il contenuto del testo

Nel presente articolo sul processo di localizzazione, ci concentreremo sulla traduzione del contenuto testuale, che comprende tutti gli elementi testuali all’interno del design:

• etichette utente
• pulsanti
• intestazioni
• e altri contenuti a base testuale

Come abbiamo visto in altri articoli di questo blog, per facilitare il lavoro dei traduttori, l’approccio ideale è esportare il contenuto testuale in un file. Questo file può in seguito essere inviato ai traduttori. Infine, dovresti reimportare il file tradotto nel progetto Figma: ogni contenuto testuale dovrebbe trovarsi al posto giusto per evitare lunghi e noiosi copia-incolla.

Fortunatamente, molti plugin di Figma facilitano questo processo di esportazione-importazione, eliminando la necessità di ricorrere a operazioni manuali. È possibile trovare una panoramica dei plugin disponibili visitando la Figma Community. In questo hub si trovano vari plugin e risorse creati da designer e programmatori. Basta selezionare la sezione Plugins e cercare "translation".

In questo articolo ci concentreremo sul plugin gratuito Conversis Translation XML Text Export & Import, che consente di esportare il contenuto testuale di un progetto Figma nei formati XLIFF o XML e di reimportare il file tradotto in una copia del progetto originale, sovrascrivendo il testo con la traduzione.

Utilizzeremo come esempio un modello gratuito di Figma:

Utilizzo del plugin Conversis Translation XML Text Export & Import

Installare il plugin Conversis Translation XML Text Export & Import è semplice:

1. Per iniziare, apri Figma e naviga nella Figma Community cliccando sul pulsante "Community" nell’angolo in alto a sinistra dell’interfaccia di Figma. A questo punto, si aprirà una nuova finestra con tutti i plugin e le risorse di design disponibili.
2. Una volta entrato nella Figma Community, utilizza la barra di ricerca per cercare il plugin Conversis Translation XML Text Export & Import. Digita il nome del plugin nella barra di ricerca e clicca sul tasto Invio. I risultati della ricerca mostreranno i plugin pertinenti; il plugin Conversis Translation XML Text Export & Import dovrebbe figurare nell’elenco.
3. Dopo aver trovato il plugin Conversis Translation XML Text Export & Import, clicca sulla sua icona o sul suo nome per visualizzarne i dettagli. In questa pagina sono disponibili informazioni sul plugin, tra cui la descrizione, l’autore e le recensioni degli utenti.
4. Per installare il plugin, clicca sul pulsante "Try it out" per visualizzare una finestra di dialogo. Conferma l’installazione cliccando su "Open in Figma design". Figma scaricherà e aggiungerà automaticamente il plugin al tuo spazio di lavoro.

Una volta completata l’installazione, apri il progetto di Figma che desideri tradurre. Assicurati che il progetto contenga tutti gli elementi testuali che desideri esportare per la traduzione.

Puoi accedere al plugin Conversis Translation XML Text Export & Import direttamente su Figma. Per farlo:

1. Apri un file di progetto Figma o creane uno nuovo.
2. Nella barra dei menu in alto, naviga nel menu a tendina "Plugins"
3. Trova il plugin Conversis Translation XML Text Export & Import.
4. Cliccalo per accedere alle sue caratteristiche e funzionalità.

Quando utilizzi il plugin Conversis Translation XML Text Export & Import per la prima volta, può essere necessario concedere le autorizzazioni necessarie per garantirne il regolare funzionamento. Alcuni plugin possono richiedere l’accesso ai tuoi file e dati di Figma per eseguire determinate azioni, come l’esportazione e l’importazione di elementi testuali. Figma ti chiederà di concedere le autorizzazioni del plugin così che tu possa procedere consentendo l’accesso necessario per garantire che il plugin funzioni perfettamente all’interno del flusso di lavoro del tuo progetto.

Con l’interfaccia del plugin aperta, vedrai le opzioni per esportare il testo da tradurre. Seleziona il formato di esportazione appropriato, che può essere XLIFF o XML, a seconda delle tue preferenze o dei requisiti del servizio di traduzione utilizzato.

Nota: si consiglia di utilizzare il formato XML poiché il formato XLIFF potrebbe non essere compatibile con tutti i CAT tool.

Il plugin estrarrà automaticamente dal tuo progetto Figma tutti gli elementi testuali, preparandoli nel formato scelto, che a questo punto sarà pronto per la traduzione.

Una volta esportato il testo, condividi il file XML con i tuoi traduttori professionisti o con la tua azienda di traduzione. I traduttori possono utilizzare questi file per lavorare direttamente sul testo tradotto, mantenendo al contempo la struttura del progetto originale. Il file XML può essere aperto in qualsiasi CAT tool. Se hai bisogno di aiuto per configurare il tuo CAT tool, contattaci.

Collabora con traduttori professionisti

L’accuratezza e la qualità della traduzione sono fondamentali per un progetto UX localizzato efficace. Collabora con traduttori professionisti o servizi di traduzione che hanno una buona padronanza della lingua di destinazione ed esperienza nella terminologia UX e nei dettagli relativi al design. Una comunicazione chiara tra il designer UX e i traduttori garantisce una traduzione coerente.

Importare traduzioni con il plugin Conversis Translation XML Text Export & Import

Dopo aver ricevuto i file XLIFF o XML tradotti dai tuoi traduttori:

1. Torna al tuo progetto Figma.
2. Crea una copia del progetto originale per garantire che il testo tradotto sia integrato senza modificare l’originale.
3. Con la copia del progetto aperta, accedi nuovamente al plugin Conversis Translation XML Text Export & Import.
4. Questa volta, seleziona l’opzione per importare il testo tradotto.
5. Il plugin reimporterà il contenuto tradotto nel progetto Figma, sostituendo automaticamente il testo originale con le traduzioni.

Ecco come appare il file di esempio dopo la fase di traduzione (abbiamo tradotto il testo a macchina come prova):

Rivedere, perfezionare e testare

Esamina attentamente le traduzioni importate per assicurarti che si adattino perfettamente al layout del progetto. L’espansione del testo è una sfida frequente nell’ambito della traduzione, dove il testo tradotto può essere più lungo dell’originale. I designer devono tenere conto di questa possibilità creando componenti dell’interfaccia utente flessibili e garantendo sufficienti spazi bianchi per contenere traduzioni più lunghe senza compromettere l’integrità del progetto. Modifica le caselle di testo, le dimensioni dei caratteri o i componenti dell’interfaccia utente per adattarli a qualsiasi tipo di espansione del testo causata dal contenuto tradotto.

Dopo aver integrato la traduzione, svolgi test dettagliati per garantire che l’esperienza dell’utente sia fluida e intuitiva. Sollecita gli utenti e le parti interessate a dare un feedback per identificare eventuali problemi o miglioramenti da apportare al progetto localizzato.

La traduzione di progetti Figma per un pubblico internazionale è un processo complesso che richiede un’attenta considerazione delle sfumature culturali e degli elementi di design. Seguendo i passaggi illustrati in questa guida, i designer UX possono creare un’esperienza utente perfetta che abbia un impatto sugli utenti con background linguistici diversi. È di fondamentale importanza collaborare in modo efficace con traduttori professionisti, essere attenti agli adattamenti del design e iterare in base al feedback degli utenti per ottenere un progetto localizzato ben riuscito.