Fractal hands-on

スタイルガイドツール "Fractal" のハンズオン資料です。

Table of Contents

• Fractalについて
  • 特徴
  • 使い所
    • デザインシステム構築に使う場合
• Get started
  • ディレクトリ構造
• Lessons

Fractalについて

Fractal はnodejs製のスタイルガイドツールです。

🔗 https://fractal.build/

特徴

🌞 Pros

• スピーディーに作業できる
• 設定も（比較的）簡単！
• スタイルガイド内でコンポーネントを使いまわせる
• プロダクトとの依存関係を最小化できる
• すぐ導入できる・すぐ捨てれる

☁ Cons

• UIのデザイン変更が難しい
• UIの機能拡張は基本できない。
  • 配布されてるthemaプラグインをfolkすればできそう？
• デザインシステム として社外公開するには非力

使い所

• 新規プロダクトの開発初期
• 既存のプロダクトのスタイルガイド導入
• とりあえずスタイルガイドつくってみたい

デザインシステム構築に使う場合

初期 ~ 中期のスピード必要な時期にfractal導入。
並行してデザインシステムの最終的なアウトプットを計画すると良さそう。

graph LR
  Fractalでスタイルガイド作成 --> デザインシステム用のUIを別途構築;
  デザインシステム用のUIを別途構築 --> リリース;

Loading

Get started

fractalのコマンドを使う方法。
グローバルにfractalをインストールしても良いのですが、 使い切りで良いのでnpxコマンド使います。

1. npx @frctl/fractal new {{ your Project name }}
2. cd {{ Your project name }}
3. npx @frctl/fractal start --sync
4. 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先

Lessons

• lesson1: Fractalをさわってみる
• lesson2: Fractalの設定
• lesson3: コンポーネントの作成
• lesson4