디자인시스템
-
7. 디자인시스템 - svg 및 alias 설정Project/Figma+Storybook 2023. 11. 24. 11:29
1. svg 설정 (Component 형태로 사용가능하게) 1.1. storybook 설정 사전설치 $ yarn add --dev @svgr/webpack $ yarn add --dev url-loader main.ts # .storybook/main.ts import type { StorybookConfig } from '@storybook/react-webpack5'; import path from 'path'; ... const config: StorybookConfig = { ... // webpackFinal을 통해 Webpack 설정을 변경 webpackFinal: async (config) => { if (!config.module || !config.module.rules) { return..
-
6. 디자인시스템 - 샘플 Component 제작Project/Figma+Storybook 2023. 11. 20. 16:53
이제 본격적으로 컴포넌트를 제작해 보자! Figma에 생성된 Component를 Storybook으로 옮기는 과정을 정리해 둔다. 좀더 좋을 방법이 있다면 계속 개선해 나갈 예정이다. 1. 공통 scss 작성 _variables.scss : css 변수 모음 ... $color-global-mint90: #003B40 !default; $color-global-mint80: #004C53 !default; $color-global-mint70: #006D78 !default; ... 2. Figma -> Storybook Compoent 작성 2.1. Figma Code -> Anima Figma to Code 플러그인 중에서 필자가 구성한 Storybook에서는 Anima가 제일 유사하여 선택하고 진행..
-
5. 디자인시스템 - ESLint와 Prettier 설정Project/Figma+Storybook 2023. 11. 17. 16:46
중복되는 글인듯 하여 링크로 대체한다. https://dchkang83.tistory.com/226 ESLint와 Prettier 설정하기 1. ESLint 설치 및 사용방법 1.1. ESLint 설치 $ yarn add -D \ eslint \ @typescript-eslint/eslint-plugin \ @typescript-eslint/parser \ eslint-config-airbnb \ eslint-plugin-import \ eslint-plugin-jsx-a11y \ eslint-plugin-react \ eslint-plugin-react-ho dchkang83.tistory.com
-
3. 디자인시스템 - npm에서 받아서 활용해보기Project/Figma+Storybook 2023. 11. 13. 10:46
앞서 설정한 디자인 시스템의 npm을 storybook 문서를 활용하여 테스트를 진행해 보자. 1. 디자인시스템 - Rollup을 사용하여 Storybook npm 배포 및 사용 2. 디자인시스템 - Storybook chromatic 배포 및 git 연동 3. 디자인시스템 - npm에서 받아서 활용해보기 3.1. 리액트 설치 $ npx create-react-app design-system-test-app --template typescript $ yarn create react-app design-system-test-app --template typescript 3.2. npm 라이브러리 설치 $ yarn add @djgundam/react-storybook-rollup-starter 3.3. 확인..
-
2. 디자인시스템 - Storybook chromatic 배포 및 git 연동Project/Figma+Storybook 2023. 11. 13. 10:30
1. GitHub에 소스 배포 (참고) 1.1. 원격저장소 만들기 1.2. 로컬 저장소 -> 원격 저장소 푸시 # gitignore 파일 생성 $ npx add-gitignore storybookjs,react,yarn # 저장소 초기화 $ git init # git이 관리할 대상으로 파일 등록 $ git add . # 파일상태 확인 $ git status # 변경 내역에 대한 메모와 함께 커밋 $ git commit -m "init commit" # 원격 저장소 추가 $ git remote add origin [원격저장소 주소] # 연결된 저장소 확인 $ git remote -v # 현재 브랜치 이름 확인 $ git branch # 원격 저장소 origin에 master 브랜치를 푸시한다. $ git ..
-
리액트 & 스토리북 설치Project/Figma+Storybook 2023. 10. 26. 15:05
https://storybook.js.org/docs/react/get-started/install?ref=chromaticblog.ghost.io Install Storybook Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free. storybook.js.org 리액트 프로젝트 생성 $ npx create-react-app test-design-system --template ko 스토리북 등록 $ cd test-design-sy..
-
디자인 시스템 & 스토리북 & 피그마란?Project/Figma+Storybook 2023. 10. 25. 17:16
제일 많이 쓰이는 `스토리북`+`피그마` 조합으로 리액트 컴포넌트용 디자인 시스템 구축 과정을 기록해 보자! 아자아자! Bard. 디자인 시스템 디자인 시스템은 재사용 가능한 UI 컴포넌트, 스타일 가이드, 디자인 원칙 등을 포함하는 시스템입니다. 디자인 시스템을 사용하면 개발자는 일관되고 품질이 높은 사용자 인터페이스를 보다 쉽게 구축할 수 있습니다. Bard. 스토리북 https://storybook.js.org/ Storybook: Frontend workshop for UI development Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for ..