베리어블 & 디자인 시스템

베리어블 텍스트 사이즈 반응형 변경

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

질문사항

피그마 베리어블(Variables)을 활용하여 테마 모드 변경 외에, 텍스트 사이즈를 PC와 모바일 환경에 따라 반응형으로 변경하는 것이 가능할까요?

답변

네, 피그마 베리어블(Variables)을 활용하여 텍스트 사이즈를 PC와 모바일 환경에 따라 반응형으로 변경하는 것이 가능합니다. 이는 주로 다음과 같은 방식으로 구현할 수 있습니다.

텍스트 스타일 베리어블: 텍스트 스타일을 정의할 때, 각 텍스트 스타일에 대해 PC용 값과 모바일용 값을 별도의 모드(Mode)로 설정할 수 있습니다. 예를 들어, 'Heading 1'이라는 텍스트 스타일에 'Desktop' 모드에서는 48px, 'Mobile' 모드에서는 32px로 정의하는 식입니다.

프레임에 모드 적용: 디자인 작업 시, PC 화면을 나타내는 프레임에는 'Desktop' 모드를, 모바일 화면을 나타내는 프레임에는 'Mobile' 모드를 적용하면, 해당 프레임 내의 텍스트 컴포넌트들이 자동으로 정의된 텍스트 사이즈 베리어블 값을 따르게 됩니다.

이러한 방식으로 반응형 텍스트를 구현하면, 디자인 시스템의 일관성을 유지하면서 다양한 화면 크기에 유연하게 대응할 수 있습니다.

관련하여 피그마 베리어블 특강 자료를 참고하시면 더 자세한 정보를 얻으실 수 있습니다:

[반응형 텍스트 및 테마 모드 관련 자료 1](https://youtu.be/nOwot3XTTMU?si=KAPdh_8mIGDLurR3)

[반응형 텍스트 및 테마 모드 관련 자료 2](https://youtu.be/3hvsc8GyxNI?si=ED_P1r_WQ3B5TG96)