---
url: "/ko/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와 동기화하면, CSS 값이 지원되고 해당 레이어 유형에 적용되는 경우 일치하는 Figma 레이어의 스타일이 자동으로 업데이트돼요.

## Figma 레이어 스타일 지정에 사용할 수 있는 CSS 속성 {#supported-css-properties-that-you-can-use-to-style-your-figma-layers}

레이어 유형마다 사용할 수 있는 CSS 속성이 달라요. 여러 속성을 같은 스프레드시트 셀에 넣으면 한 레이어에 함께 적용할 수 있어요.

예: `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:** **모든 하위 레이어에 텍스트 스타일 적용**. 하위 레이어가 있는 레이어(예: 프레임, 그룹, 컴포넌트, 인스턴스)에 텍스트 레이어 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()`는 주변 요소나 레이아웃 흐름에 영향을 주지 않고 요소를 **시각적으로** 이동해요.

## 스프레드시트 행으로 Figma 레이어 하나를 자동 반복하기 {#auto-repeat-a-single-figma-layer-with-your-spreadsheet-rows}

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

**Content** 또는 **Styles** 동기화 탭 옵션을 사용할 때 **Auto Repeat** 토글을 켜면 Figma 레이어 하나를 자동으로 반복할 수 있어요. 처음 선택한 Figma 레이어를 스프레드시트 데이터의 행 수만큼 자동으로 복제해요.

이 기능으로 카드, 카탈로그 항목, 캠페인 레이아웃 하나를 스프레드시트 행마다 콘텐츠가 채워진 디자인으로 만들 수 있어요. 디자인 안의 텍스트 레이어와 이미지 레이어에는 일치하는 스프레드시트 열의 값이 들어가요.

메인 컴포넌트를 선택하면 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은 각 행에서 해당 열의 값을 새 레이어 이름으로 사용해요.

맨 앞의 `#` 하나는 있어도 되고 없어도 돼요. `#Title`이라는 레이어는 `Title` 열과 일치할 수 있고, `Title`이라는 레이어는 `#Title` 열과 일치할 수 있어요. 두 머리글이 모두 있으면 값이 비어 있더라도 정확히 일치하는 쪽이 우선해요. 대소문자와 공백은 여전히 일치해야 해요.

스프레드시트에 일치하는 레이어 이름이 없으면 CopyDoc 플러그인은 원래 Figma 레이어 이름에 행 번호를 붙여 사용해요(예: `My Frame Layer (Row 3)`).