商品情報にスキップ
Figma Design パック
Figma Design - パック
¥14,850
税込。
Figma Design パック
‘Figma Design 基本編’ と ‘Figma Design マスター編’、2つの講座にアクセス可能なセット販売商品です。
-----
Figma Design 基本編
新UI「UI3」、Config 2025アップデート対応版
これからFigmaを使ってみたい初学者の皆さんや他のツールからの乗り換えを検討中の方、数年ぶりにFigmaに戻ってきた方へ。基本編は、Figmaの無償プランでも学んでいただけるよう、これだけは覚えておきたいという必要最低限の機能の解説に特化している。マスター編に取り組む前にも
動画本数: 71本
（2025年7月10日現在。実践コンテンツを今後追加予定）
01. Figma Design
- 本講座とFigma Designの全体像（2:32）
- チーム、プロジェクトとファイル（3:21）
- ダッシュボードの構成（4:08）
- 新規デザインファイルとワークスペース（3:28）
- ツールバー（1:57）
- 左サイドバー（3:15）
- 右サイドバー（2:02）
- ショートカット（1:43）
- インポート／エクスポート（5:13）
- Config 2025での機能追加（2:50）
02. ページとレイヤー
- ページとレイヤー（3:40）
- レイヤーの重なり順と階層構造（3:02）
- コンテナレイヤーとは（1:47）
- グループ（1:16）
- フレーム（2:50）
- グループ化とフレーム化の違い（2:38）
- レイヤーのプロパティ（1:58）
- マスクの作成（2:00）
- 定形サイズのフレームの作成（1:25）
- まとめ（1:55）
03. オブジェクトの編集と操作
- オブジェクトの描画（3:13）
- オブジェクトの編集（4:42）
- オブジェクトの複製（2:36）
- オブジェクトの整列（2:08）
- スマートセレクション（2:33）
- オブジェクトの距離の表示（1:52）
- 制約（3:38）
- オートレイアウト（5:49）
- 新機能 Figma Draw（3:34）
- まとめ（1:28）
04. テキストとカラー、スタイル指定
- テキストの編集（4:04）
- ローカルフォントの追加（2:07）
- テキストの装飾、アウトライン化（4:47）
- テキストスタイルの指定（5:19）
- スタイルの階層化（2:59）
- カラーの編集（4:22）
- カラースタイルの指定（4:22）
- スタイルの移動と共有（2:41）
- スタイルとバリアブルの違い（2:31）
- まとめ（2:00）
05. コンポーネント基礎
- コンポーネントとは（5:18）
- マスターコンポーネントとインスタンスの関係（4:31）
- サイズが可変するボタンの作成（4:27）
- ボタンの新規コンポーネント化（4:03）
- コンポーネントプロパティの追加（3:35）
- アセットパネルからの挿入（1:33）
- 複数のオブジェクトをコンポーネント化する（3:10）
- アイコン付きのボタンの作成（3:33）
- インスタンスの入れ替え（2:44）
- まとめ（1:37）
06. プロトタイプ基礎
- プロトタイピングでできること（2:17）
- プロトタイプの設定（1:27）
- 開始点とフロー（1:44）
- コネクションを追加する（2:05）
- インタラクションの設定と編集（1:49）
- トリガー（1:29）
- アクション（1:48）
- アニメーション（3:13）
- プレビューとプロトタイプの共有（2:30）
- まとめ（1:49）
07. コミュニティの活用
- コミュニティとは（1:18）
- Figmaのプラグインを見つけてみよう（1:58）
- アバター画像を生成する（2:35）
- 著作権フリーの写真を利用する（2:03）
- 地図の画像を生成する（1:54）
- アイコン画像を追加する（2:28）
- オブジェクト間を矢印で繋ぐ（2:20）
- 色のコントラストをチェックする（2:25）
- その他のデザインリソースを活用する（2:02）
- まとめ（1:25）
08. 作ってみよう
- 制約を使ったサイズが可変するヘッダー（5:28）
---
Figma Design マスター編
新UI「UI3」、Config 2025アップデート対応版
もう少しFigmaを効率よく使ってみたい方、この数年で追加された機能をまとめて採り入れたい方に。マスター編は、既にFigmaを利用中の方も多いと考え基本的な操作の解説を省き、覚えておきたい機能を細分化して短めの動画に分け、実務に使えるであろう機能の解説に絞っております。このマスター編まで理解すれば、「わたし、Figma使えます！」と胸を張って言えるような構成にしました。
※Config 2025で公開された新機能「Grid」もβ版の段階ですが、現在解説できる範囲で取りあげております
動画本数: 81本
（2025年7月30日現在。実践コンテンツを今後追加予定）
01. オートレイアウト基礎
- フレーム、制約、オートレイアウト（6:54）
- オートレイアウトの基本（5:42）
- 配置位置のコントロール（3:41）
- オブジェクトの間隔と上下左右の余白（3:57）
- 内包するオブジェクトを親のコンテナサイズで調整（3:03）
- 内包するオブジェクトで親のコンテナを自動調整（4:26）
- 最小値と最大値の設定（2:38）
- オートレイアウトの設定（2:56）
- 通常のフレームとオートレイアウトの違い（3:52）
- まとめ（2:38）
02. オートレイアウト詳解
- フレームをネストする（4:52）
- オートレイアウトをフレーム別に制御する（3:50）
- 複数のオートレイアウトを組み合わせた例（6:29）
- オートレイアウトからの除外（2:51）
- オートレイアウトの提案（3:25）
- グリッドフロー 〜β版（3:37）
- グリッドセルの設定とコントロール（3:32）
- セル内のアイテムの表示コントロール（3:42）
- グリッドをネストする（2:42）
- まとめ（2:49）
03. コンポーネント詳解
- コンポーネントを使いやすくする（7:39）
- コンポーネントプロパティとは（4:10）
- ブーリアン型（5:58）
- テキスト型（3:36）
- インスタンススワップ型（3:45）
- コンポーネントのバリアントとは（4:42）
- 複数コンポーネントをバリアント化する（4:15）
- 既存コンポーネントにバリアントを追加（3:07）
- 既存オブジェクトからセットを作る（4:15）
- まとめ（3:14）
04. バリアブル基礎
- バリアブルとは（2:13）
- バリアブルとスタイルの違い（5:25）
- バリアブルの種類（1:22）
- 新規バリアブルの作成（2:22）
- バリアブル値のオプション（3:01）
- バリアブルの値を適用する（4:16）
- コレクション（1:55）
- グループ（3:37）
- モード（2:24）
- まとめ（1:17）
05. バリアブル詳解
- 色のバリアブルを設定し適用する（5:51）
- 文字列のバリアブルを設定し適用する（6:00）
- 数値のバリアブルを設定し適用する（5:37）
- スタイル指定にバリアブルを適用する（4:55）
- ライトモードとダークモードを作る（4:10）
- 多言語のテキストコンテンツを作る（4:59）
- 複数のコレクションで値を共有する（3:03）
- プリミティブな値とエイリアス（4:07）
- デザイントークンの作成（7:12）
- まとめ（2:07）
06. プロトタイプ詳解
- プロトタイプを作り込むには（1:27）
- 画面上に重なるメニューを表示する（3:55）
- バリアントを入れ替えるアクション（5:15）
- プロトタイプにスクロールを設定する（5:55）
- スマートアニメート（2:57）
- プロトタイプにバリアブルを設定する（4:41）
- ボタンで数値を操作するプロトタイプ（3:13）
- 条件式を使ったインタラクションの作成（5:25）
- スイッチでモードを切り替える（5:05）
- まとめ（2:04）
07. ライブラリとファイル管理
- ファイルのバージョン管理（3:41）
- ファイルのライブラリ（3:16）
- ライブラリを公開する（1:44）
- 公開済のライブラリを利用する（4:25）
- ライブラリのアップデート（4:17）
- ファイルや任意のフレームを共有する（3:00）
- コメント機能（3:16）
- ファイルのエクスポート（3:06）
- ファイルのインポート（2:13）
- まとめ（2:03）
08. 開発者モード
- 開発者モードについて（2:31）
- 開発者モードのインターフェイス（4:11）
- Ready for devマーク（2:41）
- 変更内容の確認（2:34）
- アノテーションの追加（1:48）
- バリアブルの詳細を確認（1:21）
- バリアブルの候補を取得（1:55）
- ローカルのバリアブルコレクション（1:22）
- VS Code連携（1:23）
- まとめ（2:04）
09. 実践
- バリアントで作るドロップダウンメニュー（8:32）