---
url: "/ko/bannerify/design/figma-frames.md"
description: "Bannerify는 활성 Figma 페이지의 모든 **최상위 프레임과 인스턴스**를 찾아 각각을 하나의 **배너**로 사용해요. Figma 컴포넌트 세트(배리언트) 레이어 안의 최상위 요소도 배너로 불러와요."
---

# Figma에서 배너 디자인하기

> Bannerify는 활성 Figma 페이지의 모든 **최상위 프레임과 인스턴스**를 찾아 각각을 하나의 **배너**로 사용해요. Figma 컴포넌트 세트(배리언트) 레이어 안의 최상위 요소도 배너로 불러와요.

### 영상 튜토리얼: Figma에서 배너에 애니메이션을 넣고 HTML로 내보내기

Figma에서 몇 초 만에 애니메이션을 넣고 바로 게재할 수 있는 HTML 배너로 내보내는 방법을 보여 주는 영상 튜토리얼이에요(영어).
[Embedded media](https://www.youtube-nocookie.com/embed/-TA088FNulA)

## 빈 Figma 페이지에서 시작하기 {#starting-from-a-blank-figma-page}

[Video](/assets/videos/bannerify/design/blank-frames.mp4)

빈 Figma 페이지에서 플러그인을 실행하면, 바로 배너 디자인을 시작할 수 있도록 Bannerify가 표준 배너 크기 몇 가지를 자동으로 만들어 주겠다고 제안해요.

## Figma 배너 프레임 레이어 구성하기 {#structuring-your-figma-banner-frame-layers}

[Video](/assets/videos/bannerify/design/frame-children.mp4)

각 프레임의 **직계 자식 레이어**는 기본적으로 각 배너 안의 **요소**로 사용돼요. 아래 섹션에서 보듯이, 이 요소들은 Bannerify 플러그인에서 각각 따로 애니메이션을 넣어 배너를 만들 수 있어요.

> **Note:** **숨긴 자식 레이어도 배너 프레임에 포함돼요** Figma에서 **숨김**으로 전환한 직계 자식 레이어도 Bannerify 레이어 타임라인에 그대로 표시돼요. 여러 단계에 걸쳐 나타났다 사라져야 하는 요소가 있는 배너를 디자인할 때, 자식 레이어를 화면에서 숨겨 둘 수 있게 하기 위해서예요. Bannerify는 이렇게 숨긴 레이어를 숨김이 해제된 상태로 자동으로 표시해요.

> **Tip:** **타임라인에서 Figma 레이어 숨기기**. Figma 프레임의 특정 레이어를 타임라인에 포함하고 싶지 않다면, Figma 레이어 이름 앞에 **hide-** 접두사를 붙이세요(예: *hide-RectangleBackground*). 그러면 해당 레이어가 플러그인 타임라인과 배너 내보내기에 포함되지 않아요.

## 이미 디자인한 배너로 시작하기 {#starting-with-banners-you-ve-already-designed}

[Video](/assets/videos/bannerify/design/loading-existing.mp4)

Figma에서 이미 배너 디자인을 만들었다면, 해당 페이지에서 Bannerify 플러그인을 실행할 때 파일에서 배너로 사용할 수 있는 프레임이나 인스턴스 목록이 자동으로 불러와져요.

플러그인에서 불러올 배너만 체크하거나 체크 해제한 다음 **Load Checked Banners** 버튼을 클릭하거나, **Load All Banners** 버튼을 클릭해 모든 배너를 자동으로 불러오세요.

## 여러 배너 또는 모든 배너 새로 고치기/다시 불러오기 {#refreshing-or-re-loading-multiple-all-banners}

[Video](/assets/videos/bannerify/design/refreshing-all-banners.mp4)

Bannerify가 이미 실행 중일 때 Figma 파일에서 레이어를 추가하거나 수정하면 자동으로 반영되지 않아요. 대신 배너를 새로 고치는 방법이 두 가지 있어요.

타임라인의 모든 배너를 새로 고치거나 Figma 파일에서 새 배너를 불러오려면 플러그인 메인 헤더 메뉴의 **Refresh** 아이콘을 클릭하세요.

그러면 처음의 배너 선택 화면이 다시 나타나요. 플러그인에서 불러올 배너만 체크하거나 체크 해제한 다음 **Load Checked Banners** 버튼을 클릭하거나, **Load All Banners** 버튼을 클릭해 모든 배너를 자동으로 불러오세요. 수정된 레이어가 Bannerify 타임라인과 실시간 미리보기에 표시돼요.

## 배너 하나만 새로 고치기 {#refreshing-a-single-banner}

[Video](/assets/videos/bannerify/design/refreshing-single-banners.mp4)

Bannerify가 이미 실행 중일 때 Figma 파일에서 레이어를 추가하거나 수정하면 자동으로 반영되지 않아요. 대신 배너를 새로 고치는 방법이 두 가지 있어요.

배너 하나만 빠르게 새로 고치려면 해당 배너 헤더 바의 **Refresh** 아이콘을 클릭하세요. 그 배너의 레이어만 새로 고쳐지고, 수정된 레이어가 Bannerify 타임라인과 실시간 미리보기에 표시돼요.

## 배너 단색 배경 채우기 설정하기 {#setting-a-solid-banner-background-fill}

[Video](/assets/videos/bannerify/design/setting-background-fill.mp4)

Figma에서 프레임의 단색 **Fill**을 원하는 색으로 설정하면 해당 배너의 단색 배경색을 지정할 수 있어요. 이 색은 이미지 요소가 로드되기 전에 잠깐 보일 수 있어요.

## 배너로 자동 스크롤하기 {#auto-scrolling-banners-into-view}

[Video](/assets/videos/bannerify/design/scroll-layers.mp4)

편집할 배너를 쉽게 바꿀 수 있도록, Figma 페이지에서 배너에 해당하는 레이어(또는 자식 레이어)를 클릭하면 Bannerify가 타임라인에서 그 배너로 자동 스크롤해요.

반대 방향으로도 작동해요. 타임라인에서 배너 미리보기 위에 있는 **frame** 또는 **instance** 아이콘 버튼을 클릭하면, Figma 페이지에서 해당 Figma 레이어로 자동으로 스크롤하고 확대해요.

## 플러그인 창 크기 조절하기 {#resizing-the-plugin-window}

[Video](/assets/videos/bannerify/design/resize-window.mp4)

더 크거나 작은 모니터를 쓰고 있다면, 화면 크기에 맞춰 타임라인을 더 편하게 사용하고 볼 수 있도록 Bannerify 플러그인 창 크기를 조절할 수 있어요. 플러그인 메인 헤더 메뉴의 크기 드롭다운을 클릭해 작은 크기부터 큰(4K) 크기까지 창 크기를 바꿀 수 있어요.