영상 튜토리얼: Figma에서 배너에 애니메이션을 넣고 HTML로 내보내기
Figma에서 몇 초 만에 애니메이션을 넣고 바로 게재할 수 있는 HTML 배너로 내보내는 방법을 보여 주는 영상 튜토리얼이에요(영어).
빈 Figma 페이지에서 시작하기
빈 Figma 페이지에서 플러그인을 실행하면, 바로 배너 디자인을 시작할 수 있도록 Bannerify가 표준 배너 크기 몇 가지를 자동으로 만들어 주겠다고 제안해요.
Figma 배너 프레임 레이어 구성하기
각 프레임의 직계 자식 레이어는 기본적으로 각 배너 안의 요소로 사용돼요. 아래 섹션에서 보듯이, 이 요소들은 Bannerify 플러그인에서 각각 따로 애니메이션을 넣어 배너를 만들 수 있어요.
숨긴 자식 레이어도 배너 프레임에 포함돼요 Figma에서 숨김으로 전환한 직계 자식 레이어도 Bannerify 레이어 타임라인에 그대로 표시돼요. 여러 단계에 걸쳐 나타났다 사라져야 하는 요소가 있는 배너를 디자인할 때, 자식 레이어를 화면에서 숨겨 둘 수 있게 하기 위해서예요. Bannerify는 이렇게 숨긴 레이어를 숨김이 해제된 상태로 자동으로 표시해요.
타임라인에서 Figma 레이어 숨기기. Figma 프레임의 특정 레이어를 타임라인에 포함하고 싶지 않다면, Figma 레이어 이름 앞에 hide- 접두사를 붙이세요(예: hide-RectangleBackground). 그러면 해당 레이어가 플러그인 타임라인과 배너 내보내기에 포함되지 않아요.
이미 디자인한 배너로 시작하기
Figma에서 이미 배너 디자인을 만들었다면, 해당 페이지에서 Bannerify 플러그인을 실행할 때 파일에서 배너로 사용할 수 있는 프레임이나 인스턴스 목록이 자동으로 불러와져요.
플러그인에서 불러올 배너만 체크하거나 체크 해제한 다음 Load Checked Banners 버튼을 클릭하거나, Load All Banners 버튼을 클릭해 모든 배너를 자동으로 불러오세요.
여러 배너 또는 모든 배너 새로 고치기/다시 불러오기
Bannerify가 이미 실행 중일 때 Figma 파일에서 레이어를 추가하거나 수정하면 자동으로 반영되지 않아요. 대신 배너를 새로 고치는 방법이 두 가지 있어요.
타임라인의 모든 배너를 새로 고치거나 Figma 파일에서 새 배너를 불러오려면 플러그인 메인 헤더 메뉴의 Refresh 아이콘을 클릭하세요.
그러면 처음의 배너 선택 화면이 다시 나타나요. 플러그인에서 불러올 배너만 체크하거나 체크 해제한 다음 Load Checked Banners 버튼을 클릭하거나, Load All Banners 버튼을 클릭해 모든 배너를 자동으로 불러오세요. 수정된 레이어가 Bannerify 타임라인과 실시간 미리보기에 표시돼요.
배너 하나만 새로 고치기
Bannerify가 이미 실행 중일 때 Figma 파일에서 레이어를 추가하거나 수정하면 자동으로 반영되지 않아요. 대신 배너를 새로 고치는 방법이 두 가지 있어요.
배너 하나만 빠르게 새로 고치려면 해당 배너 헤더 바의 Refresh 아이콘을 클릭하세요. 그 배너의 레이어만 새로 고쳐지고, 수정된 레이어가 Bannerify 타임라인과 실시간 미리보기에 표시돼요.
배너 단색 배경 채우기 설정하기
Figma에서 프레임의 단색 Fill을 원하는 색으로 설정하면 해당 배너의 단색 배경색을 지정할 수 있어요. 이 색은 이미지 요소가 로드되기 전에 잠깐 보일 수 있어요.
배너로 자동 스크롤하기
편집할 배너를 쉽게 바꿀 수 있도록, Figma 페이지에서 배너에 해당하는 레이어(또는 자식 레이어)를 클릭하면 Bannerify가 타임라인에서 그 배너로 자동 스크롤해요.
반대 방향으로도 작동해요. 타임라인에서 배너 미리보기 위에 있는 frame 또는 instance 아이콘 버튼을 클릭하면, Figma 페이지에서 해당 Figma 레이어로 자동으로 스크롤하고 확대해요.
플러그인 창 크기 조절하기
더 크거나 작은 모니터를 쓰고 있다면, 화면 크기에 맞춰 타임라인을 더 편하게 사용하고 볼 수 있도록 Bannerify 플러그인 창 크기를 조절할 수 있어요. 플러그인 메인 헤더 메뉴의 크기 드롭다운을 클릭해 작은 크기부터 큰(4K) 크기까지 창 크기를 바꿀 수 있어요.