GitHub ActionsでStorybookを自動ビルドし、GitHub Pagesへデプロイする手順
今回の記事は、前回の記事「FigmaのデザイントークンからCSSファイルを自動生成し、Storybook化する手順」の続きの記事になる。前回は、ローカル開発環境でデザイントークンをStorybook化したが、今回はGitHub Pagesへデプロイし、URLアクセスでStorybookを閲覧できる
デザインシステム
記事数
4
FigmaのデザイントークンからCSSファイルを自動生成し、Storybook化する手順
この記事では、Figmaで定義したデザイントークンをCSSファイルに自動生成し、その結果をStorybookで視覚的に表示する手順を解説する。前提この記事は、前回記事「FigmaのデザイントークンからCSSファイルを自動生成する手順①【ローカル開発環境】」が完了していることを前提に
FigmaのデザイントークンからCSSファイルを自動生成する手順②【GitHub Actions】
今回は、GitHub Actionsを使って、FigmaのデザイントークンからStyle Dictionaryを用いて自動的にCSSとSCSSを生成し、ビルド結果をアーティファクトとして保存する手順を紹介する。1. 前提条件本記事では、Figmaからエクスポートされたデザイントーク
FigmaのデザイントークンからCSSファイルを自動生成する手順①【ローカル開発環境】
この記事では、Figmaのデザイントークンを活用して、CSSファイルを自動生成する方法を紹介する。FigmaからJSON形式でトークンを出力し、Style Dictionaryを使って各プラットフォームで利用できるCSSやSCSSファイルを生成する手順をステップバイステップで解説する。全体
