안녕하세요 찐망고입니다. 이전 포스팅에서 피그마의 Variable을 다뤘고, 디자인 토큰이 어떤 개념인지도 대충 알겠다! 싶다면, 이제는 여러 디자인 시스템에서 실제로 토큰 네이밍을 어떻게 하고 있는지 살펴보는 게 순서겠죠. 디자인 토큰은 디자인 시스템의 스타일 가이드 요소인 색상, 글자, 간격 같은 속성을 변수로 정의해 코드화한 값입니다.반복적으로 사용되는 디자인 속성을 효율적으로 관리하기 위한 일종의 추상화된 변수라고 할 수 있죠.즉, 자주 사용하는 스타일 속성을 정의하고 이를 코드로 변환하면 디자인 시스템 전반에 걸쳐 일관된 스타일을 유지할 수 있게 됩니다. 가장 대표적인 토큰은 구글의 머터리얼 디자인 토큰이에요. 피그마에서 바로 쓸 수 있는 머터리얼3 디자인 키트도 제공되고 있죠. 클릭..
안녕하세요! 찐망고 입니다.혹시 디자인 토큰에 대해서 들어보신분 🤚 이전포스팅에서 Variable에 대해서 이야기하면서 나온게 토큰이죠? 피그마는 이젠 디자인과 개발 협업을 도와주는 프로그램으로 자리잡고 있어요.HTML은 프로그래밍언어가 아니죠? CSS도 마찬가지죠 하지만 CSS는 은근 까다로운 친구란 말이죠.쉽게 봤다가 뒷걸음질 몇번 쳐야해 그리고 또 CSS도 꾸준히 새로운 기능이 추가돼서 놓치면..하지만 모 어렵지는 않어 ㅋㅋ 여튼, CSS를 쓰기 불편했던 것 중에 하나가 반복되는 셀렉터와 반복되는 속성들 때문인것도 있거든요.그래서 등장한게 SASS/LESS 같은 전처리기들인데..여기서는 변수를 도입해서$primary-color: #1A1A1A; 이렇게 한번만 정의해두고, 필요할 때마다 불러다 ..
- Total
- Today
- Yesterday
- seo
- 반응형웹
- 웹접근성
- 프론트엔드
- ai사주
- JavaScript
- 오블완
- uiux
- 웹퍼블리싱
- 피그마
- html
- UI디자인
- 티스토리챌린지
- 웹디자인팁
- UX디자인
- 바이브코딩
- css
- 찐망고사주
- 웹디자인
- 디자인팁
- 서비스기획
- 2024웹디자인
- 구글머터리얼디자인
- 웹폰트
- figma
- 디자인시스템
- 머터리얼디자인
- 웹디자인개발기능사
- 웹표준
- CSS3
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |