エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
Figma Variablesで指定したトークンをTailwindCSSのユーティリティクラスとして使用する - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
Figma Variablesで指定したトークンをTailwindCSSのユーティリティクラスとして使用する - Qiita
この記事はAteam Finergy Inc. × Ateam Wellness Inc. Advent Calendar 2023の7日目の投稿です。 本日は... この記事はAteam Finergy Inc. × Ateam Wellness Inc. Advent Calendar 2023の7日目の投稿です。 本日は@themeaningof8がお送りします。 エイチームフィナジーではCSSライブラリとしてTailwindCSSを主に運用しています。 TailwindCSS自体が制約ベースなので実装上の一貫性の担保はしやすいのですが、Figmaでのプロトタイプ作成時に幅や余白が手作業での管理となっていたので、今回Figma Variablesを定義するJSONファイルからTailwindCSSの設定ファイルを生成するスクリプトを作成しました。 やったこと tokens.jsonをSingle Source Of Truth(信頼できる唯一の情報源)として管理し、Figma、TailwindCSSで使用できるようにしました。 手順 tokens.