아티클 출처 URL : https://medium.com/@hm405383/%EB%94%94%EC%9E%90%EC%9D%B8%EC%8B%9C%EC%8A%A4%ED%85%9C-%ED%86%A0%ED%81%B0%EC%9D%B4%EB%9E%80-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B3%A0-%EB%A7%8C%EB%93%A4%EA%B8%B0-8fdb98f0eb93
1. 토큰이란?
이번 주 피그마강의를 들으면서 토큰이라는 디자인 시스템 기능을 배웠다.
컬러와 타이포그래피를 정의하여 라벨링을 하고 라이트 모드와 다크모드의 셋을 만들어 하나하나 바꾸지 않고 버튼 클릭 만으로 베리에이션이 되는 아주 좋은 기능이였다. 그리고 {} 버튼을 누르면 개발자의 언어로 바뀌어서 공유할 때 좋은 것 같다.
처음 들어보는 단어였고 협업할때 미리 정해둔 규칙을 사용해서 토큰으로 모든 디자인화면이 아름답고 일관성 있게 보이게 할 수 있다.
2. 토큰의 요소
컬러, 타이포그래피, 래디우스 값 등 필요한 컴포넌트를 생각하면서 파악해야한다.
EX) 버튼 컴포넌트 : 컬러, 폰트, 스페이스, 래디우스 토큰이 적용 될 수 있다.
3. 토큰의 이름 짓는 법
[ Adobe Spectrum 디자인 시스템 ]
- Human-redable : 토큰은 인간이 쉽게이해 할 수 있는 의사소통 도구여야 함
- Flat structure : 중첩된 구조나 트리구조가 아닌 평면구조여야 함
- Predictable and flexible : 복잡한 정보를 예측가능한 방식으로 전달 할 수 있게 토큰 명명 구조를 따른다.
4. 마무리
개발자와 협업하며 라이브러리를 구축하는 시스템인 토큰이 매력적인것 같다.
피그마에 베리어블 기능이있는데 토큰을 세팅할 수 있다. 오늘 배운 베리언트 기능은 컴포넌트들을 인스턴스화 하여 타입별로 선택할 수 있게 가능하였다.
아직 라이브러리화 할 수있는 컴포넌트가 나에겐 많이 없지만 시중에 나온 앱들을 따라 만들어보며 개인적으로 라이브러리를 구축할 수 있게하여 나만의 토큰 시스템을 만들고 실무에 적용해 볼 수 있으면 좋겠다.
'아티클스터디' 카테고리의 다른 글
| [아티클스터디] 2주차_사용자의 행동 패턴 발견하기 (0) | 2024.12.12 |
|---|