오토 레이아웃

피그마 반응형 Auto Layout/Variables 사용

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

질문사항

피그마에서 반응형 디자인 작업을 할 때, Auto Layout과 Variables를 함께 사용하는 것이 일반적인가요? 아니면 Auto Layout만으로 작업하는 경우가 많은가요? 실무에서는 어떤 방법이 주로 사용되나요?

답변

실무에서 반응형 디자인 작업을 할 때는 `Auto Layout`과 `Variables`를 함께 사용하는 것이 가장 효과적이고 일반적인 방법입니다. 필요에 따라 `Constraints`도 결합하여 사용합니다.

Auto Layout: 반응형 디자인의 핵심입니다. 요소들의 정렬, 간격, 크기 조절 등을 자동으로 처리하여 다양한 화면 크기에 유연하게 대응할 수 있도록 합니다. `Hug contents`, `Fill container`, `Fixed width/height` 등의 속성을 적절히 활용하여 레이아웃을 구성합니다.

Variables (변수): 최근 피그마에 추가된 강력한 기능으로, 디자인 시스템의 토큰(Token)을 관리하는 데 매우 유용합니다. 특히 반응형 디자인에서는 다음과 같이 활용됩니다.

크기 변수: 데스크톱, 태블릿, 모바일 등 디바이스별로 다른 패딩, 간격, 폰트 크기 등을 변수로 정의하고, 모드(Mode)를 전환하여 한 디자인 파일 내에서 여러 반응형 버전을 쉽게 관리할 수 있습니다.

컬러/텍스트 스타일: 변수를 통해 컬러나 텍스트 스타일을 중앙에서 관리하고, 필요에 따라 쉽게 변경할 수 있습니다.

Constraints (제약 조건): `Auto Layout`이 적용되지 않은 개별 요소나 `Auto Layout` 내에서 특정 위치 고정이 필요할 때 사용됩니다. 예를 들어, `Auto Layout` 프레임 내에서 특정 아이콘이나 로고를 상단 좌측에 고정하거나, `Ignore Auto Layout`을 적용한 요소의 위치를 고정할 때 유용합니다. `Scale` 제약 조건을 사용하여 아이콘 등이 프레임 크기에 비례하여 스케일되도록 할 수도 있습니다.

실무에서의 활용:

대부분의 실무 환경에서는 `Auto Layout`을 기본으로 사용하여 유연한 레이아웃을 구성하고, `Variables`를 통해 디자인 토큰을 관리하며 다양한 반응형 모드를 전환합니다. 그리고 `Auto Layout`으로 해결하기 어려운 특정 요소의 위치나 크기 제어에는 `Constraints`를 보조적으로 활용하는 방식이 가장 효율적이고 널리 사용됩니다. 이 세 가지 기능을 유기적으로 결합하여 사용하는 것이 현대적인 피그마 반응형 디자인 워크플로우의 핵심입니다.