---
url: "/ja/copydoc/sync/styles.md"
description: "**Sync Content**機能では、Figmaレイヤーのテキストの更新に加えて、同じ方法でレイヤーにCSSスタイルを自動的に適用することもできます。"
---

# スプレッドシートのCSSでFigmaレイヤーのスタイルを更新する

> **Sync Content**機能では、Figmaレイヤーのテキストの更新に加えて、同じ方法でレイヤーにCSSスタイルを自動的に適用することもできます。

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

この動画では、CopyDocプラグインのCSSスタイル同期を使って、スプレッドシートからFigmaレイヤーのスタイルを設定する方法を説明しています。
[Embedded media](https://www.youtube-nocookie.com/embed/l0Bhqx6X3Ic)

[Video](/assets/videos/copydoc/sync/spreadsheet-styles-sync.mp4)

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

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

## Figmaレイヤーのスタイル設定に使えるCSSプロパティ {#supported-css-properties-that-you-can-use-to-style-your-figma-layers}

使える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プロパティは次のとおりです。

### テキストレイヤー {#text-layers}

これらの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;`）

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

### その他のレイヤー {#other-layers}

これらの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;`）

### 位置のプロパティ {#positioning-properties}

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

### Transform {#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倍**にします。

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

### X/Yの位置 {#x-y-position}

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

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

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

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

## スプレッドシートの行に合わせて1つのFigmaレイヤーを自動で繰り返す {#auto-repeat-a-single-figma-layer-with-your-spreadsheet-rows}

[Video](/assets/videos/copydoc/sync/auto-repeat-sync.mp4)

**Content**または**Styles**の同期タブを使うときは、**Auto Repeat**のトグルをオンにすると、1つのFigmaレイヤーを自動で繰り返せます。選択した元のFigmaレイヤーが自動的にコピーされ、スプレッドシートのデータの行数と同じ数だけ複製されます。

これを使うと、1つのカード、カタログアイテム、キャンペーンのレイアウトから、スプレッドシートの行ごとにコンテンツを流し込んだデザインを作れます。デザイン内のテキストレイヤーと画像レイヤーには、対応するスプレッドシートの列が使われます。

メインコンポーネントを選択した場合、CopyDocは行ごとにインスタンスを作成します。既存のインスタンスを選択した場合はそのインスタンスが、フレームを選択した場合はそのフレームが複製されます。

選択したFigmaレイヤーが、Auto Layoutが有効な別のFigmaレイヤーの直下にすでにある場合は、選択したレイヤーがその親レイヤーの中に自動的に複製されます。そうでない場合は、CopyDocが新しいAuto Layoutフレームを作成し、その中に新しいFigmaレイヤーを複製します。

### 自動で繰り返す親レイヤーの動的な名前 {#dynamic-auto-repeating-parent-layer-names}

[Video](/assets/videos/copydoc/sync/auto-renaming-frames.mp4)

複製した各Figmaレイヤーにスプレッドシートから名前を付けるには、選択したテンプレートレイヤーの名前を列見出しと一致させます。CopyDocは、各行のその列の値を新しいレイヤー名として使います。

先頭の`#`は1つまでなら省略できます。`#Title`という名前のレイヤーは`Title`列に、`Title`という名前のレイヤーは`#Title`列に一致させられます。両方の見出しがある場合は、値が空欄でも完全に一致するほうが優先されます。大文字・小文字とスペースは一致している必要があります。

スプレッドシートに一致するレイヤー名がない場合、CopyDocプラグインは元のFigmaレイヤー名に行番号を付けた名前（例：`My Frame Layer (Row 3)`）を使います。