今年の3月3日にUIリニューアルのお知らせがありました。私はエンジニアとして、開発面をサポートするツールの導入やフロントエンドの実装を担当しました。 UIリニューアルに至った理由として、デザイナー組織が誕生したことが上げられます。今までは専業のデザイナーがおらず、デザインカンプもない状態でした。そして、組織の体制が変わるにあたって、エンジニアとデザイナー間での開発フローを最優先で整える必要がありました。 そこで、デザイン・開発フローの一例として、Style DictionaryとStorybookを導入してデザイントークンを連携したmicroCMSの事例を紹介致します。 概要UIリニューアルをするにあたって、FigmaにmicroCMS Design Systemとしてデザインを作成して頂きました。(サムネイルがすごいいい感じだったのでシェアします) Figma上では、管理画面の各ページ毎
![Style DictionaryとStorybookを使ったデザイントークンの連携フロー](https://cdn-ak-scissors.b.st-hatena.com/image/square/1b9bf82146187268dbdad64e7c98d7dda8bb3286/height=288;version=1;width=512/https%3A%2F%2Fimages.blog.microcms.io%2Fassets%2Ff5d83e38f9374219900ef1b0cc4d85cd%2Fb471042fe5b6452aa64f7629a2c507f0%2Fmi%2520%2812%29.png)