For Beginners
Figmaを、
Figmaを、
開発の武器にする。
単なるツールの使い方ではありません。
エンジニアと連携し、システムとして破綻しない
「プロの設計思想」を学ぶためのハンズオン形式ガイドです。
完全未経験OK
専門用語にはすべて解説がつきます。デザインの知識ゼロから始められます。
エンジニア視点
「コーディングしやすいデザインデータ」を作るための作法が身につきます。
実践ドリル付き
読むだけじゃなく、実際に手を動かす「ミッション」で確実に習得します。
Curriculum 学習ロードマップ
Chapter 0
Figmaの概念
なぜFigmaなのか？従来ツールとの決定的な違いと「WebのOS」としての仕組み。
Start →Chapter 1
フレームの物理学
「グループ化」は禁止？箱と中身の関係性と、レスポンシブの基礎理論。
Start →Chapter 2
オートレイアウト
CSS Flexboxの視覚化。
魔法の自動整列機能を極める。
Chapter 3
コンポーネント設計
修正に強いデータを作るための「クラスとインスタンス」の設計論。
Start →Chapter 4
変数とシステム
色コード直書きからの脱却。Design TokensとVariablesの活用。
Start →Chapter 5
動的ロジック
If文と変数を使った、本物そっくりのプロトタイプ作成。
Start →Chapter 6
実装ハンドオフ
エンジニアへのラブレター。Dev Modeの正しい歩き方。
Start →FINAL
最終試験
崩れたレイアウトを修正せよ。
免許皆伝のためのトラブルシューティング。