베리어블

스타일 VS 베리어블 차이가 뭔가요? 어떤걸 사용해야 할까요?

피그마 튜터2023. 9. 5.

[스타일vs 베리어블 차이가 뭔가요?] +어떤 걸 사용해야 할까요?

스타일과 변수, 겹치는 부분도 많고 라이브러리 게시도 가능하기 때문에 차이가 뭔지, 어떤 걸 써야 할지 혼란스러우실 것 같은데요 혹시 도움이 될까 해서 피그마 공식 페이지에 있는 내용을 토대로 정리해 봤습니다.

참고해보셔요😄

스타일- 디자인 구성 요소를 등록하고 화면에 적용

여러 값으로 구성된 속성을 스타일로 등록하고 적용 가능

> ex)effect, gradient > 스타일+변수 조합 가능, 블록처럼 요소를 쌓는 개념

의미상 네이밍 처리 ex) color-primary-600’, ’color-secondary-500’등등

스타일 리스트에서 컬러 칩이 동그라미로 표현

변수- 디자인 구성 요소를 맥락에 따라 구성하고, 명칭을 시멘틱(의미론적이란 뜻!)하게 구분 Ex) color-border-brand, color-text-error 등등

단일 값만 지정 가능(그라디언트, 이펙트 지원X)

별칭 지정 가능(alias)

Alias는 개발적인 관점에 가까운데, 두 변수의 메모리 주소를 같도록 처리해 주는 거라고 합니다. 피그마에서는 베리어블 등록할 때 이미 등록한 변수를 라이브러리에서 불러오는 기능입니다.

스타일 리스트에서 컬러 칩이 네모로 표현

⭐결론: 변수 또는 스타일을 사용할지는 팀 목표에 따라 다르게 적용 가능합니다. 토큰 확장성을 활용하려면 변수를, 스타일 적용이 프로젝트에 적합하다면 스타일을 혹은 변수+스타일을 조합해서 사용할 수도 있습니다.

피그마 공식 페이지에 의하면 스타일은 피그마의 핵심 기능으로 남겨 둔다고 하니 후에 없어질 걱정은 하지 않으셔도 될 것 같네요!

⭐추가 팁 - 스타일이 적용된 라이브러리, 변수로 변경할 때 다 바꿔줘야 할까요?

놉! Style to variable로 스타일을 베리어블로 변경하신 뒤, Destroyer 사용하셔서 전체 스타일 디테치 하시면 베리어블로 바로 변경할 수 있습니다.