tl;dr: 나만의 디자인 시스템 구축. Github 및 Figma 에서 진행 중인 작업을 확인하세요 !

지난 2주 동안 포트폴리오에 추가하기 위해 4~5개의 서로 다른 프로젝트를 오갔습니다. 저는 디자인 시스템의 다양한 측면을 탐색하는 것을 즐깁니다. 하지만 움직이는 부분이 너무 많아서 새로운 것을 발견할 때마다 토끼굴에 갇힌 제 자신을 발견하게 됩니다.

내 이전 프로젝트 시도에 대해 약간의 반성을 한 후, 내 문제 중 하나가 너무 커지려고 한다는 것을 인식합니다. 더 작게 시작해야 했습니다. 마찬가지로, 내 실패는 종종 너무 깊이 들어가는 것과 관련이 있습니다. 아직 배우지 못한 디자인 개념이나 기술이 포함된 프로젝트를 수행하면 갇히게 될 것입니다.

그래서 저는 "작게" 시작하여 처음부터 저만의 디자인 시스템을 구축하기로 결정했습니다. "간극을 메워주는" 사람으로서 저는 디자인 측면에 대해서만 아는 것으로 제 자신을 제한하고 싶지 않습니다. 기술도 이해하고 싶습니다.

기반

디자인 시스템을 계획하는 동안 통합하고 싶은 몇 가지 주요 기능을 결정했습니다. 다른 디자인 시스템을 조사하고 테스트하면서 이러한 원칙을 통합하는 방법에 대한 아이디어를 얻었습니다.

팀의 디자인 시스템 아키텍처에 대한 몇 가지 유용한 예제와 설명을 제공 한 Design System Slack 채널을 통해 사람들에게 인사를 전합니다 !

내가 끝낸 몇 가지 주요 원칙은 다음과 같습니다.

재사용성: 저는 이미 Figma에서 구성 요소를 만드는 것을 좋아하고 항상 코드를 가지고 노는 것을 즐겼습니다. 이 기회를 사용하여 React 에서 재사용 가능한 구성 요소를 만들어 Javascript 능력을 향상시키고 싶습니다 . 또한 이러한 구성 요소를 만들기 위해 Storybook 을 통합할 계획 입니다.

일관성: 스타일 및 기타 요소를 유지하기 위해 디자인 토큰을 구현할 수 있는지 확인하고 싶습니다. 이전에 플랫폼에서 이미 작업한 적이 있으므로 이를 위해 Style-Dictionary 를 사용할 계획 입니다.

강력한 문서: 마지막으로 훌륭한 문서를 만들고 유지할 수 있는지 확인하고 싶습니다. 시스템 문서화에 Zeroheight 를 사용할 계획 입니다. 나는 연결할 수 Zeroheight을 에 FIGMA 와 스토리 모두 디자이너와 개발자에게 명확 통신.

사용 용이성 : Designer와 Devs 간의 연결에 어떤 어려움이 있는지에 대해 자주 읽었던 문제입니다. 현재 계획이 없기 때문에 양 당사자가 모든 리소스에 액세스하고 관리할 수 있도록 하고 싶습니다. 그것이 Figma 애드온, 문서 또는 기타 기술을 통하든지 간에 저는 보다 간소화된 프로세스를 만들고 싶습니다.

이것들이 유일한 계획은 아니며 계획은 항상 바뀔 수 있지만 하나를 고수하는 것이 좋습니다!

이 경험을 통해 디자인 시스템이 디자인뿐만 아니라 기술적인 의미에서도 어떻게 작동하는지 더 잘 이해할 수 있기를 바랍니다. 그 과정에서 어떤 비판이나 추천도 듣고 싶습니다!

나 자신을 극복하기!

완벽하게 만들기 위해 시간을 낭비하지 않기 위해 GitHub에서 시스템을 사용할 수 있게 하고 Zeroheight를 공개할 계획입니다. 최종 제품뿐만 아니라 거기까지 가는 길을 보여주는 것이 중요합니다.

여기에서 squilpSystem github 리포지토리를 확인하세요.

여기에서 squilpSystem Figma 파일을 확인하십시오.

이 프로젝트는 현재 상태에서 매우 기본적인 것입니다. Figma에서는 각 스타일에 대해 토큰이 생성되고 일부 중첩된 스타일도 생성됩니다. 이러한 토큰은 스타일 사전에서 처리하여 프로젝트에 대한 .scss 파일을 만듭니다. 그러나 현재 이러한 토큰은 잘 정리되어 있지 않습니다. 또한 구성 요소 작업을 시작하기 위해 Storybook을 설정했습니다.

앞으로 나아가 다

저보다 경험이 많으신 분의 도움이나 조언을 받을 수 있었으면 하는 마음으로 최대한 공개할 생각입니다. 나는 디자인 시스템이 엄청나게 흥미롭고 이것이 나 자신을 위한 좋은 출발점이라고 생각합니다.