관련 자료 및 리서치

KRDS

Repo :https://git.hnine.com/rnd_dev/krds_poc

USWDS

미국 정부 디자인 시스템

해당 디자인 시스템을 보고 KRDS를 구축하려고 했음

비슷한 개발 환경으로 진행 예상

• https://designsystem.digital.gov/

• https://github.com/uswds/uswds

개발 환경 및 관련 라이브러리

React + Vite + Typescript + Scss

receptor

DOM 이벤트 위임 툴킷

• https://github.com/shawnbot/receptor

lit

web components 생성 도구

• https://github.com/lit/lit

storybook

• https://storybook.js.org/docs/get-started/frameworks/web-components-vite

웹 접근성 테스트

• https://storybook.js.org/addons/@storybook/addon-a11y

vitest

vite 로 구동되는 매우 빠른 unit test 프레임워크

• https://vitest.dev/

figma-scss-plugin

Repo :https://git.hnine.com/rnd_dev/figma-scss-plugin

기능

Figma 에 정의된 local Styles와 variables 들을 하나의 scss 파일로 내릴 수 있습니다.

scss 파일을 hnine의 지정된 Repository에 Merge Request를 요청할 수 있습니다.

참고 문서

• https://github.com/alexwidua/figma-beautiful-shadows/blob/d4ce0e7b71cd95c78207c1a71f48977ce7cbb7d3/src/main.ts

• https://junghyeonsu.com/posts/asset-town-figma-plugin/

• https://yuanqing.github.io/create-figma-plugin/utilities/#on

figma-variables/src/plugin/controller.ts at 09cdad9930259517c85483de17af918264d55446 · limichange/figma-variables

• https://github.dev/WeAreFew/few-css-figma-export-plugin/blob/main/code.ts

디자인 시스템 구축 관련 컨퍼런스 및 유투브 영상

[디자인 토큰 개념] →https://www.youtube.com/watch?v=IN0a_3c1vJs

[피그마 variables] →https://www.youtube.com/watch?v=XKOLKyh8b1I&t=446s

[배민 디자인시스템 컨퍼런스] →https://www.youtube.com/watch?v=eJblIR_2cMU

[당근 디자인시스템 컨퍼런스] →https://www.youtube.com/watch?v=obQvttzgSzY&t=1502s

LIT으로 디자인시스템 구현하는 경우 쉽게 이해되는 참고자료

Trendyol - baklava desgin system

[바클라바 디자인 시스템 소개]https://medium.com/trendyol-tech/introducing-trendyols-open-source-baklava-design-system-b616ede02ebc

[바클라바 스토리북]https://baklava.design/?path=/docs/documentation-welcome--documentation

[바클라바 깃허브]https://github.com/Trendyol/baklava

[바클라바 피그마]https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide

피그마 플러그인 / API 사용한 디자인 시스템 구축

• https://deview.kr/data/deview/session/attach/11_%E1%84%91%E1%85%B5%E1%84%80%E1%85%B3%E1%84%86%E1%85%A1API%E1%84%85%E1%85%A9%20%E1%84%92%E1%85%A1%E1%84%82%E1%85%A1%E1%84%83%E1%85%AC%E1%84%82%E1%85%B3%E1%86%AB%20%E1%84%8B%E1%85%AE%E1%84%85%E1%85%B5.pdf

• https://tv.naver.com/v/23651902

FIGMA & storybook

피그마 변수와 디자인 토큰의 차이점 이해

피그마 API - Naver D2

피그마 API를 이용하여 Assets export 예제 참고자료

토큰 및 키

Figma Access Toekn :

Figma File key :

참고자료

Figma API

Figma tokens automatically turned into code: how we kickstarted our design system

Using Figma API to extract illustrations and icons

Part 1 : Down the rabbit hole

ITCSS : : Scalable and Maintainable CSS Architecture

Part 2 : Using the Figma API

Part 3 : From Figma to our codebase

Part 4 : Profits

Storybook with Figma

Figma API -> Storybook 동기화

[Why desginers should move from px to rem]https://uxdesign.cc/figma-now-supports-rem-units-understanding-the-use-and-benefits-5957fc1ecb78

Mastering the Design-to-code Flow with Figma, Storybook, and Angular

Part 1

Part 2

Part 3

디자인시스템 구현 참고자료

18F 미정부 개발 가이드

18F 미정부 접근성 가이드

USWDS

USWDS Github

Pharos Storybook

Pharos Github

Clever Cloud Storybook

Clever Cloud Github

Adobe Spectrum

디자인 시스템 모음

플랫폼 팀 없는 오픈 소스 기반의 디자인 시스템 구축 회고

Folder structure

• https://matthiasott.com/notes/how-i-structure-my-css

• https://elad.medium.com/css-architecture-folders-files-structure-f92b40c78d0b

Monorepo 구축 시 참고자료

모노레포 세팅 - yarn

콴다 - 모노레포 구축

무신사 - 모노레포 구축

모노레포 구축 깃허브 샘플 - yarn workspace & turborepo

모노레포 구축기 1 ~ 3

모노레포 샘플 깃랩 -https://git.hnine.com/rnd_dev/design-system-monorepo-sample

Tree-shaking 적용 참고 자료https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma