Motion System
승인된 색상, 이징 커브, 글꼴, 모션 프리셋 및 컬렉션 에셋을 VS Code에서 바로 사용하세요.
Motion System은 디자이너와 개발자가 같은 모션 언어를 공유하도록 돕습니다. After Effects, Figma, Lottie Creator, 웹 같은 제작 도구에서 시스템 항목을 만들고 적용하면, VS Code 확장 프로그램에서 이를 구현에 필요한 값과 코드, URL, 다운로드 가능한 에셋으로 사용할 수 있습니다.
System 탭은 읽기 전용입니다. Motion System 콘텐츠를 만들고, 편집하고, 게시하고, 정리하는 작업은 목적에 맞는 제작 도구에서 진행하세요.
VS Code에서 쓸 수 있는 항목
Brand Colors - 단색과 그레이디언트를 CSS, TypeScript, React, Tailwind 형식으로 사용합니다.
Easing Curves - 트랜지션이나 애니메이션 타이밍에 사용할 cubic-bezier 값과 코드를 제공합니다.
Fonts - 실제 글꼴 미리 보기, CSS 및 TypeScript 사용 예제,
@font-face, 지원되는 글꼴 다운로드를 제공합니다.Motion Presets - 실시간 미리 보기와 CSS, React, Vue 또는 키프레임 데이터 출력을 제공합니다.
Collection Assets - Lottie와 이미지 미리 보기, CDN 또는 임베드 코드, 다운로드를 제공합니다.
빠르게 사용하기
Workspace에서 사용할 워크스페이스를 선택합니다.
System을 엽니다.
워크스페이스에 시스템이 여러 개라면 하나를 선택합니다.
프리미티브를 검색합니다.
Use를 클릭합니다.
코드 형식을 선택합니다.
복사하거나 활성 에디터 커서 위치에 삽입합니다.
이 장에서 다루는 내용
Motion System 기본 - 공통 개념과 VS Code에서 할 수 있는 일
Motion System 프리미티브 사용 - 코드, 삽입, URL, 다운로드 사용법
Motion System 패널 컨트롤 - 전체 UI 참고 문서