베리어블 & 디자인 시스템

프레임 사이즈 변수: 모바일만 표시

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

질문사항

프레임의 가로/세로 사이즈를 변수(Variables)로 설정하여 변경하려 할 때, 특정 사이즈(예: 1920x1080)가 아닌 모바일 사이즈만 표시되는 경우 어떻게 해결할 수 있나요?

답변

프레임의 가로/세로 사이즈를 변수로 설정하여 변경할 때, 특정 사이즈만 표시되는 문제는 변수 모드(Variable Mode) 설정이나 적용 방식에 따라 발생할 수 있습니다.

변수 컬렉션 및 모드 확인: 먼저, 원하는 데스크톱 사이즈(예: 1920x1080)가 포함된 변수 컬렉션이 올바르게 설정되어 있고, 해당 컬렉션의 모드(Mode)가 현재 작업 중인 프레임에 적용 가능한 상태인지 확인해야 합니다.

프레임에 변수 적용: 프레임을 선택한 후, 디자인 패널의 가로(W) 또는 세로(H) 입력 필드 옆에 있는 'Apply variable' 아이콘을 클릭하여 원하는 사이즈 변수를 선택합니다. 만약 변수가 올바르게 설정되어 있다면, 해당 변수 모드에 따라 정의된 모든 사이즈 옵션이 나타날 것입니다.

변수 확장: 이 방법을 응용하여 텍스트 크기, 간격 등 다른 디자인 속성에도 변수를 적용하여 디자인 시스템을 더욱 유연하게 관리할 수 있습니다.