오토 레이아웃

반응형 GNB 구현

피그마 오픈카톡방2026. 3. 7.

질문사항

Figma에서 반응형 GNB(Global Navigation Bar)를 구현할 때, 화면 크기에 따라 아이콘이 동적으로 나타나거나 사라지는 등의 변화를 만들 수 있을까요?

답변

Figma는 기본적으로 Auto Layout과 Variants를 활용하여 반응형 디자인을 구현합니다. 하지만 '미디어 쿼리'처럼 특정 화면 너비에 도달했을 때 완전히 새로운 요소(예: 없던 아이콘)가 나타나거나 사라지는 동적인 동작을 구현하는 데는 한계가 있습니다.

Auto Layout과 Variants 활용: GNB의 요소들을 Auto Layout으로 구성하고, 다른 화면 크기(예: 데스크톱, 태블릿, 모바일)에 맞춰 각기 다른 GNB 컴포넌트 Variants를 만들어 전환하는 방식으로 반응형을 흉내 낼 수 있습니다. 이 경우, 특정 아이콘을 숨기려면 해당 Variant에서 레이어를 `Hidden` 처리하거나 `0px`로 줄여야 합니다.

Prototyping 한계: Figma의 프로토타이핑 기능은 주로 사용자 인터랙션(클릭, 호버 등)에 반응하며 화면을 전환하거나 오버레이를 띄우는 방식입니다. 화면 크기 변화에 따른 동적인 UI 변경을 직접적으로 시뮬레이션하는 기능은 현재 제공되지 않습니다.

플러그인 활용: 일부 외부 플러그인(예: Anima, Webflow Devlink 등)은 Figma 디자인을 실제 웹 코드에 가깝게 변환하거나, 더 복잡한 반응형 로직을 구현하는 데 도움을 줄 수 있지만, Figma 자체의 프로토타입 기능만으로는 미디어 쿼리 기반의 동적 반응형을 완벽히 재현하기는 어렵습니다.