動画チュートリアル:XLSX(Excel)スプレッドシートのコンテンツをFigmaに同期する
この動画では、CopyDocプラグインを使って、ExcelスプレッドシートのコンテンツをFigmaのデザインに同期する方法を説明しています。
動画チュートリアル:CSVスプレッドシートのコンテンツをFigmaに同期する
この動画では、CopyDocプラグインを使って、CSVスプレッドシートのコンテンツをFigmaのデザインに同期する方法を説明しています。
動画チュートリアル:スプレッドシートからFigmaレイヤーを自動で繰り返して同期する
この動画では、CopyDocプラグインを使って、スプレッドシートからFigmaレイヤーを自動で繰り返して同期する方法を説明しています。
動画チュートリアル:スプレッドシートを使って画像フォルダをFigmaレイヤーに同期する
この動画では、CopyDocプラグインを使って、スプレッドシートで画像フォルダをFigmaレイヤーに同期する方法を説明しています。
動画チュートリアル:スプレッドシートからFigmaレイヤーにSVGアイコンを同期する
この動画では、CopyDocプラグインを使って、スプレッドシートからFigmaレイヤーにSVGアイコンを同期する方法を説明しています。
CSV・XLSXファイルのコンテンツをFigmaレイヤーに同期する
正しく構成した.csvまたは.xlsxファイルをSync XLSX/CSV Fileのドロップゾーンにドラッグ&ドロップするか、ドロップゾーンをクリックしてコンピューター上のファイルを選択すると、スプレッドシートの内容をプレビューできます。
スプレッドシートの見出しに合わせて名前を変更したレイヤーを含むレイヤーを、Figmaで1つ以上選択してから、Sync Rows with Layersボタン(Auto Repeatがオンの場合はSync & Repeat Selected Layer)をクリックします。これで、スプレッドシートのコンテンツが、選択した名前変更済みのFigmaレイヤーに同期されます。
フォントが見つからないFigmaのテキストレイヤーは更新できません。 Figmaのテキストレイヤーに見つからないフォントが含まれている場合、プラグインはそのレイヤーを更新できません。CopyDocプラグインで何らかの更新を行いたいテキストレイヤーは、見つからないフォントの問題を解決しておいてください。
スプレッドシートの行に合わせて1つのFigmaレイヤーを自動で繰り返す
ContentまたはStylesの同期タブを使うときは、Auto Repeatのトグルをオンにすると、1つのFigmaレイヤーを自動で繰り返せます。選択した元のFigmaレイヤーが自動的にコピーされ、スプレッドシートのデータの行数と同じ数だけ複製されます。
これを使うと、1つのカード、カタログアイテム、キャンペーンのレイアウトから、スプレッドシートの行ごとにコンテンツを流し込んだデザインを作れます。デザイン内のテキストレイヤーと画像レイヤーには、対応するスプレッドシートの列が使われます。
メインコンポーネントを選択した場合、CopyDocは行ごとにインスタンスを作成します。既存のインスタンスを選択した場合はそのインスタンスが、フレームを選択した場合はそのフレームが複製されます。
選択したFigmaレイヤーが、Auto Layoutが有効な別のFigmaレイヤーの直下にすでにある場合は、選択したレイヤーがその親レイヤーの中に自動的に複製されます。そうでない場合は、CopyDocが新しいAuto Layoutフレームを作成し、その中に新しいFigmaレイヤーを複製します。
自動で繰り返す親レイヤーの動的な名前
複製した各Figmaレイヤーにスプレッドシートから名前を付けるには、選択したテンプレートレイヤーの名前を列見出しと一致させます。CopyDocは、各行のその列の値を新しいレイヤー名として使います。
先頭の#は1つまでなら省略できます。#Titleという名前のレイヤーはTitle列に、Titleという名前のレイヤーは#Title列に一致させられます。両方の見出しがある場合は、値が空欄でも完全に一致するほうが優先されます。大文字・小文字とスペースは一致している必要があります。
スプレッドシートに一致するレイヤー名がない場合、CopyDocプラグインは元のFigmaレイヤー名に行番号を付けた名前(例:My Frame Layer (Row 3))を使います。