JDevBlog

디자인 시스템 디자인 원칙과 중요 UX 전략에 의해 결합된 UI 구성요소 모음 이 구성요소를 다양한 조합으로 재사용하므로 효율적인 제품 빌드 및 업데이트가 가능 UI 요소 전체에 사용되는 색상, 타이포그래피 및 스타일, 표준, 원칙 및 일관된 UI 요소의 모음 Reference 디자인 시스템, 궁극의 기본 가이드 아우디 https://www.audi.com/ci/en/renewed-brand.html https://react.ui.audi/?path=/story/introduction--page 우버 https://github.com/uber/baseweb https://baseweb.design/components/

Essential addons There are many third-party addons as well as “official” addons developed by the Storybook core team. Docs Controls Actions Viewport Backgrounds Toolbars & globals Measure Outline Docs Storybook gives you tools to expand this basic documentation with prose and layout that feature your components and stories prominently. Document component usage and properties in Markdown npm inst..

Storybook은 UI 구성 요소를 위한 사용자 인터페이스 개발 환경으로, 개발자가 독립적으로 구성 요소를 만들고 격리된 개발 환경에서 인터랙티브하게 구성 요소를 보여준다. Storybook is a JavaScript tool that allows developers to create organized UI systems making both the building process and documentation more efficient and easier to use. 4가지의 솔루션 Makes it easy to build components in isolation, outside of your app. Increases developer awareness of existing components..

Why use Storybook? Storybook helps you document components for reuse and automatically visually test your components to prevent bugs. Extend Storybook with an ecosystem of addons that help you do things like fine-tune responsive layouts or verify accessibility. Install Storybook # Add Storybook: npx sb init 📦 Install the required dependencies. 🛠 Setup the necessary scripts to run and build Story..

You can learn here, www.youtube.com/watch?v=p2sZKAPOQXs with atomic design, whatjackhasmade.co.uk/storybook-atomic-design-styling-our-button/