ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2025/11/20
NEW
【週刊ドットインストール】 256timesの新クラスをもうすぐリリース予定、レッスン制作の進捗
PREMIUM
Figma入門 コンポーネント編
インターフェースのデザインツールであるFigmaにおけるコンポーネントの使い方について見ていきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
Figma入門 基本操作編
(全20回)
PREMIUM
PREMIUM
0%
Figma入門 レイアウト編
(全17回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(19)
#01 コンポーネントを使ってみよう
(01:43)
無料公開中
概要
ページの作成
フレームの設置
未完了
#02 オートレイアウトでボタンを作ろう
(02:30)
無料公開中
テキストの設置
オートレイアウトの設定
オートレイアウトの利点
未完了
#03 メインコンポーネントを変更してみよう
(02:53)
無料公開中
デザインの修正
メインコンポーネントの設定
インスタンスの作成
メインコンポーネントの変更
アイコンの見分け方
未完了
#04 もっとインスタンスを作っていこう
(02:23)
無料公開中
インスタンスから作る方法
アセットから作る方法
変更の確認
未完了
#05 インスタンスを変更してみよう
(02:42)
インスタンスの変更
変更に関する注意点
オーバーライド
変更のプッシュ
未完了
#06 インスタンスでできないことを理解しよう
(01:57)
変更に関する制限
要素の削除
要素の追加
未完了
#07 インスタンスを切り離してみよう
(02:19)
インスタンスの切り離し
要素の削除・追加
未完了
#08 コンポーネントプロパティを使ってみよう
(01:49)
オーバーライドのデメリット
コンポーネントプロパティ
プロパティの名前と値
未完了
#09 テキストにプロパティを設定してみよう
(02:32)
プロパティの追加
名前と値の設定
インスタンスの作成
プロパティの確認
未完了
#10 プロパティのメリットを理解しよう
(02:25)
コンポーネントプロパティのメリット
変更の容易さ
一括変更の容易さ
未完了
#11 表示を切り替えるプロパティを設定しよう
(02:16)
プロパティの概要
プロパティの作成
プロパティの確認
未完了
#12 アイコンの表示を切り替えてみよう
(01:25)
インスタンスの作成
プロパティの確認
表示・非表示の切り替え
未完了
#13 インスタンスを入れ替えるプロパティを設定しよう
(03:00)
設定手順の確認
アイコンの作成
メインコンポーネントへの変換
インスタンスの作成・設定
未完了
#14 アイコンの種類を入れ替えてみよう
(02:51)
プロパティの設定
インスタンスの作成
アイコンの入れ替え
未完了
#15 プロパティの種類を整理しておこう
(01:23)
テキストプロパティ
ブール値プロパティ
インスタンスの入れ替えプロパティ
バリアントプロパティ
未完了
#16 バリアントを設定してみよう
(02:16)
プロパティの追加
バリアントの追加
名前の変更
未完了
#17 ボタンのデザインを切り替えてみよう
(02:28)
ホバーのデザイン
向こうのデザイン
インスタンスの作成
プロパティの確認
未完了
#18 テキストプロパティを追加してみよう
(02:01)
テキストプロパティの追加
バリアントのマルチ編集
未完了
#19 複数のプロパティを組み合わせてみよう
(01:48)
インスタンスのs区政
プロパティの確認
バリエーションの変更
未完了
リリース情報(note)
『Figma入門 コンポーネント編』をリリースしました
詳細情報
最終更新日
2025年10月24日
バージョン情報
Figma Desktop 125.7.5