Figmaチュートリアル｜ワークショップでプロトタイプを作るための操作に特化【基礎編まで約25分】

デザインワークショップで「アイディアをプロトタイプにする」ために必要なFigmaの操作だけに特化したチュートリアルです。 ファイルの受け取りかたから、画面づくり、プロトタイプ、コンポーネント、スマホでの実機確認、地図のスクロールまで。Figmaがはじめての人向けに、実際の操作画面で説明しています。 ✴️ Figmaに興味持った人はカイクンさんのチャンネルを是非チェック！ 初心者Figma講座（新） - YouTube    • 超初心者Figma講座（新）   ▼ この動画の使いかた ・最初から通しで見なくても大丈夫。下の目次から必要な章に飛べます ・「⏸ 動画を止めて、やってみよう」が出たら、一時停止して実際に手を動かしてみてください ・あとから「あの操作どこだっけ？」となったら、機能別の目次からどうぞ ▼ チュートリアルFigmaファイル（閲覧専用） https://www.figma.com/design/AOqpOeGt... ※編集して使うときは、動画の共有編のとおり「ドラフトに複製」してからお使いください（編集依頼は押さないでください） 📖 目次 00:00 【共有編】はじめに 00:10 ファイルの配布とドラフト複製 01:36 メンバーの招待 02:29 招待された人の確認と分担 03:56 【基礎編】完成形デモ 04:45 Figmaの画面の見方 06:35 ボタンを作る 07:23 テキストを入れる 08:20 グループ化と複製 09:23 画像とフレームの落とし穴 10:43 画面に色を塗る 11:15 ボタンを配る 11:37 画面をつなぐ（プロトタイプ） 13:10 フローと開始点・共有リンク 14:22 キーボードを出す 15:46 サンプルとアイコン集 16:54 画像の編集 17:57 スクロールする長い画面 18:36 モーダル 20:41 ヘッダー・フッターの固定 23:01 メニュー 23:59 基礎編まとめ 25:05 【応用編】コンポーネントを作る 25:46 オーバーライドとリセット 26:28 ヘッダーを一元管理 27:22 画面ごとに挙動を変える 28:00 用語と使い所 29:05 【応用編】ミラーリングを始める 30:01 実機で確かめる 31:10 【応用編】地図とピンを用意する 32:15 フレームに入れてスクロール 34:40 ピンからモーダルを開く 🔍 機能別の目次（操作から探す） 00:41 ドラフトに複製 01:36 メンバーを招待(編集可) 06:47 長方形・角丸 07:23 テキスト 08:38 グループ化 ⌘G 09:02 複製 ⌥+ドラッグ 10:10 プレビュー Shift+Space 10:43 画面(フレーム)の塗り 11:46 プロトタイプ接続 13:32 フローの開始点 14:06 プロトタイプの共有リンク 14:38 オーバーレイ(キーボード) 16:01 サンプルパーツの使い回し 16:41 アイコン検索 16:54 トリミング 17:19 マスク 17:41 回転・角丸(画像) 18:09 スクロールする長い画面 18:49 モーダル 20:52 複数フレームに一括ペースト 21:44 ヘッダー・フッター固定 22:29 制約(上・下) 23:01 メニュー 25:05 コンポーネント作成 26:14 インスタンスのリセット 29:28 スマホでミラーリング開始 29:44 ミラーリング解除(2本指長押し) 33:35 地図のスクロール設定(オーバーフロー) 34:19 コンテンツを隠す 34:52 ピンからモーダル 音声: VOICEVOX:四国めたん #Figma #デザイン #チュートリアル #プロトタイプ