【初心者向け】Figmaでアプリのデザインをしてみたい！

こんにちは、アメリカ・シリコンバレー在住のSeikaです。

今回は初めてFigmaを使ってみる方向けに、
モバイルアプリを一緒にデザインしていこうと思います。
実際にFigmaを使いながら読んでみてくださいね。

それではやっていきましょう！

(2024年2月4日公開)

---

完成図

こちらの画面を作っていきます。

画面下部から表示されるハーフモーダルと呼ばれる画面を作っていきます。

実際のファイルが見たい方はこちら👇より複製して使ってみてください。

初めてのFigma！アプリデザイン | Figma Community

---

手順📝

１、フレームを作る（ショートカット→F）

フレームをクリック
（※写真をクリックすると拡大されます）

２、フレームを選ぶ
今回は最新のiPhone 14&15 Pro Maxにします。

iPhoneやタブレットなど様々なフレームがあります

フレームが出てきました

３、長方形を置く（ショートカット→R）

Rをクリックすると長方形が出てきます。

ドラッグしてサイズをフレームに合わせます。

４、長方形を染める
右のパネルよりFillの真下にある正方形をクリック。
カラーパネルが出てくるので、カラーを選択。
今回は青（345BE5）にしました。
最終的に画像を置くので、何色でもOKです。

青を選択

５、二つ目の長方形を置く（ショートカット→R）

青色の長方形の上に新しい長方形を置きました。

６、二つ目の長方形を染める。
今回は薄いグレー（F6F5F5）にしました。

薄いグレーになりました

７、二つ目の長方形の上の角二つを丸くする
右のパネルのCorner radiusをクリックし、パネルが出たら数字を入力。
今回は34にします。

薄いグレーの長方形の角が丸くなりました

８、円を加える（ショートカット→O）
shiftを押しながら円を作成する。

円の大きさに関しては、右のパネルでサイズを指定することもできます。（今回は104x104）
また、キーボードのOptionキーを押すと赤い数字が現れ、正確に配置することができます。

円を配置しました

９、webでアイコンを検索
今回は、Free Icon Pack 1700+ iconsを使わせてもらいます。

アイコンを選択します

今回はDeliveryアイコンを使用したいので探し、コピー（⌘C）します。

アイコンをコピー

１０、アイコンを貼り付ける（⌘V）

アイコンを置きます

１１、アイコンの大きさを調整
Shiftを押しながらドラッグしたり、
右のパネルで数字を入力しサイズを整えます。

アイコンの大きさを調節

１２、アイコンを円の中央に配置
左のパネルでアイコンと円を選択する。（選択すると青になります。）

アイコンと円を選択

１３、右のパネルで、Align horizontal center（⌥H）をクリック
次にAlign Vertical center（⌥V）もクリック。

アイコンを円の真ん中に配置

１４、画像を準備する
今回はChatGPTのDall-Eで生成しました。
プロンプトは、
Studio shot of the monstera plant leaf
です。

AIで画像生成

画像ができたらダウンロード。
画像を検索する場合は、O-danがおすすめです。

O-DAN - Cross-searching for high-quality free stock photo site

１５、青い長方形を選択し、別のウィンドウで開いている画像ファイルをドラッグ

青い長方形を選択

画像が置けました

１６、文字を入力（ショートカット→T）
contactless deliveryと入力。

１７、文字の大きさ、太さを調整
今回は、Bold、32です。

contactless deliveryと入力し、
Bold、32に設定。

１８、さらに文章を追加
When placing an order, save the option 'contactless delivery' and the courier will leave your order at the door.

設定は、Regular、16。
また中央揃えのボタンをクリック。

文章を中央揃えにします。

１９、長方形を作る。（ショートカット→R）

長方形を作りました。

２０、長方形の角を丸め、色をつける
長方形の角を８にし、色は51AE11。

角が少し丸い緑色の長方形にしました。

２１、長方形の上に文字を入力
Orderという文字を入力（ショートカット→T）。
右のパネルで色と文字をのサイズを変えます。
色は白（FFFFFF）、文字のサイズは24。

その後、左のパネルで長方形と文字を選択。（青色になっています）
右のパネルで、Align horizontal center（⌥H）をクリックした後、
次にAlign Vertical center（⌥V）もクリック。
これでOrderボタン完成です。

Orderボタン完成

２２、Orderボタンを複製
Orderという文字と長方形を選択したまま、
ShiftキーとOptionキーを長押し。
マウスを下に移動すると、同じボタンが複製されます。

ボタンが複製されました。

２３、二つ目のボタンを完成させるためにまずは文字（Order）をクリック

２４、右のパネルのFillが白になっているので、白い正方形をクリック（FFFFFFの左側にある正方形です）

２５、カラーパネルが出てくるので、スポイトのアイコンを探しクリック

スポイトを利用し色を選びます。

２６、スポイトの先を緑色に当て、クリック
白いOrderという文字が緑色になりました。

白いOrderという文字が緑色になりました。

２７、長方形（２つ目のボタン）を選択

２８、長方形（２つ目のボタン）を染める
右のパネルのFIllを
51AE11
から
FFFFFF
にする。

二つ目のボタンが白になりました。

２９、２つ目のボタンの文字をDismissにする

文字をDismissにしました。

完成です⭐️

完成！

---

今回は、初めてFigmを使ってみる方向けに、アプリをデザインしていきました。
もし記事が役に立ったと思ったら、ぜひスキボタンを押してくださいね。
それでは、次回の記事でお会いしましょう！

Follow me here😊

Seika