LEVEL 1

指慣らしの基礎練習

マウスは「位置決め」だけ。作成は「左手」でやる癖をつけよう。

MISSION 01

正方形を描く

GOAL IMAGE
Step 1 : フレームを置く
まず画用紙を置きます。キーボードの F を押して、画面をクリック。
「Desktop」や「Phone」など好きなサイズを選んでください。
Step 2 : 四角形ツールを持つ
キーボードの R (Rectangle) を押します。
カーソルが+マークになったら準備OK。
Step 3 : 正方形にするコツ
Shift押しながらドラッグして描画します。
Shiftを押している間は、縦横比が固定されて綺麗な正方形になります。
Step 4 : 色を変える
右パネルの「塗り(Fill)」をクリックして、好きな色に変えましょう。
MISSION 02

真ん丸を描く

GOAL IMAGE
Step 1 : 円形ツール
キーボードの O (Oval) を押します。
Rの隣にあるので覚えやすいですね。
Step 2 : 真ん丸にする
今回も Shift を押しながらドラッグ!
Shiftを押さないと楕円(ラグビーボール型)になります。
LEVEL 2

オートレイアウト特訓

ここがFigmaの沼。一度ハマれば抜け出せない便利さ。

MISSION 03

魔法のボタン

GOAL IMAGE
送信する
文字数が増えても枠がついてくる!
Step 1 : まず文字だけ書く
T を押して、「送信する」と文字だけ書いてください。
この時点では四角形(背景)は作りません。
Step 2 : 魔法をかける
文字を選んだ状態で Shift + A
見た目は変わりませんが、レイヤーパネルでアイコンが変わったはずです。
Step 3 : 色と余白をつける
右パネルで以下を設定します。
1. 塗り(Fill): 青色などを追加
2. 横方向のパディング: 32px
3. 縦方向のパディング: 16px
4. 角丸(Radius): 8px
Step 4 : 文字を打ち替えてみる
中の文字を「メッセージを送信する」に書き換えてみてください。
勝手に背景が伸びれば成功です!
LEVEL 3

コンポーネントと構成

作って終わりじゃない。使い回せるデータを作ろう。

MISSION 04

記事カードを作る

GOAL IMAGE
Step 1 : 素材を用意する
以下の3つを縦にバラバラに置いてください。
1. 長方形(画像のつもり)
2. 太いテキスト(タイトル)
3. 小さいテキスト(説明文)
Step 2 : まとめてオートレイアウト
3つ全部を選択して Shift + A
これで3つが「ひとまとまりのカード」になります。
右パネルで「間隔(Gap)」を調整して、いい感じの隙間にしましょう。
Step 3 : 親(Component)にする
カードを選択したまま、画面上部の「❖(ひし形4つ)」のアイコンをクリック。
または Ctrl + Alt + K
これで「親」になりました。
Step 4 : 子(Instance)を増やす
作った「親」を Alt を押しながらドラッグして複製します。
複製した「子」の方の中身(画像や文字)を変えてみましょう。
「親」のデザインを変えると、「子」も一斉に変わるのを確認してください。
💡 応用テクニック オートレイアウトの方向を「↓」にすると縦並び、「→」にすると横並びになります。
写真と文字を横に並べたい時は、方向を変えてみましょう。