# 섹션 편집
Motion System의 지원 섹션 안에서 아이템을 추가, 수정, 제거합니다. Figma 플러그인에서는 draft 모드와 colors, easing curves, font styles, collection 에셋의 아이템별 모달을 통해 편집합니다.

> **참고** — [Motion System 웹 대시보드](https://app.lottiefiles.com/motion-system)에서 Motion System을 생성하고 시스템 자체를 관리합니다. 시스템이 만들어진 뒤에는 Figma 플러그인에서 지원되는 아이템을 추가·수정·발행하고 적용할 수 있습니다.

## 접근 방법

1. Figma에서 LottieFiles 플러그인을 엽니다.
2. 상단 탭 바에서 **System**을 클릭합니다.
3. 편집하려는 Motion System을 클릭합니다.
4. edit(pencil) 아이콘을 클릭해 draft를 엽니다.
5. 기존 섹션 안에서 **+ Add** 또는 아이템의 edit/delete 컨트롤을 사용합니다.

## Edit modal 공통 패턴

편집 가능한 아이템은 modal로 열립니다.

- **Add 모드**는 선택한 기존 섹션에 새 아이템을 만듭니다.
- **Edit 모드**는 선택한 아이템을 업데이트합니다.
- **Save**는 draft의 아이템을 업데이트합니다.
- **Cancel**은 modal을 닫습니다. 플러그인이 해당 편집 단축 동작만을 위해 draft 모드를 열었다면, cancel하면 published view로 돌아갑니다.

섹션별 편집 차이는 다음과 같습니다.

### Colors

이름과 단색 또는 선형 그레이디언트로 color 아이템을 추가합니다. Solid color는 color picker, hex 입력, alpha value를 사용합니다. Gradient는 draggable stop, stop offset, per-stop color editing을 사용합니다. 색상 stop이 세 개 이상인 gradient는 제한 지원 경고를 표시합니다.

Color row는 swatch를 보여줍니다. Solid color는 hex 또는 hex-with-alpha로 복사할 수 있습니다. Canvas selection에 적용할 때, 선택한 레이어가 해당 paint target을 지원하면 플러그인이 fill, stroke, 또는 both를 타깃할 수 있습니다.

### Easings

Easings는 인터랙티브 cubic-bezier editor와 numeric `x1`, `y1`, `x2`, `y2` 입력을 사용합니다. 기존 easing row는 curve thumbnail과 복사 가능한 `cubic-bezier(...)` 값을 보여줍니다.

Easing을 적용하면 내보내기 미리 보기 흐름이 시작됩니다. 선택한 프레임이 두 개 이상이거나 프로토타입 플로우가 있는 프레임을 선택했을 때 작동합니다. 플로우에 여러 Smart Animate 인터랙션이 있으면 플러그인이 어떤 인터랙션에 easing을 적용할지 묻습니다.

### Fonts

Font style은 Google Fonts search, font 파일 upload, font URL, manual entry로 만들 수 있습니다. Font item은 display name, font 계열, weight, size, line height, letter spacing, 원본 type, optional URL/원본 파일 data를 저장합니다.

Font를 적용하면 Figma에서 선택한 텍스트 레이어가 바뀝니다. Font 계열은 Figma에서 사용할 수 있어야 합니다. 정확한 weight가 없으면 플러그인은 가장 가까운 style을 적용하고 경고를 표시합니다.

### Motion presets

Motion presets는 미리 만든 애니메이션 패턴입니다. Figma System 탭은 프리셋 미리 보기 카드를 보여주고, 선택한 프레임에 프리셋을 적용해 프리셋 애니메이션 미리 보기/내보내기를 생성할 수 있게 합니다.

System 탭은 프리셋 editor를 제공하지 않습니다. 기본 motion 프리셋은 웹 Motion System dashboard에서 추가하고 편집할 수 있습니다. 더 자세한 프리셋 creation은 Lottie Creator에서 지원됩니다. 거기서 프리셋을 저장한 뒤 Figma System 탭으로 돌아와 선택한 프레임에 사용하세요.

### 에셋

Collection 에셋은 workspace 파일, URL, upload에서 추가할 수 있습니다. 팀원이 System 탭에서 알아보기 쉽도록 각 에셋에 명확한 title을 지정하세요.

Collection row는 에셋 link를 복사할 수 있습니다. Lottie 에셋은 SVG 또는 GIF로 삽입할 수 있고, SVG와 래스터 이미지 에셋은 지원되는 형식으로 Figma 캔버스에 삽입됩니다.

## Item 이름 바꾸기

Item 이름은 System 탭 row와 apply notification에 표시됩니다. 이름을 바꾸려면 edit modal을 열고 name 또는 label을 변경하세요.

Section title도 draft 모드에서 accordion header의 section title을 클릭해 바꿀 수 있습니다.

## Item 삭제

Per-item delete control로 item을 삭제합니다. 플러그인은 draft에서 item을 제거하기 전에 \*\*Delete item?\*\*으로 확인합니다. section의 마지막 item을 삭제하면 해당 section도 제거됩니다.

## Section과 item 순서

현재 Figma System 탭에는 section 또는 section item을 drag-to-reorder하는 control이 없습니다. Section 순서를 바꾸려면 웹 Motion System dashboard에서 section을 재정렬하고 update를 publish한 뒤 Figma 플러그인에서 Motion System을 다시 여세요.

## 문제 해결

- **System 탭이 로그인을 요청함** — Motion System이 있는 LottieFiles 워크스페이스에 로그인하세요. 새 시스템을 만들려면 Motion System 웹 대시보드에서 계속 진행합니다.
- **Publish가 막힘** — draft를 publish하기 전에 최소 하나의 value 또는 에셋을 추가하세요.
- **Font가 적용되지 않음** — 텍스트 레이어를 선택하고 font 계열를 Figma에서 사용할 수 있는지 확인하세요.
- **Easing이 적용되지 않음** — 프레임을 두 개 이상 선택하거나 프로토타입 플로우가 있는 프레임을 선택하세요.

## 관련 문서

- [Motion System 기본](motion-system-basics) — section이 무엇인지.