큐레이션 · 오픈 · 무료

LottieFiles

웹사이트, 앱, 프레젠테이션, 소셜 등 다양한 곳에서 경량 애니메이션을 생성하고, 관리하며, 구현합니다.

designmotion
LottieFiles 스크린샷
↓ 디자인 시스템 다운로드 (13 MB)OpenDesign 에서 열기

원본 사이트: https://lottiefiles.com

📦 팩 내용 보기 →

01

디자인 DNA

모션애니메이션경량인터랙티브개발자

개발자와 디자이너 모두에게 애니메이션을 쉽게 만들어주는 장난스러운 모션 디자인 툴킷입니다.

02

컬러

#00b894Accent
#1a1a2eInk
#4a4a6aInk soft
#ffffffBG
#f6f7f5BG soft
#6b7280Muted
rgba(235,238,235,0.5)Line

중립적인 화이트와 다크 배경에 단일한 생동감 있는 틸 악센트를 사용하는 깨끗하고 고대비 팔레트로, 장난스러운 다채로운 일러스트레이션으로 개성을 더합니다.

03

타이포그래피

humanist-sans · ui-monospace

04

여백

4px
8px
12px
16px
24px
32px
48px
64px
96px

일관된 4px 기본 그리드를 사용한 여유로운 여백으로 요소 사이에 호흡 공간을 만듭니다.

05

표면 (라운드 / 그림자 / 경계선)

sm · 6px
md · 8px
lg · 16px
pill · 9999px

1px solid rgba(235,238,235,0.5)

0 1px 2px 0 rgba(0,0,0,0.05) · 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

여유로운 수평 패딩을 가진 표준 중앙 정렬 컨테이너, 왼쪽 정렬 콘텐츠를 가진 전체 폭 히어로 섹션입니다.

07

모션과 인터랙션

150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

인터랙티브 요소 호버 상태에서 부드러운 트랜지션 · UI 피드백을 위한 transform과 불투명도 애니메이션 · 버튼과 링크의 색상 및 배경 트랜지션

150-300ms의 색상 및 배경색 트랜지션과 미세한 불투명도 변화 · transform과 scale 마이크로 인터랙션

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

LottieFiles — 桌面首屏（hero）
桌面首屏（hero）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 移动首屏
移动首屏

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

LottieFiles는 개발자와 디자이너를 위한 모션 디자인 플랫폼입니다. 포지셔닝: 경량 애니메이션을 위한 장난스러운 SaaS 툴. 주요 헥스 색상: #ffffff (배경), #1a1a2e (텍스트), #00b894 (틸 악센트), #f6f7f5 (소프트 배경). 폰트 카테고리: 디스플레이 및 본문용 humanist-sans, 코드용 ui-monospace. 중요 금지 사항: 1) 단단하고 날카로운 모서리 사용 금지—둥근/필 형태를 사용하세요. 2) 일러스트레이션 평면화 금지—장난스러운 3D 캐릭터 스타일을 유지하세요. 3) 단색 사용 금지—깨끗한 틸을 주요 색상으로 유지하면서 일러스트레이션에서는 생동감 있는 다채로운 악센트를 유지하세요. 4) 빽빽한 레이아웃 생성 금지—여유로운 여백을 유지하세요. 5) 세리프 폰트 사용 금지— 깨끗한 sans-serif를 고수하세요. 6) 공격적인 CTA 사용 금지—친근하고 행동을 유도하는 카피를 유지하세요.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

en · zh-CN · zh-TW · ja · ko