Kwangkki

작년에 피그마 디자인 시스템을 토큰화한 후 자바스크립트로 옮기는 방법을 포스팅했었다. 하지만 그동안 피그마도 많은 업데이트가 있었고 새로운 기능이 출시되며 포스팅했던 과정대로 되지 않을 것이다. 오늘은 그것을 대체할 수 있는 방법과 피그마의 local varialbles 기능으로 이것저것 테스트해 본 것을 글로 옮겨 적어 본다. Local Variables나온 지 꽤 된 기능이지만 제대로 활용을 못하고 있었는데, 살펴보니 거의 반 코딩이나 다름 없었다. (잘 활용하면 디자인 시스템을 코드로 옮기기 정말 편할 것 같은 느낌). 피그마에서 빈 board를 클릭하면 오른쪽 패널에서 Local variables를 확인할 수 있다.   변수(variable) 지정들어가보면 Create variable이 있고, 4..

최근 내 개발 지식뿐만 아니라 디자인 지식까지 점프한 경험에 대해 공유하고자 한다. 웹 개발 팀 프로젝트 최근 거의 한 달 동안 진행한 웹사이트 개발 프로젝트에 참여했다. 디자이너가 없어 이제 막 개발 공부를 시작한 프론트 개발자 2명이서 머리를 싸맸다. 디자인을 어떻게 하면 좋을까 여러 가지 의견을 나누면서 우리는 얼마나 어떻게 예쁘게 만들까를 뒤로하고 한 가지 키워드에 대해 먼저 생각해 봤다. 재사용성 높은 디자인 예전에 유튜브 EO 채널에서 토스 디자인 시스템에 대한 영상을 본 적이 있는데, 비슷한 디자인과 패턴을 묶어 시스템화함으로 재사용성과 생산성을 높였다는 이야기였다. 퍽 감명적이었는지 한동안 토스 디자인 관련 블로그를 찾아 헤맸었던 기억이다. 그래서 이번 프로젝트에는 재사용성 높은 디자인을 ..