🚧👷👷‍♀️🚧支払い.comで整備中のデザインシステムについて

こんにちは！！

株式会社UPSIDERの「支払い.com」でフロントエンドエンジニアをしていますOkahashi（@akaneburyo）です！

今回は、支払い.comチームで進めているデザインシステムの整備についてご紹介します！

きっかけ

これまで支払い.comチームの開発では、デザイナーにデザインをお願いすることもあれば、フロントエンドエンジニアやPdMがデザインを手掛けることもありました。

これにはデザイナー不在の期間があったことも大きく影響しています。

結果として、次第に以下のような課題が目立つようになってしまいました😢

使い捨てのデザインファイルが乱立している
ページごとに微妙に異なる配色やレイアウトになっている箇所があり、統一感が無い

Figma上には100以上のページがあり、ワイヤーフレームや検討段階で作られた使い捨てのものも多く含まれています🔥

（ちなみに、このファイルはカジュアルに利用できるPlaygroundとして残しています）

そんな中、デザイナーのNaoyaさんが参画してくださったのをきっかけに、2024年9月頃から少しずつデザインシステムの整備を始めました。

支払い.comでデザインシステムを作る目的

支払い.comチームでは、主に以下の点を目指してデザインシステムを整備しています。

プロダクト全体の統一感を高め、使い心地を向上させる
デザイナーとエンジニア双方の実装コストを削減する
実装とデザインファイル双方のメンテナンス性を向上させる

単純な使い心地の向上だけでなく、実装コストの削減とメンテナンス性の向上は将来的にユーザーへ提供できる価値の最大化につながると考えています。

やっていること

UPSIDERには、すでにカード事業で利用しているデザインシステムがあります。

これをベースに、Naoyaさんとフロントチームが主体となって以下を進めています。

コンポーネントの定義
デザイントークンの定義

（まずは小さく、できることから💪）

コンポーネントの定義

各コンポーネントが持つスタイルや振る舞いを実装が可能なレベルに明文化し、Figma上で整理しています。

整理はフロントエンドエンジニアが主体となって行いつつ、デザイナーがレビューを行うことで認識をそろえながら進めます。

再利用されるコンポーネントの整備を丁寧に行い、エンジニアが「よしなに」実装する余地を減らすことで開発の効率化につながると考えています。

将来的にはコンポーネントの外側に発生している制約についても、AutoLayoutやDevModeを駆使して表現したいと考えています💪

デザイントークンの定義

まずは色から整備を進めています。

支払い.comでは、以下の2種類のトークンを定義しています。

Base Token: 特定の要素に紐づかない汎用的なトークン
Alias Token: Base Tokenを継承し、特定の要素に紐づいたトークン

これらは、Figma上でローカルバリアブルとして、それぞれ別々のコレクションに定義しています。

さらに、Base Tokenを直接利用してしまったり、Alias Tokenを意図しない用途で利用してしまうことを防ぐため、可能な限りカラーのスコープも制限しています。

フロントエンドではTailwind CSSを利用しており、トークンはテーマとして表現します。

ここでもFigmaと同様に、用途に応じてスコープを絞って定義します。

const BASE_COLOR_TOKENS = {
  primary: {
    [500]: '#08979C'
  },
  ...{そのほかの色定義}
}

const ALIAS_COLOR_TOKENS = {
    text: {
        primary: {
            dark: tinycolor(BASE_COLOR_TOKENS.primary).darken(7.5).toHexString(),
            base: BASE_COLOR_TOKENS.primary,
            light: tinycolor(BASE_COLOR_TOKENS.primary).lighten(7.5).toHexString(),
        }
    }
    ...{そのほかの色定義}
}

export default {
  theme: {
        colors: {
      // グローバルで利用可能な色は定義しない
        },
        textColor: ALIAS_COLOR_TOKENS.text,
        backgroundColor: ALIAS_COLOR_TOKENS.background,
        borderColor: ALIAS_COLOR_TOKENS.border,
        divideColor: ALIAS_COLOR_TOKENS.border,
        outlineColor: ALIAS_COLOR_TOKENS.border,
    }
    ...{そのほかの設定}
}