Motion System 프리미티브 사용

팀에서 승인한 모션 언어를 구현해야 한다면 값을 눈으로 보고 다시 만드는 대신 Motion System 프리미티브를 사용하세요.

프리미티브 찾기

Workspace를 열고 사용할 워크스페이스를 선택합니다.
System을 엽니다.
시스템이 여러 개라면 하나를 선택합니다.
프리미티브 이름이나 값으로 검색합니다.
관련 섹션을 펼칩니다.

검색어와 일치하는 부분은 강조되고, 섹션의 항목 수는 현재 보이는 결과에 맞춰 바뀝니다.

Copy, Insert 또는 Download 선택

Copy는 선택한 값이나 스니펫을 클립보드에 복사합니다.
Insert는 활성 에디터의 모든 커서 위치에 값을 입력하거나 현재 선택 영역을 바꿉니다.
Download는 다운로드할 수 있는 컬렉션 에셋이나 업로드된 글꼴을 선택한 폴더에 저장합니다.

Insert를 사용하기 전에 파일을 열고 커서를 놓으세요. 활성 텍스트 에디터가 없다면 확장 프로그램에서 파일을 열라는 안내를 표시합니다.

색상

단색은 Hex, RGB, CSS 변수, CSS 사용 예제, TypeScript, React 인라인, Tailwind 설정 형식을 제공합니다. 그레이디언트는 CSS 값, 변수, 사용 예제, TypeScript, React, Tailwind background-image 형식을 제공합니다.

단색의 hex 값을 클릭하면 바로 복사할 수 있습니다. 그레이디언트 행에는 유형과 색상 수가 표시되며, 색상 수에 마우스를 올리면 스톱과 오프셋을 확인할 수 있습니다.

이징 커브

다음 형식 가운데 선택할 수 있습니다.

원본 cubic-bezier(...)
CSS 변수
CSS transition
CSS animation timing
TypeScript 튜플

커브 썸네일과 원본 값을 함께 보면 이름이 비슷한 이징을 삽입하기 전에 쉽게 비교할 수 있습니다.

글꼴

원본을 사용할 수 있다면 글꼴 행에서 실제 서체를 미리 볼 수 있습니다. CSS 사용 예제, CSS 변수, @font-face, TypeScript 형식과 Google Fonts에서 제공하는 글꼴의 링크가 표시됩니다.

실제 원본 URL이 있는 업로드 글꼴은 다운로드할 수도 있습니다. 안내가 표시되면 저장 폴더를 선택하세요.

모션 프리셋

프리셋에는 실시간 미리 보기와 CSS 또는 Lottie 배지가 표시됩니다.

CSS로 표현할 수 있는 위치, 크기, 회전, 불투명도 모션은 CSS @keyframes, React 사용 예제, Vue SFC 출력을 제공합니다.
Trim path, stroke 등 CSS로 표현할 수 없는 모션은 참고용 키프레임 데이터와 Lottie 또는 dotLottie로 사용하는 방법을 제공합니다.

현재 System 탭에서는 CSS로 표현할 수 없는 프리셋을 Lottie 파일로 생성해 다운로드하지 않습니다.

컬렉션 에셋

컬렉션 썸네일을 클릭하면 큰 미리 보기가 열립니다. Lottie 에셋은 실시간으로 재생되고, 미리 볼 수 있는 정적 에셋은 이미지로 표시됩니다.

Lottie에는 다음 형식을 제공합니다.

CDN URL
dotLottie 웹 컴포넌트를 사용하는 HTML
DotLottieReact를 사용하는 React
dotLottie-web TypeScript

이미지는 에셋 URL, HTML 이미지 태그, CSS 배경, React 이미지 출력을 제공합니다. Download는 연결된 원본 파일을 선택한 폴더에 저장합니다.

System 탭에는 에셋에 이미 저장된 URL이 표시됩니다. Workspace CDN 게시를 활성화하거나 관리하지는 않습니다.

브라우저에서 열기

시스템 문서를 확인하고 프리미티브, 초안, 게시 상태를 관리하려면 Open in browser를 사용하세요.