섹션 편집

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

참고 — Motion System 웹 대시보드에서 Motion System을 생성하고 시스템 자체를 관리합니다. 시스템이 만들어진 뒤에는 Figma 플러그인에서 지원되는 아이템을 추가·수정·발행하고 적용할 수 있습니다.

접근 방법

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

편집 가능한 아이템은 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이 적용되지 않음 — 프레임을 두 개 이상 선택하거나 프로토타입 플로우가 있는 프레임을 선택하세요.