
Figma에서 모션 토큰이 필요해서, 제가 첫 플러그인을 만들었습니다
요약
Figma Motion 애니메이션을 코드로 옮기는 과정의 번거로움을 해결하기 위해 'Kinetik'이라는 플러그인을 개발했습니다. 이 플러그인은 지속 시간과 이징 값을 디자인 토큰/네이티브 Figma 변수로 생성하고, 이를 JSON 또는 CSS 변수로 내보내어 코드 전달(handoff to code)을 용이하게 합니다.
핵심 포인트
- Figma Motion 애니메이션의 코딩 과정 간소화
- 지속 시간과 이징 값을 디자인 토큰으로 관리 가능
- JSON 또는 CSS 변수로 코드 전달 지원 (Handoff to code)
- 무료로 제공되는 Figma 플러그인 'Kinetik' 출시
개발자로서, Figma Motion의 애니메이션을 코드로 옮기는 과정이 때로는 다소 번거롭다는 것을 발견했습니다. 저는 이 과정을 더 쉽게 만드는 방법을 실험하기 시작했고, 결국 저의 첫 번째 플러그인인 Kinetik을 만들게 되었습니다. 이 플러그인은 지속 시간(duration)과 이징(easing)을 디자인 토큰/네이티브 Figma 변수로 생성하고, 이를 JSON 또는 CSS 변수로 내보내어 코드로의 전달(handoff to code)을 조금 더 원활하게 만듭니다. 완전히 무료입니다. 혹시 사용해 보고 싶은 분이 계시면, 어떤 피드백, 아이디어 또는 개선 제안이라도 들려주시면 정말 감사하겠습니다 :) https://www.figma.com/community/plugin/1677245855050443527/kinetik-motion-design-tokens submitted by /u/Gnocchi__000009 [link] [comments]
AI 자동 생성 콘텐츠
본 콘텐츠는 r/FigmaDesign (top/week)의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기