動画チュートリアル:Figmaデザインをいちばん簡単にローカライズする方法
この動画チュートリアルでは、CopyDocプラグインを使ってFigmaデザインをいちばん簡単にローカライズする方法を、ステップごとに詳しく解説しています。
動画チュートリアル:XLIFFファイルでFigmaのテキストレイヤーを翻訳する
この動画では、CopyDocプラグインを使って、XLIFFファイルでFigmaのテキストレイヤーを翻訳する方法を解説しています。
XLIFFのワークフローをお探しですか?
Localize Figma Text、Localise Figma Text、Export/Import XLIFF、XLFで検索された場合は、こちらが必要なCopyDocのローカライズのワークフローです。
CopyDocでLocalize Framesをクリックすると、スプレッドシート(.xlsx)を使ったローカライズの手順が開きます。代わりにXLIFFの翻訳ファイルを使う場合は、Export Text LayersをクリックしてXLIFF 1.2またはXLIFF 2.0形式を選び、翻訳済みのファイルをImport Text Layersで読み込みます。
XLIFFの例を手順どおりに確認するには、XLIFFファイルでFigmaのテキストレイヤーを翻訳するを参照してください。
Figmaのテキストレイヤーをローカライズ用スプレッドシートにエクスポートする
CopyDocのLocalize Framesボタンをクリックすると、フレームをエクスポートし、デザインの翻訳先の言語(例:フランス語、ドイツ語など)を選べます。Export XLSXボタンをクリックすると、フレームのテキストコンテンツが.xlsxスプレッドシートファイルに自動的にエクスポートされます。
重複したテキストレイヤーをまとめる
Group Duplicate Text Layersオプションをオンにすると、内容がまったく同じテキストレイヤーが、XLSXのエクスポートで自動的に1つの項目にまとめられます。テキストを1か所で編集するだけで済むため、コンテンツの編集やFigmaへの再インポートが少し楽になります。
Figmaの見た目どおりの大文字・小文字を保つ
Use Figma Text Caseオプションをオンにすると、エクスポートされるテキストレイヤーが、Figmaのテキストレイヤーに設定された「見た目上」の大文字・小文字の設定(例:「Uppercase」「Title Case」「Lowercase」)に強制的にそろえられます。このオプションを使うと、元のテキストレイヤーの内容(例:デフォルトの「As typed」設定を選んだときの表示)をエクスポートする代わりに、デザイン上の見た目どおりのテキストを反映できます。
スプレッドシートの各ロケール列にローカライズしたコンテンツを追加する
.xlsxファイルをエクスポートしたら、Excelファイルを編集し、必要に応じてプレースホルダーのロケール列を埋めます。
Figmaに再インポートしたくない列(例:「approved」「status」「reviewer」などのメタデータ)をローカライズ用スプレッドシートに追加したい場合は、列見出しの名前の先頭にアンダースコアを3つ付けます(例:___approvedや__status)。こうすると、.xlsxファイルをFigmaに再インポートするときに、CopyDocがその列を無視します。
ローカライズしたスプレッドシートをFigmaに再インポートする
ロケールを埋めてスプレッドシートを保存したら、.xlsxファイルをCopyDocプラグインにドラッグ&ドロップし、Localize Framesボタンをクリックして、新しいロケールのコンテンツを再インポートします。ファイルを再インポートすると、CopyDocは新しいページを自動的に作成し、スプレッドシートで行ったすべてのテキストの更新(テキストレイヤー・「行」ごと)を反映した新しいメールフレームをロケールごとに作成します。
インポートするフレームの順番を設定する
CopyDocがスプレッドシートを読み込んだら、Localize Framesをクリックする前に、インポートのプレビューでフレームをドラッグして好きな順番に並べ替えます。Keep Frame Positionsがオフの場合、CopyDocはこの順番で、元のフレームとローカライズしたフレームを新しいページに上から下へ並べます。
Keep Frame Positionsのトグルをオンにすると、インポート・翻訳された新しいフレームの配置が、Figmaからエクスポートした元のフレームの配置と同じに保たれます。このトグルをオフにすると、プラグインがフレームを整ったグリッド状に並べます。
Add a “Worst Case” Frame (Longest Text) のトグルをオンにすると、テキストレイヤーごとに、スプレッドシート内のすべての新しいロケール・翻訳のうち最も長いテキストを使った追加のフレームが作成されます。テキストが非常に長くなる最悪のケースを確認できるため、デザインの堅牢性をテストし、どんな長さのテキストでも崩れたり不自然に見えたりしないことを確かめるのに役立ちます。
Markdownの書式を使う
Use Markdownのトグルをオンにすると、必要に応じてローカライズ用スプレッドシートのテキストをMarkdownとしてエクスポートできます。太字、斜体、ハイパーリンクのテキストは、自動的にMarkdown形式(下記)で表されます。これにより、翻訳したテキストを再インポートする前に、CopyDocのデザインのテキストコンテンツのさまざまな部分で書式を編集・追加できます。
エクスポートしたスプレッドシートを編集してMarkdownの書式を追加・削除したら、Import Markdown Formattingのトグルをオンにします。XLSXのインポート時に、対応する基本的なMarkdownの書式(下記)が自動的に解析され、Figmaのテキストレイヤーに適用されます。
CopyDocが現在対応しているインラインのMarkdown書式は、太字、斜体、太字の斜体、ハイパーリンク、改行です。見出し、リスト、コードブロック、表、HTMLなど、これらのインラインのテキスト機能以外のMarkdown構文は追加しないでください。
対応しているMarkdownの書式:
- 太字は、テキストをアスタリスク2つで囲んで指定できます(例:
**Text to bold**) - 斜体は、テキストをアンダースコア1つで囲んで指定できます(例:
_Italic Text_) - 太字の斜体は、テキストをアスタリスク2つとアンダースコア1つで囲んで指定できます(例:
**_Italic Text_**) - ハイパーリンクは、
This is [my link here](https://example.com) in a text paragraphというMarkdownの構文で指定できます(リンクの[]内のテキストに太字・斜体の構文を加えて、リンクテキストに書式を付けることもできます)
その他のローカライズのワークフロー
CopyDocは、AIを活用したローカライズのワークフローにも対応しています。
CopyDocでは、AIによるローカライズの各プロバイダーで2つのワークフローを使えます。APIで直接翻訳するオプションと、各プロバイダーのアプリで実行するCSV翻訳用のプロンプトを生成する手動のプロンプトオプションです。
CopyDocの関連ガイド
- 完全な例は、Figmaのローカライズのチュートリアルをご覧ください。
- ローカライズ以外のスプレッドシートやドキュメントの更新には、CopyDocのテキストエクスポートのワークフローを使います。
- ローカライズ、スプレッドシートの同期、ドキュメントのエクスポートについては、CopyDoc Figmaプラグインをご覧ください。