デザインシステムをFigmaで作成する

DigeonのデザインシステムはFigmaを用いて作成しています。優れたユーザ体験を提供するために、業務システムにおけるよくあるUIデザインパターンが構築されています。

デザインにおける詳細なポイントについては、弊社のDXブログにて公開している「業務システムにおける、優れたUIUXを実現するためのポイント」をご覧ください。

これらのコンポーネントを組み合わせて、実際の業務システムを想定したサンプル画面も作成しています。

デザインシステムをReactコンポーネントとして実装する

Figmaで作成されたデザインシステムは、エンジニアが開発で利用するためにReactコンポーネントとして実装します。

Figmaからソースコードへの変換には Figma for VS Codeを利用すると便利です。VS Code上でのデザイン確認に加え、Digeonが採用しているCSSフレームワークであるTailwind CSSを用いた実装例を確認できます。開発者はこれを利用し、Figmaデザインの実装を効率的に行うことができます。

デザインシステムをStorybookで管理する

実装したReactコンポーネントをStorybookで管理することで、UIカタログとしてブラウザで確認できます。これにより、コンポーネントがFigmaで作成されたデザインと一致しているかどうかを確認できます。

Storybookを作成する際には、コンポーネントのプロパティにJSDocを記載するようにしています。以下の点について説明を載せるようにしています。

• どういうとき・何のために利用されるか
• 設定するとどうなるか

を説明として載せるようにします。

type Props = {
  /**
   * trueのときdisplayがblockになり、widthが100%になります。
   * 要素幅いっぱいにボタンを表示したいときに使います。
   */
  block?: boolean;
  /**
   * ボタンに表示するテキストを指定します。
   */
  children: ReactNode;
  /**
   * ボタンコンポーネントの一番外側に適用されるclassです。
   * 呼び出し側からのスタイリングやレイアウト調整に用います。
   */
  className?: string;
  /**
   * trueのときボタンが非活性になり、クリックができなくなります。
   */
  disabled?: boolean;
  /**
   * ボタンが押されたときに実行される関数を設定します。
   */
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
  /**
   * ボタンの色を設定します。
   * primaryはページやフォーム内での主要なアクションに用いられます。
   * secondaryは副次的なアクションに用いられます。
   * deleteは破壊的なアクションを示すために用いられます。
   */
  variant: Variant;
  /**
   * 2種類のボタンサイズから選択します。枠と文字サイズが変化します。
   */
  size?: Size;
};

さいごに

優れたシステムをお客様に提供するためには、デザイナーとエンジニア間の連携は不可欠です。

デザインシステムを活用することで、より優れたユーザー体験を提供するための強力な基盤を築くことができ、チーム全体の生産性が向上し、プロダクトの品質を一層向上することが期待できます。

デザインシステムは今の状態で完成ではなく、現在進行系で進化しています。お客様のニーズやフィードバックに基づき、常に改善と最適化を行い、より良い体験を提供できるよう努めています。継続的な改良を重ねることで、お客様にとって価値のある、信頼性の高いソリューションを提供し続けてまいります。

この記事を見ている方で、Reactを用いたフロントエンド開発やデザインシステムの構築に興味がある方は、私たちと一緒にユーザーにとって魅力的なプロダクトを作りませんか？興味のある方はぜひご応募ください。