Figma

4
  • デザインシステム

FigmaのデザイントークンからCSSファイルを自動生成し、Storybook化する手順

この記事では、Figmaで定義したデザイントークンをCSSファイルに自動生成し、その結果をStorybookで視覚的に表示する手順を解説する。前提この記事は、前回記事「FigmaのデザイントークンからCSSファイルを自動生成する手順①【ローカル開発環境】」が完了していることを前提に

  • デザインシステム

FigmaのデザイントークンからCSSファイルを自動生成する手順①【ローカル開発環境】

この記事では、Figmaのデザイントークンを活用して、CSSファイルを自動生成する方法を紹介する。FigmaからJSON形式でトークンを出力し、Style Dictionaryを使って各プラットフォームで利用できるCSSやSCSSファイルを生成する手順をステップバイステップで解説する。全体