Style Dictionary v4メジャーバージョンアップ対応：デザインシステムの進化とともに

こんにちは、宮越です。プロモーション・デザインユニット（以下、プロモ・デザインU）でUIデザインをやっています。

今回は、弊社のデザインシステム「nucleus」で採用しているStyle Dictionaryをv3からv4へアップデートした取り組みについて紹介します。このアップデートにより、ESMへの完全対応で広い開発環境との親和性が向上し、TypeScriptによる型安全な開発が可能になりました。さらに、今後Style Dictionaryに追加される新機能への追従がスムーズになり、デザインシステムの長期的な拡張性と保守性が向上しています。

本記事では、移行の過程で得られた知見と、実際にどのような恩恵が得られたかを詳しく解説します。

OPTiMのデザインシステム「nucleus」について

2024年10月、デザインシステム「nucleus」を開発、社内公開しました！

nucleusの社内導入の進め方については、こちらの記事を参照ください▼
tech-blog.optim.co.jp

nucleusの取り組みのひとつが、デザイントークンの定義とStyle Dictionaryを活用したnpmパッケージの配信です。 Style Dictionaryは、デザイントークン（色やフォント、スペーシングなどのデザイン上の基本単位）を様々なプラットフォーム向けに変換・出力できるツールで、私たちのnucleusでもデザイントークンを各製品に反映させる上で活用しています。

デザイントークンは、nucleusのリソースとしてFigmaやGitLab上でドキュメントとして社内公開した上、npmパッケージとして社内配信しています。

私たちのデザイントークン▼

Style Dictionary v4の新機能と変更点

2024年にStyle Dictionary v4がリリースされました。v4では多くの変更がありましたが、特に私たちが価値を感じたのは以下の点です。

TypeScript (ESM)対応

v4の大きな特徴は、TypeScriptとESM (ECMAScript Module)への完全対応です。特に、設定ファイルをTypeScriptで記述できるようになったことで、複雑な設定も型の恩恵を受けながら記述できるようになりました。

トークン構造の変更

CTIトークン構造への依存が排除され、トークンタイプがtype（または$type）プロパティで決定されるように変更となりました。

フックシステムの再構築

各種フック（parser, transform, format, filter, actionなど）がhooksプロパティの下に移動し、さらに命名の一貫性が向上しました。matcherがfilterに、transformerがtransformに変更されています。

メジャーバージョンアップへの対応

Style Dictionary v3からv4への移行については、いくつかの破壊的変更も含まれるため、慎重に進める必要がありました。公式からcodemodも配布されていますが、今回はTypeScriptに移行するため全体を書き直しました。主な対応内容は以下の通りです。

単体テスト

私たちのパッケージは、デザイントークンをMUI(React)やVuetify(Vue.js)のthemeに適用するためのスクリプトも含まれています。これらのスクリプトの動作を担保するために、単体テストの実装とCIによるチェックを行いました。 Style Dictionary v4移行についても破壊的変更が含まれているので、意図しない挙動の変更を受けないためにも、テストは重要でした。

デザイントークン

デザイントークン自体には大きな変更を加えませんでしたが、トークンタイプの追加を行いました。

  {
    "primitive": {
      "white": {
        "value": "#FFFFFF",
+       "type": "color"
      },
    },
  }

Style Dictionary設定ファイル

Style Dictionary v4へのメジャーバージョンアップにより利用可能となった型情報を用いて設定ファイルを再作成しました。

sd.config.ts

import type { Config } from 'style-dictionary';

const config: Config = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transforms: ['name/kebab'],
      buildPath: 'assets/',
      files: [
        {
          destination: 'variables.scss',
          format: 'scss/variables',
          options: {
            showFileHeader: true,
            formatting: {
              fileHeaderTimestamp: true,
            },
          },
        },
      ],
    },
  },
};

export default config;

今後の展望

Style Dictionary v4への移行に伴って以下のような成果が得られました。

開発効率の向上：TypeScriptによる型安全性の向上と、ビルドパフォーマンスの改善により、デザイントークンの管理がより効率的になりました。
品質の向上：型チェックや単体テストの実装に伴って、設定ミスや不整合を早期に発見できるようになりました。
拡張性の向上：整理されたAPIにより新しいStyle Dictionaryのオプションが使えるようになり、またESM形式への対応で将来的な要件変更にも柔軟に対応できるようになりました。

現在、私たちが配布しているデザイントークンパッケージはいくつかの社内製品で活用されています。デザイナーだけでなく、エンジニアの方も積極的に参加してくれていて、以前公開した記事で紹介しているUXライティングルールに沿ってLintチェックできるtextlintの構築など、nucleusの普及活動が進んでいます。
tech-blog.optim.co.jp

これらの取り組みにより、社内でデザインとフロントエンド開発の連携がますます盛り上がっています。「OPTiMの製品を使うユーザーに最適な体験を提供する」という目標達成に向けて、nucleusの活動を続けていきます。

おわりに

OPTiMでは、プロモ・デザインUで一緒に働いてくださるメンバーを募集しています。 UI/UXデザイン、ブランディング、Web制作、マーケティングなど、OPTiM製品にまつわる様々なデザイン業務に携わっていただけます！ご興味のある方は、ぜひご応募ください。
www.optim.co.jp

OPTiM TECH BLOG

OPTiMについて

エンジニア募集中