Figmapedia
목록으로 돌아가기
데일리콘텐츠소소한 꿀팁

디자인을 다채롭게 하는 모션 라이브러리

비비✨2026. 1. 30.

안녕하세요, 피그마피디아 비비✨입니다.

오늘은 멈춰있는 디자인에 호흡을 불어넣는 모션 라이브러리 소개해드릴려고 해요 사용자 경험을 좀 더 생동감 넘치게 만들고, 바이브 코딩으로 인터랙션 적용이 필요한 분들이라면 한번 사용해보세요!

📍 Detail 🔗 https://detail.design/

  • 실제 서비스의 마이크로 인터랙션 아카이브
  • 화면 전환, 객체 동작 등 디테일한 애니메이션 분석 추천

    • 📍 Lucide Animated 🔗 https://lucide-animated.com/

  • Lucide 아이콘의 모션 버전 오픈소스 라이브러리
  • 용량이 가볍고 확장성이 좋은 아이콘 리소스

    • 📍 Motion 🔗 https://motion.dev/ -클릭, 드래그 등 실제 모션 반응, 코드 구조 예시 제공

  • React 등 최신 웹 환경에 맞춘 UI 모션 가이드

    • 📍 GSAP 🔗 https://gsap.com/

  • 웹 애니메이션의 구현 Codepen 링크 제공
  • 화려한 스크롤, 타임라인 효과 적용 시 추천

    • 📍 Make It Animated 🔗 https://makeitanimated.dev/

  • 실제 앱 서비스의 모션 구현 사례 아카이브
  • 앱 인터랙션 및 React Native 코드 참고용 추천