영상 튜토리얼: Figma에서 배너에 애니메이션을 넣고 HTML로 내보내기(영어)
Figma에서 바로 게재할 수 있는 HTML 배너에 애니메이션을 넣고 몇 초 만에 내보내는 방법을 보여 주는 영상이에요.
bannerify.hypermatic.com에서 애니메이션 JSON 생성하기
- https://bannerify.hypermatic.com을 여세요.
- Create Your Custom Bannerify Animation 섹션에 원하는 애니메이션을 설명하세요(예: “약간 회전하면서 왼쪽에서 탄력 있게 슬라이드해 들어오기”).
- Copy Prompt to Clipboard를 클릭해 ChatGPT나 Claude에 붙여 넣거나, Open Prompt in ChatGPT / Open Prompt in Claude를 클릭하세요.
- 생성된 애니메이션 JSON 스니펫을 복사하세요.
- Figma 파일을 열고 Bannerify 플러그인을 실행하세요.
- Bannerify에서 Custom Animations 패널을 여세요.
- Paste generated JSON code here라고 표시된 텍스트 영역에 JSON을 붙여 넣으세요.
- 타임라인의 애니메이션 프리셋 드롭다운에 애니메이션이 나타나는지 확인하세요.
애니메이션은 붙여 넣는 즉시 자동으로 저장되며, 레이어 타임라인 애니메이션 메뉴에서 다른 프리셋처럼 선택할 수 있어요.
사용자 지정 애니메이션은 현재 Figma 파일에 저장돼요. 다른 Figma 파일로 옮기면 그 파일에 JSON을 다시 붙여 넣어야 해요.