Cloudbaseのデザインシステムコンポーネント設計 - Cloudbase Tech Blog

はじめに こんにちは、Cloudbaseでプロダクトデザイナーをしているtaka (@nukotsuka)です。 CloudbaseはクラウドセキュリティのCNAPP SaaSで、フロントエンドはNext.js + Chakra UI v2で構築しています。 今回は社内デザインシステムコンポーネントの設計についてお話しします。 このライブラリで提供しているのが CBコンポーネントです。CBButton や CBDialog、CBSelect といった CB プレフィックスのついたUIコンポーネント群で、Cloudbaseのデザインシステムのコンポーネントライブラリとして機能しています。エンジニアはこれらのコンポーネントを組み合わせることで、FigmaのデザインをそのままUIとして実装できます。 このCBコンポーネントは Ark UI + Chakra UI v2 を組み合わせて実装されてい