ことのはじまり
現在、Next.jsで個人開発を行なっているのですが、いくつかの基準（目標）を設定しています。
- サービスとしてリリースし、運用することを前提とする
- Next.js(Vercel)のエコシステムをキャッチアップし使ってみる。0→1開発のスピードとクオリティの最大値を探す
- 今後複数人での開発を見込んだ技術選定を行う（YAGNIの原則を無視しているかもしれません）
このような条件で個人開発を行なっている中で、
デザインはどう組み合わせるのが最適なんだろう？
という疑問が生じました。
Next.jsは現在は大規模なサービスでも数多くの採用実績がありますが、やはり0→1のプロジェクトにおけるエコシステムの導入ハードルの低さ には大きな魅力があると思います。（？）
デザイン面でもそのエコシステムの恩恵を享受したいと思い、以下の方法を始めの一歩として試してみました。
何をしたのか
今回Figmaでデザインを作成している中で、TailwindCSSのスタイルをベースとして実装することで、shadcn/uiなどの生成AIツールとも互換性の高いデザインを作成できると考えました。
そのために今回はfigmaでこちらにチャレンジしてみました。
tailwindCSSのデフォルトスタイルをLocal Variablesとして設定する!
これにより、作成するデザイン全てを、tailwindCSSのスタイルに準拠する形でデザインできる用になるはずです。
figmaの有料プランであれば、tailwindCSSのCommunity Libraryを利用することで簡単にtailwindCSSのスタイルを利用できます。
とはいえ、個人開発をしている方の中には私のように
「開発用ツールに課金しすぎて、デザインツールに課金できないよ。（泣）」
というかたも一定数いると思いますので、無料で始めてみる ということが今回のスコープとなります。
手順
手順は至って簡単です。
- PluginのTailwind CSS Style Generator を使用して、local stylesを作成する
- PluginのStyles to Variables を使用して、Local stylesをLocal variablesに変換する
- Local variablesを継承し、必要なSemantic Colorを設定する
- 作成したスタイルを元に、デザインシステムを作成する
早速やってみましょう。
1. PluginのTailwind CSS Style Generator を使用して、local stylesを作成する
プラグインをインストールして、Generateを行うことで、Figmaのページ右側デザインタブのLocal StylesにTailwindCSSのスタイルに準拠したスタイルが追加されます。
- Text
- Color
- Effect
の3カテゴリーのスタイルがimportされます。
GENERATEすることで画面右にスタイルが追加できました。
カスタムでtailwindCSSのスタイルデータをimportしたい場合は、別途プラグインを使用することで任意のスタイルを追加できます。
2. Styles to Variablesを使用して、Local stylesをLocal variablesに変換する
Styles to Variablesを使用して、Local stylesとして登録したカラースタイル情報をLocal variablesに変換します。
3. Local variablesを継承し、必要なSemantic Colorを設定する
Local stylesをLocal variablesに変換することで、カラースタイルの継承を行うことができるようになります。
例えば、
TailwindCSSのstate-900を基本のカラーとして使用したい場合には、Semanthicデザインを基本とすると、
Primary ← state-900
のように、単純なカラーコードを設定する形ではなく、tailwindCSSのスタイルとして割り当てることができます。
つまりvariablesとして変換したスタイル情報を以下のように使用できるということです。
4. 作成したスタイルを元に、デザインシステムを作成する
必要なスタイル情報が出揃ったところで、実際のデザインシステムを構築していきます。
以下のスタイルがこれまでの手順で作成されており、これらは全てtailwindCSSのスタイルに準拠していることになります。
- Local StylesのText Styles(フォント設定)
- Local stylesのEffect Styles(シャドウ設定)
- Local variablesのSemantic Color および Text Color(設定)
これらを使用してデザインすることで、コードを記述する場合により効率よく実装ができると思います。
まとめ
個人開発でアプリケーションを作成する中で、
デザインと実装の壁を無くす
という軸で今回の方法を考えてみました。
実務に置き換えて考えても、デザイナーの作成したデザインを元に実装する力というのも、求められる能力かと思います。
開発者からも主体的にデザイン手法に関する提案を行う ことはチームとしてのパフォーマンスを最大化するためにも積極的に行なっていきたい次第です。
最後に
tailwindCSSのスタイルデータを取り込んで、デザインシステムとして落とし込む方法を検討してみました。
もっといい方法知ってるよ！
という方いらしたらぜひコメントいただきたいです。
ご拝読ありがとうございました！