【個人開発】非デザイナーがtailwindcssフレンドリーなデザインシステムを構築しようとしている話。

## ことのはじまり
現在、Next.jsで個人開発を行なっているのですが、いくつかの基準（目標）を設定しています。
- サービスとしてリリースし、運用することを前提とする
- Next.js(Vercel)のエコシステムをキャッチアップし使ってみる。0→1開発のスピードとクオリティの最大値を探す
- 今後複数人での開発を見込んだ技術選定を行う（[YAGNIの原則](https://zenn.dev/nanagi/articles/0e899711611630)を無視しているかもしれません）

このような条件で個人開発を行なっている中で、
**デザインはどう組み合わせるのが最適なんだろう？** 
という疑問が生じました。
Next.jsは現在は大規模なサービスでも数多くの採用実績がありますが、やはり0→1のプロジェクトにおける**エコシステムの導入ハードルの低さ** には大きな魅力があると思います。（？）
デザイン面でもそのエコシステムの恩恵を享受したいと思い、以下の方法を始めの一歩として試してみました。

## 何をしたのか
今回Figmaでデザインを作成している中で、TailwindCSSのスタイルをベースとして実装することで、shadcn/uiなどの生成AIツールとも互換性の高いデザインを作成できると考えました。
そのために今回はfigmaでこちらにチャレンジしてみました。

:::note info
tailwindCSSのデフォルトスタイルをLocal Variablesとして設定する!
:::

これにより、作成するデザイン全てを、tailwindCSSのスタイルに準拠する形でデザインできる用になるはずです。

:::note warn
figmaの有料プランであれば、tailwindCSSのCommunity Libraryを利用することで簡単にtailwindCSSのスタイルを利用できます。
:::
とはいえ、個人開発をしている方の中には私のように
「開発用ツールに課金しすぎて、デザインツールに課金できないよ。（泣）」
というかたも一定数いると思いますので、**無料で始めてみる** ということが今回のスコープとなります。


## 手順
手順は至って簡単です。
1. Pluginの[Tailwind CSS Style Generator](https://www.figma.com/community/plugin/1167391871470238568/tailwind-css-styles-generator) を使用して、local stylesを作成する
1. PluginのStyles to Variables　を使用して、Local stylesをLocal variablesに変換する
1. Local variablesを継承し、必要なSemantic Colorを設定する
1. 作成したスタイルを元に、デザインシステムを作成する

早速やってみましょう。


## 1. Pluginの[Tailwind CSS Style Generator](https://www.figma.com/community/plugin/1167391871470238568/tailwind-css-styles-generator) を使用して、local stylesを作成する

プラグインをインストールして、Generateを行うことで、Figmaのページ右側デザインタブのLocal StylesにTailwindCSSのスタイルに準拠したスタイルが追加されます。
* Text
* Color
* Effect

の3カテゴリーのスタイルがimportされます。

![スクリーンショット 2024-05-09 14.18.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116193/51e79b67-49db-76b0-0b66-07a14f58fe49.png)

GENERATEすることで画面右にスタイルが追加できました。

![スクリーンショット 2024-05-09 14.19.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116193/7199d5b9-9e90-2a6d-4d00-449c9067f439.png)

カスタムでtailwindCSSのスタイルデータをimportしたい場合は、[別途プラグイン](https://www.figma.com/community/plugin/738806869514947558/tailwind-css?searchSessionId=lw22iw5h-4a0yioflv8a)を使用することで任意のスタイルを追加できます。


## 2. [Styles to Variables](https://www.figma.com/community/plugin/1253669344925342575/styles-to-variables?searchSessionId=lw22oq8z-5kpwn6hveu5)を使用して、Local stylesをLocal variablesに変換する

[Styles to Variables](https://www.figma.com/community/plugin/1253669344925342575/styles-to-variables?searchSessionId=lw22oq8z-5kpwn6hveu5)を使用して、Local stylesとして登録したカラースタイル情報をLocal variablesに変換します。

![スクリーンショット 2024-05-11 21.25.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116193/b60ca96b-f42d-264d-b9ac-893386347cbd.png)

## 3. Local variablesを継承し、必要なSemantic Colorを設定する

Local stylesをLocal variablesに変換することで、カラースタイルの継承を行うことができるようになります。
例えば、
TailwindCSSのstate-900を基本のカラーとして使用したい場合には、Semanthicデザインを基本とすると、

:::note info
**Primary ← state-900**
:::
のように、単純なカラーコードを設定する形ではなく、tailwindCSSのスタイルとして割り当てることができます。

つまりvariablesとして変換したスタイル情報を以下のように使用できるということです。

![スクリーンショット 2024-05-11 21.29.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116193/3f26a275-c9bd-1b5b-c336-711ed517f101.png)

## 4. 作成したスタイルを元に、デザインシステムを作成する
必要なスタイル情報が出揃ったところで、実際のデザインシステムを構築していきます。
以下のスタイルがこれまでの手順で作成されており、これらは全てtailwindCSSのスタイルに準拠していることになります。
* Local StylesのText Styles(フォント設定)
* Local stylesのEffect Styles(シャドウ設定)
* Local variablesのSemantic Color および Text Color(設定)

これらを使用してデザインすることで、コードを記述する場合により効率よく実装ができると思います。

## まとめ

個人開発でアプリケーションを作成する中で、
**デザインと実装の壁を無くす** 
という軸で今回の方法を考えてみました。

実務に置き換えて考えても、デザイナーの作成したデザインを元に実装する力というのも、求められる能力かと思います。

**開発者からも主体的にデザイン手法に関する提案を行う** ことはチームとしてのパフォーマンスを最大化するためにも積極的に行なっていきたい次第です。


## 最後に

tailwindCSSのスタイルデータを取り込んで、デザインシステムとして落とし込む方法を検討してみました。
**もっといい方法知ってるよ！** 
という方いらしたらぜひコメントいただきたいです。

ご拝読ありがとうございました！