[Figma | Token Studio] 피그마 토큰을 활용해 디자인 시스템 구축하기 (with Chakra UI)-1

안녕하세요 오늘은 피그마 플러그인의 토큰스튜디오 설정법과, 프런트엔드에서 토큰을 활용한 스크립트 생성법에 관해 공유하고자 합니다. Sematic Token Semantic token 은 디자인 시스템을 구축하고 유지하는데 필수적인 요소입니다. 개발을 할 때 자주쓰이는 패턴과, 상수를 따로 변수로 저장하는 것 처럼, 색상 또한 임의의 어떠한 변수로 색상 코드를 지정할 수 있습니다. Chakra UI에서는 유저의 시스템모드에 따라서 토큰에 맞는 컬러값을 지정해주는 기능을 제공합니다. 이를 Semantic token이라고 하며 아래와 같은 패턴으로 저장하고 Semantic token에 적용시키면 됩니다. import { ChakraProvider, extendTheme } from '@chakra-ui/rea..
Frontend 2023. 9. 13. 13:42
1