-
- 1. Figmaとは～概要・無料で始める方法～
- 2. Figmaのファイルブラウザ画面、デザイン画面の構成を把握する
- 3. ここからのレッスン・使用素材について
- 4. 使用頻度高！最初に把握したいFigmaの3ツールと基本操作
- 5. Figmaでの文字入れ方法とテキスト設定
- 6. Figmaでデザインに画像を挿入・トリミングする方法
- 7. Figmaのコンポーネントとインスタンスを理解する
- 8. Figmaのコンポーネント“バリアント”機能を知る
- 9. Figma“オートレイアウト機能”の使い方・活用方法を知る
- 10. “オートレイアウト”の組み合わせで柔軟なデザインを作る
- 11. FigmaでWebページデザインを制作する（前半）
- 12. Figmaのスタイル機能・バリアブル機能を活用する
- 13. FigmaでWebページデザインを制作する（後半）
- 14. Figmaのエクスポート機能、画像の書き出しをしてみよう
- 15. Figmaプロトタイプ機能の基本・必要性を知る
- 16. Figmaのインタラクション設定についてもっと知る
ここからのレッスン・使用素材について
制作物について
ここから先のレッスンでは、Figmaを使ってデザイン制作を行う上で基本となる機能を紹介しています。
それぞれのツールや機能を学びながら、最終的には以下のようなデザインを作成します。
【解説で使うデザイン】
解説で使用する画像素材について
Unsplashで提供されている以下の素材を使用させていただいています。
お手持ちの画像を使いたい方は、以下の通りでなくても構いません。
配布元：昼間の青空の下でのキリンの写真 size：L もしくは オリジナル |
配布元：木の上の灰色のぶちの子猫 size：S もしくは 中間 |
size：S |
size：S もしくは 中間 |
size：S もしくは 中間 |
配布元：芝生の上を歩くアライグマの写真 size：S もしくは 中間 |
size：中間 |
解説と同じ画像を使われる場合は、毎回こちらのページからリンクを辿ってDLすると手間がかかります。
まとめてDLして「Figma入門講座」などのフォルダにまとめておくのがおすすめです。
無料ビデオ講座のお知らせ
Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。
