動画チュートリアル：CSSスタイル同期でスプレッドシートからFigmaレイヤーのスタイルを設定する

この動画では、CopyDocプラグインのCSSスタイル同期を使って、スプレッドシートからFigmaレイヤーのスタイルを設定する方法を説明しています。

たとえば、Figmaに #SectionHeadingという名前のテキストレイヤーがある場合、スプレッドシートの #SectionHeading列の下の行にfont-size: 40px; color: #999999;を追加すると、Figmaでそれらのレイヤーのフォントサイズと色を変更できます。

スプレッドシートをFigmaと同期すると、一致するFigmaレイヤーのスタイルが自動的に更新されます。ただし、CSSの値がサポートされていて、そのレイヤーの種類に適用できる場合に限ります。

Figmaレイヤーのスタイル設定に使えるCSSプロパティ

使えるCSSプロパティはレイヤーの種類によって異なります。複数のプロパティを同じスプレッドシートのセルに入れると、1つのレイヤーにまとめて適用できます。

例：color: #000000; font-size: 24px; font-weight: bold;

#HeroBlock	#Menu	#CardFrame	#StaffName
background-color: #818AF9; color: #FFF; font-size: 16px; border-radius: 20px;	opacity: 0.3; background-color: #CCD4FF;	font-size: 10px;	font-size: 22px; color: #818AF9; font-weight: bold;
background-color: #818AF9; color: #FFF; font-size: 16px; border-radius: 20px;	opacity: 0.3; background-color: #CCD4FF;	font-size: 10px;	font-size: 22px; color: #818AF9; font-weight: bold;

スプレッドシート同期機能で現在サポートされているCSSプロパティは次のとおりです。

テキストレイヤー

これらのCSSプロパティは、すべてのFigmaテキストレイヤーに適用できます。

• color（例：color: #CCCCCC;）
• font-size（例：font-size: 40px;）
• line-height（例：line-height: 48px;）
• font-family（例：font-family: Arial;）
• font-weight（例：font-weight: bold;）
• font-style（例：font-style: italic;）
• text-align（例：text-align: center;）
• text-transform（例：text-transform: uppercase;）
• vertical-align（例：vertical-align: middle;）

すべての子レイヤーにテキストスタイルを適用する。子レイヤーを含むレイヤー（Frame、Group、Component、Instanceなど）にテキストレイヤー用のCSSスタイル（たとえばfont-size: 30px）を適用すると、一致するレイヤー内のすべてのテキストレイヤーにそのスタイルが自動的に適用されます。

その他のレイヤー

これらのCSSプロパティは、その他のFigmaレイヤー（画像、長方形、フレームなど）に適用できます。

• width（例：width: 100px;）
• height（例：height: 100px;）
• opacity（例：opacity: 0.5;）
• background-color（例：background-color: #CCCCCC;）
• border（例：border: 1px solid #CCCCCC;）
• border-radius（例：border-radius: 20px;）

位置のプロパティ

これらのCSSプロパティは、すべてのFigmaレイヤー（テキスト、画像、長方形、フレームなどを含む）に適用できます。

Transform

CSSのtransformプロパティを使うと、実際のレイアウト上のスペースに影響を与えずに、要素の位置、回転、拡大縮小を視覚的に操作できます。Figmaや同様のデザインツールでは、ドキュメントフローに対してではなく、フレームの中で起こる移動、回転、サイズ変更を再現するためによく使われます。

主なtransform関数は次のとおりです。

• translate 要素をX軸とY軸の両方に沿って移動します。 例： transform: translate(10px, 20px) → 要素を右に10px、下に20px移動します。

• translateX 要素をX軸に沿って水平方向に移動します。 例： transform: translateX(10px) → 要素を右に10px移動します。

• translateY 要素をY軸に沿って垂直方向に移動します。 例： transform: translateY(20px) → 要素を下に20px移動します。

• rotate 要素を原点を中心に回転させます。 例： transform: rotate(45deg) → 要素を時計回りに45度回転させます。

• scale X軸とY軸の倍率で要素のサイズを変更します。 例： transform: scale(1.5)またはtransform: scale(2, 1.5) → 要素のサイズを全体で1.5倍、または横に2倍・縦に1.5倍にします。

複数のtransform関数を順番に組み合わせることができます。 例： css transform: translateX(10px) rotate(45deg) scale(1.2); 各関数は前の関数の結果に適用されるため、順序が重要です。

X/Yの位置

transformとは異なり、FigmaのXとYの値は、親フレームまたは座標系の中での要素の絶対位置に対応します。CSSでは、この位置は次のようなプロパティで表されます。

• top 親要素の上端からの垂直方向のオフセットを指定します。 例： top: 100px; → 要素をコンテナの上端から100px下に配置します。

• left 親要素の左端からの水平方向のオフセットを指定します。 例： left: 100px; → 要素をコンテナの左端から100pxの位置に配置します。

transformとの違い： - topとleftは、要素のレイアウト上の位置を定義します。 - transform: translate()は、周囲の要素やレイアウトフローに影響を与えずに、要素を視覚的に移動させます。

スプレッドシートの行に合わせて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)）を使います。