[스타일vs 베리어블 차이가 뭔가요?]
+어떤 걸 사용해야 할까요?
스타일과 변수, 겹치는 부분도 많고
라이브러리 게시도 가능하기 때문에
차이가 뭔지, 어떤 걸 써야 할지 혼란스러우실 것 같은데요
혹시 도움이 될까 해서
피그마 공식 페이지에 있는 내용을
토대로 정리해 봤습니다.
참고해보셔요
스타일- 디자인 구성 요소를 등록하고 화면에 적용
1.
여러 값으로 구성된 속성을 스타일로 등록하고 적용 가능
•
> ex)effect, gradient
> 스타일+변수 조합 가능, 블록처럼 요소를 쌓는 개념
2.
의미상 네이밍 처리
ex) color-primary-600’, ’color-secondary-500’등등
3.
스타일 리스트에서 컬러 칩이 동그라미로 표현
변수- 디자인 구성 요소를 맥락에 따라 구성하고, 명칭을 시멘틱(의미론적이란 뜻!)하게 구분
Ex) color-border-brand, color-text-error 등등
1.
단일 값만 지정 가능(그라디언트, 이펙트 지원X)
2.
별칭 지정 가능(alias)
•
Alias는 개발적인 관점에 가까운데,
두 변수의 메모리 주소를 같도록 처리해 주는 거라고 합니다.
피그마에서는 베리어블 등록할 때 이미 등록한 변수를
라이브러리에서 불러오는 기능입니다.
3.
스타일 리스트에서 컬러 칩이 네모로 표현
결론: 변수 또는 스타일을 사용할지는 팀 목표에 따라 다르게 적용 가능합니다.
토큰 확장성을 활용하려면 변수를, 스타일 적용이 프로젝트에 적합하다면 스타일을
혹은 변수+스타일을 조합해서 사용할 수도 있습니다.피그마 공식 페이지에 의하면 스타일은 피그마의 핵심 기능으로 남겨 둔다고 하니
후에 없어질 걱정은 하지 않으셔도 될 것 같네요!
추가 팁 - 스타일이 적용된 라이브러리, 변수로 변경할 때 다 바꿔줘야 할까요?놉! Style to variable로 스타일을 베리어블로 변경하신 뒤,
Destroyer 사용하셔서 전체 스타일 디테치 하시면
베리어블로 바로 변경할 수 있습니다.