Figma에서 디자인이 변경되었어도 코드를 수정하지 않아도 된다면?
디자인 토큰을 사용하기 앞서
제가 일했던 환경에서는 디자이너와 기획자로부터 디자인 수정, 색상 변경 등 요청이 빈번했습니다.
디자이너 : 프론트개발자님 여기 디자인 수정되었어요.! X 10
기획자 : 프론트개발자님 여기 색상 변경되었어요~
이처럼 클라이언트의 요구사항이 끊임없이 변화하면서, 디자인과 기획 또한 지속적으로 수정될 수밖에 없는 상황이었습니다.(문구 수정, 색상 변경, 간격 수정, 테두리 수정 등등..)
먼저, 글의 제목인 디자인 토큰으로 소통하기에 앞서 디자인 토큰을 사용하기 전에 회사에서
수정사항을 웹에 반영하기까지의 순서를 정의해볼까요?
2. 기획 요건 정리 -> 디자인, 프론트 일정 산정
3. 디자인 수정
4. Figma에 수정된 부분 코멘트 -> 프론트에게 알림
5. 프론트개발자 피그마 확인 후 -> 에디터에서 수정
6. 변경알림 -> 디자인, 기획
이 과정을 간단히 6단계로 나눌 수 있습니다.
프론트 개발자가 색상을 수정한다고 생각해보겠습니다.
Figma에 코멘트 달린 부분을 찾고, 변경된 사항을 확인하고, 에디터로 넘어가 현재의 값을 확인하고, 값을 수정합니다.
값을 수정할 때, 새로운 변수 값을 생성해서 변경하거나 재사용하지 않고 그 부분에만 새로운 값을 적용합니다.
프론트 개발자가 색상을 수정할 때, 대략 3~4단계의 작업을 실행합니다.
디자인 토큰을 사용한다면 어떨까요?
2. 변경된 내용을 소통 채널로 간단히 공유합니다.
3. 프론트 개발자는 추가 작업 없이 변경 사항을 자동으로 반영받습니다.
네. 프론트 개발자는 에디터에서 직접적으로 값을 수정하는 행동을 하지 않아도 됩니다.
결과적으로, 기존에 6단계에 걸쳐 진행되던 작업이 단 3단계로 줄어듭니다. 디자인 토큰을 통해 디자이너와 개발자 모두 반복적인 작업 부담을 줄일 수 있습니다.
어떤가요? 디자인 토큰을 사용하고 싶어지지 않으신가요?
그럼 디자인 토큰이 무엇이고 왜 쓰는 지 같이 알아보겠습니다.
디자인 토큰
디자인 토큰은 색상이나 간격 값처럼 디자인 요소에 이름을 부여하면서 디자인 요소의 의미나 명확한 개념을 알 수 있게 해줍니다. 기존에도 Figma의 Local Styles 기능을 사용하여 디자인 토큰을 만들어 활용할 수 있었지만, 2023년 10월 쯤 Local Variables라는 기능이 추가되면서 토큰의 개념을 더 잘 사용할 수 있게되었습니다.
Local Styles는 기존에도 사용 가능했지만, Local Variables는 더 체계적인 변수 관리와 의미 전달을 지원합니다.
아래에서 Local Variables의 기능을 살펴보며, 왜 이를 활용해야 하는지 알아보겠습니다.
Local Variables란?
특정한 디자인 요소를 변수처럼 사용하겠다라고 보시면 될 것같습니다.
로컬 베리어블 알아보기 1
위 이미지로 예를 들어보겠습니다.
Core Value#FFFFFF는 순수한 흰색을 나타내는 원시 값으로, 단순히 색상 정보를 제공할 뿐, 어디에서 어떻게 사용되는지에 대한 추가적인 의미나 맥락을 전달하지 못합니다. 이는 사용자가 해당 색상의 목적과 역할을 직관적으로 이해하기 어렵게 만듭니다.
Primitive이러한 한계를 해결하기 위해 #FFFFFF에 white800이라는 이름을 부여합니다.
white800은 해당 값이 흰색임과 동시에 명도가 800이라는 정보를 전달하며, 색상 체계에서의 위치를 명확히 정의합니다.
하지만 이 단계에서도 여전히 색상이 어디에서 어떻게 사용되는지에 대한 구체적인 정보를 제공하지 못합니다.
Semantic
white800을 프로젝트의 주 색상으로 지정하며, 이를 Primary라는 이름으로 표현할 수 있습니다.
Primary라는 이름은 프로젝트에서 해당 색상이 주요 색상임을 나타내는 의미를 부여합니다.
하지만 Primary라는 이름만으로는 어디에서 사용되는 색상인지에 대한 구체적인 정보를 전달하기에는 한계가 있습니다.
로컬 베리어블 알아보기 2
Primary에 컴포넌트와 연관된 이름을 추가하여, 사용처와 의미를 더욱 명확히 할 수 있습니다.
예를 들어: Button Primary White 800이라는 이름은 이 색상이 버튼 컴포넌트에서 사용되는 주요 색상임을 분명히 합니다. 이러한 접근 방식은 색상의 목적과 사용 맥락을 모두 전달하여, 개발 및 디자인 작업에서의 혼란을 줄일 수 있습니다.
Core 값 #FFFFFF을 Primitive 값 white 800의 값으로 참조하고, white 800을 Semantic 단계를 통해 의미를 부여하고, Component의 값으로 Semantic 값을 참조하여 사용할 수 있게 됩니다.
일종의 체인이라고 생각하시면 이해가 쉬울 것 같습니다.
Figma에서 보기
1. Variables 생성
figma 로컬 베리어블 만들기
2. 다른 Variables 사용하기
figma 다른 Variables 사용하기
white 800를 선택하여 Primary 값으로 #FFFFFF가 아니라 white800를 사용할 수 있는 걸 볼 수 있습니다.
3. Variables 추출해서 토큰으로 만들기
Variables를 토큰으로 만드는 방법 여러 가지가 있는데 무료로 사용하는 방법은 variables 형태를 json으로 변환한 다음에 그걸 style-dictionary 라는 라이브러리를 사용해서 css, scss, flutter, js(ts), 네이티브 언어 등으로 한번 더 변환해서 사용할 수 있습니다.
[피그마에서 json으로 변환하는 플러그인]
- Tokens Studio for Figma
- 일부기능을 사용하려면 유료로 결제해야하지만 기능이 편리하고 깃헙,깃랩(외부주소 불가)의 레퍼지토리로 json파일을 업로드 할 수 있다.
- 이 기능을 사용해야 디자이너가 토큰의 값을 변경하고 저장 버튼을 눌렀을 때, 토큰값이 저장되어 있는 레퍼지토리로 값이 올라가고, 웹이 빌드할 때, 프로젝트에서 토큰 레퍼지토리의 값을 참조해서 변경된 결과가 보이게된다.
- Design Tokens
- varibles2json
힘들 수 있지만 한번 토큰시스템을 잘 구축해놓으면 색상, 폰트, 패딩과 마진 등을 변경하는 과정에서의 자원을 줄일 수 있을 것 같았다.
디자인 토큰 시스템은 디자인, 기획, 프론트엔드 간의 소통을 원활하게 하고, UI의 일관성을 유지하며, 유지보수를 훨씬 간소화할 수 있습니다. 특히, 반복적인 작업 부담을 줄이고 효율성을 높이기에 충분히 시도해볼 만한 가치가 있다고 생각합니다.
※ Local Variables의 기능이 나온지 별로 안되서 원래는 텍스트와 테두리 관련한 값을 생성할 수 없었으나 이번에 새로 추가 되었습니다.