스토리북
-
1. 디자인시스템 - Rollup을 사용하여 Storybook npm 배포 및 사용Project/Figma+Storybook 2023. 11. 10. 10:27
이번분기 최대 목표는 디자인 시스템을 어떻게 만들것이가? 개발 및 디자인팀과의 협업을 어떻게 할것인가에 대한 프로토타입 정도가 목적임으로 방향을성을 찾기위한 테스트 정도록만 작업하도록 해보겠다. 작업방향 및 고려사항 npm에 올려 사용할 목적임으로 번들을 최소화 (Create React App 미사용) Storybook을 컴포넌트 관리 및 chromatic 사용 검토 (Storybook 전용 서버 검토) TypeScript 기반의 React 개발환경 구축 및 TypeScript가 아닌것도 사용 가능하도록 Atomic 하게 만들되 각 프로젝트에서는 어떤식으로 사용할 것인가 Page별 Component들은 어떤식으로 관리할 것인가? Figma에서 수작업이 아닌 자동으로 컴포넌트를 쉽게 가져올수 있는 방법 c..
-
리액트 & 스토리북 설치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 ..