베리어블 & 디자인 시스템

불린 Variables, 프레임 width 반응

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

질문사항

불린(Boolean) Variables가 프레임의 width 변화에 반응하도록 프로토타이핑을 구현할 수 있나요?

답변

아니요, 불린 Variables가 프레임의 `width` 변화에 직접적으로 반응하도록 프로토타이핑을 구현하는 것은 어렵습니다. 그 이유는 다음과 같습니다:

`width` 값과 Variables의 연동 한계: `width` 값에 Variables를 직접 연결할 수는 있지만, 프레임의 `width`를 수동으로 조절하거나 Auto Layout 설정(예: Fill container, Hug contents)이 변경되면 Variables 연결이 해제될 수 있습니다. 이는 Auto Layout에서 `Fill`이나 `Hug` 설정 후 수동으로 크기를 조절하면 `Fixed` 값으로 바뀌는 것과 유사합니다.

프로토타이핑 환경의 제약: Figma 프로토타이핑 환경에서는 완성된 디자인의 `width`를 동적으로 늘리거나 줄일 수 없습니다. 프로토타입 뷰어에서 화면 크기를 조절하는 것은 뷰포트의 크기를 변경하는 것이지, 디자인 내 객체의 `width` 속성을 변경하는 것이 아닙니다.

따라서 `width` 변화에 따른 반응형 동작을 구현해야 한다면, `Modes`를 활용하여 다양한 `width` 상태에 맞는 디자인을 미리 정의하고, 프로토타이핑 시 `Set variable` 액션을 통해 `Mode`를 전환하는 방식으로 시안을 구성하는 것이 효과적입니다.