Fractal hands-on
スタイルガイドツール "Fractal" のハンズオン資料です。
Table of Contents
Fractalについて
Fractal はnodejs製のスタイルガイドツールです。
特徴
- スピーディーに作業できる
- 設定も（比較的）簡単！
- スタイルガイド内でコンポーネントを使いまわせる
- プロダクトとの依存関係を最小化できる
- すぐ導入できる・すぐ捨てれる
- UIのデザイン変更が難しい
- UIの機能拡張は基本できない。
- 配布されてるthemaプラグインをfolkすればできそう？
- デザインシステム として社外公開するには非力
使い所
- 新規プロダクトの開発初期
- 既存のプロダクトのスタイルガイド導入
- とりあえずスタイルガイドつくってみたい
デザインシステム構築に使う場合
初期 ~ 中期のスピード必要な時期にfractal導入。
並行してデザインシステムの最終的なアウトプットを計画すると良さそう。
graph LR
Fractalでスタイルガイド作成 --> デザインシステム用のUIを別途構築;
デザインシステム用のUIを別途構築 --> リリース;
Get started
fractalのコマンドを使う方法。
グローバルにfractalをインストールしても良いのですが、
使い切りで良いのでnpxコマンド使います。
npx @frctl/fractal new {{ your Project name }}cd {{ Your project name }}npx @frctl/fractal start --sync- http://localhost:3000 を開く
ディレクトリ構造
sample-project/
├── assets/
├── components/
├── docs/
├── public/
├── fractal.js
├── package-lock.json
└── package.json
- fractal.js: fractalの設定ファイル
- components/: htmlやcssなどコンポーネント管理
- docs/: ドキュメント
- public/: 公開ファイルのbuild先