OVERVIEW
Figmaは、Webサイトやアプリの画面を作るインターフェースのデザインツールです。キャンバスに図形やテキスト、画像を配置し、色や余白を調整して、画面の見た目を作れます。
複数人で同じデザインファイルを同時に編集できる「共同編集」も特徴です。デザイン上にコメントを残せるので、チームで修正箇所を相談しながら作業できます。
オートレイアウトを使うと、ボタンの文字数やカードの枚数に合わせて配置を自動で調整できます。繰り返し使う部品はコンポーネントにすると、元のデザインの変更をまとめて反映できます。
プロトタイプでは、画面同士をつないでクリックしたときの動きを設定できます。コードを書く前に、ページを行き来する操作を試せます。
図形やテキストを組み合わせ、アイコンや画面を描けます。フレームを使うと、画面ごとに部品をまとめて管理できます。
ボタンなどをコンポーネントにして使い回せます。文字やアイコン、状態の違いはプロパティで切り替えられます。
商品から詳細ページへ移動するなど、画面遷移を設定できます。プロトタイプを再生して、クリックしたときの動きを確認できます。
ROADMAP
長方形や円、ペンツール、テキストの描画を学びます。色や境界線の設定、整列、図形の演算を試し、ユーザー・ホーム・カレンダーのアイコンを作ります。
フレームやグループで図形をまとめ、オートレイアウトで配置や余白を調整します。要素の追加やサイズの変更に対応する仕組みを学び、動画アプリ風の画面を作ります。
ボタンをコンポーネントにして、インスタンスへの変更の反映やオーバーライドを学びます。文字、アイコンの表示・非表示や入れ替え、状態の違いをプロパティで切り替えます。
カフェサイトのデザインを制作します。レイアウトガイドを使って部品を配置し、プラグインで画像や地図を挿入します。書体や色をスタイルで管理し、商品詳細ページへの画面遷移を設定します。
ENVIRONMENT
Figmaのアカウントを作り、デスクトップアプリをインストールしてください。レッスンではアプリを使って操作します。準備の手順は基本操作編の最初の動画の補足情報で案内しています。Figmaには無料のスタータープランがありますが、使える機能やファイル数などに制限があります。最新の条件はFigma公式の料金ページで確認できます。
4講座はプレミアム限定です。各講座の最初の数レッスンはユーザー登録すれば無料で視聴できます。
FAQ
特別な経験は必要ありません。長方形を描くところから始め、位置や大きさ、色の変え方を学びます。Figma上でデザインを作るので、HTMLやCSSを書く知識も必要ありません。
基本操作編、レイアウト編、コンポーネント編、実践編の順に学んでください。前の講座で作った図形や学んだ操作を使いながら、新しい機能を試していきます。
基本操作編ではユーザー・ホーム・カレンダーのアイコン、レイアウト編では動画アプリ風の画面、コンポーネント編では文字や状態を切り替えられるボタンを作ります。実践編ではカフェサイトと商品詳細ページをデザインし、ページ間の移動を設定します。
このロードマップで作るのは、サイトのデザインと画面遷移を試すプロトタイプです。HTML/CSSによる実装やWebサイトの公開手順は扱いません。
Figmaはブラウザでも使えますが、レッスンではデスクトップアプリを使います。同じ手順で操作できるよう、アカウントを作ってアプリをインストールしておいてください。
このロードマップの4講座はプレミアム限定です。ただし各講座の最初の数レッスンは、無料のユーザー登録をすれば視聴できます。続きを学ぶ場合はドットインストールのプレミアムプランにご登録ください。Figmaの利用プランとは別のものです。
LEARN NOW
3分動画でマスターできるプログラミング学習サービスです。あなたもプログラミングを始めてみませんか？
Copyright © 2011-2026 dotinstall.com. All Rights Reserved.
