[Figma] 베리어블과 스타일

 피그마(Figma)는 UI/UX 디자이너는 물론, 기획자나 개발자까지 폭넓게 사용하는 협업 디자인 도구입니다. 하지만 막상 사용하다 보면, 기본 기능만으로는 작업 속도가 아쉽거나 원하는 요소를 빠르게 선택하지 못해 불편함을 느끼는 경우가 많습니다.
이번 글에서는 피그마 작업 시 알아두면 작업 효율이 확 올라가는 베리어블과 스타일을 정리해보았습니다.

 

 

1. 반복 사용하는 컬러는 ‘베리어블’로 저장

디자인 시스템이나 브랜드 가이드가 있는 작업에서는 동일한 색상을 반복적으로 사용하게 됩니다.
이때 매번 스포이드를 선택하거나 HEX 코드를 입력하면 불필요한 시간이 계속 쌓이죠.

 

그래서 피그마에서는 색상을 스타일로 저장해두는 것이 효율적입니다.

• 브랜드 컬러 / 서브 컬러 / 액센트 컬러 등을 저장
• 한 번 정의하면 전체 디자인에 일괄 적용 가능
• 나중에 브랜드 컬러가 바뀌어도 단 한 번 수정하면 전체에 반영됨

특히 디자인 시스템을 구축하거나 협업 환경에서 작업할 때 큰 장점이 있습니다.
색 스타일은 프로젝트 전반에 통일감을 주고 유지보수를 쉽게 만들어줍니다.

 

 

 

2. 글꼴(폰트), 크기, 자간 등을 ‘텍스트 스타일(Text Styles)’로 저장

텍스트  폰트, 크기, 굵기, 줄 간격(Line Height), 자간(Letter Spacing) 등을 하나의 스타일로 저장해 사용할 수 있습니다.

텍스트 스타일 저장의 장점:

• 헤드라인 / 서브헤드라인 / 본문 / 캡션 등 체계화
• 디자인 일관성 확보
• 프로젝트 전반에서 유지보수 용이
• 협업 시 폰트 규칙이 통일되어 흐트러지지 않음

특히 화면이 많아질수록 텍스트 스타일 관리 중요성이 커지며,
스타일을 저장해두면 전체 페이지의 통일성을 강화하는 데 큰 도움이 됩니다.

 

 

 

 

 

정리하면

• 베리어블 저장 → 색상 관리 자동화
• 텍스트 스타일 저장 → 타이포 일관성 확보