![見出し画像](https://assets.st-note.com/production/uploads/images/129974559/rectangle_large_type_2_c7384aae8f8a38ad1cf3a9f85a1a6959.jpeg?width=1200)
【初心者向け】Figmaでアプリのデザインをしてみたい!
こんにちは、アメリカ・シリコンバレー在住のSeikaです。
今回は初めてFigmaを使ってみる方向けに、
モバイルアプリを一緒にデザインしていこうと思います。
実際にFigmaを使いながら読んでみてくださいね。
それではやっていきましょう!
(2024年2月4日公開)
完成図
こちらの画面を作っていきます。
![](https://assets.st-note.com/img/1707182449128-9bh7yxnGE6.jpg)
実際のファイルが見たい方はこちら👇より複製して使ってみてください。
手順📝
1、フレームを作る(ショートカット→F)
![](https://assets.st-note.com/img/1707175039700-omSDUm3r3D.png?width=1200)
(※写真をクリックすると拡大されます)
2、フレームを選ぶ
今回は最新のiPhone 14&15 Pro Maxにします。
![](https://assets.st-note.com/img/1707175170834-7ciPhHvqjH.png?width=1200)
![](https://assets.st-note.com/img/1707175288236-SQh3pc4b6c.png?width=1200)
3、長方形を置く(ショートカット→R)
![](https://assets.st-note.com/img/1707175646082-esMbmK1Yfj.png?width=1200)
![](https://assets.st-note.com/img/1707175723707-gminkmZmGK.png?width=1200)
4、長方形を染める
右のパネルよりFillの真下にある正方形をクリック。
カラーパネルが出てくるので、カラーを選択。
今回は青(345BE5)にしました。
最終的に画像を置くので、何色でもOKです。
![](https://assets.st-note.com/img/1707175839211-k1mhG0NVti.png?width=1200)
5、二つ目の長方形を置く(ショートカット→R)
![](https://assets.st-note.com/img/1707175971673-pzt8DI9htE.png?width=1200)
6、二つ目の長方形を染める。
今回は薄いグレー(F6F5F5)にしました。
![](https://assets.st-note.com/img/1707176148174-c1eh3xG2Mk.png?width=1200)
7、二つ目の長方形の上の角二つを丸くする
右のパネルのCorner radiusをクリックし、パネルが出たら数字を入力。
今回は34にします。
![](https://assets.st-note.com/img/1707176305612-2xa7bo64b0.png?width=1200)
8、円を加える(ショートカット→O)
shiftを押しながら円を作成する。
円の大きさに関しては、右のパネルでサイズを指定することもできます。(今回は104x104)
また、キーボードのOptionキーを押すと赤い数字が現れ、正確に配置することができます。
![](https://assets.st-note.com/img/1707176636704-gYnNFXi7J9.png?width=1200)
9、webでアイコンを検索
今回は、Free Icon Pack 1700+ iconsを使わせてもらいます。
![](https://assets.st-note.com/img/1707177503641-iUXBCQqDPE.png?width=1200)
今回はDeliveryアイコンを使用したいので探し、コピー(⌘C)します。
![](https://assets.st-note.com/img/1707177684175-P5xOdL7al9.png?width=1200)
10、アイコンを貼り付ける(⌘V)
![](https://assets.st-note.com/img/1707177752073-JvntBh4FDr.png?width=1200)
11、アイコンの大きさを調整
Shiftを押しながらドラッグしたり、
右のパネルで数字を入力しサイズを整えます。
![](https://assets.st-note.com/img/1707177841270-YRSA0afCHH.png?width=1200)
12、アイコンを円の中央に配置
左のパネルでアイコンと円を選択する。(選択すると青になります。)
![](https://assets.st-note.com/img/1707178100428-XTJ4ipmTuF.png?width=1200)
13、右のパネルで、Align horizontal center(⌥H)をクリック
次にAlign Vertical center(⌥V)もクリック。
![](https://assets.st-note.com/img/1707178544357-vdSOnyM51C.jpg?width=1200)
14、画像を準備する
今回はChatGPTのDall-Eで生成しました。
プロンプトは、
Studio shot of the monstera plant leaf
です。
![](https://assets.st-note.com/img/1707178958156-riLZPLkK1F.png?width=1200)
画像ができたらダウンロード。
画像を検索する場合は、O-danがおすすめです。
15、青い長方形を選択し、別のウィンドウで開いている画像ファイルをドラッグ
![](https://assets.st-note.com/img/1707179306521-ZHVjkpsLrs.png?width=1200)
![](https://assets.st-note.com/img/1707179364506-8nfpxuPtV2.png?width=1200)
16、文字を入力(ショートカット→T)
contactless deliveryと入力。
17、文字の大きさ、太さを調整
今回は、Bold、32です。
![](https://assets.st-note.com/img/1707179921506-lJxMHuHdOn.jpg?width=1200)
Bold、32に設定。
18、さらに文章を追加
When placing an order, save the option 'contactless delivery' and the courier will leave your order at the door.
設定は、Regular、16。
また中央揃えのボタンをクリック。
![](https://assets.st-note.com/img/1707180378837-Iq8EuCLY6y.jpg?width=1200)
19、長方形を作る。(ショートカット→R)
![](https://assets.st-note.com/img/1707180511989-GJlVr3sWkF.png?width=1200)
20、長方形の角を丸め、色をつける
長方形の角を8にし、色は51AE11。
![](https://assets.st-note.com/img/1707180684982-sCBH9iLZ6c.png?width=1200)
21、長方形の上に文字を入力
Orderという文字を入力(ショートカット→T)。
右のパネルで色と文字をのサイズを変えます。
色は白(FFFFFF)、文字のサイズは24。
その後、左のパネルで長方形と文字を選択。(青色になっています)
右のパネルで、Align horizontal center(⌥H)をクリックした後、
次にAlign Vertical center(⌥V)もクリック。
これでOrderボタン完成です。
![](https://assets.st-note.com/img/1707180808537-GE9ZR2Kvfl.png?width=1200)
22、Orderボタンを複製
Orderという文字と長方形を選択したまま、
ShiftキーとOptionキーを長押し。
マウスを下に移動すると、同じボタンが複製されます。
![](https://assets.st-note.com/img/1707181146887-oFS58qlRb3.png?width=1200)
23、二つ目のボタンを完成させるためにまずは文字(Order)をクリック
24、右のパネルのFillが白になっているので、白い正方形をクリック(FFFFFFの左側にある正方形です)
25、カラーパネルが出てくるので、スポイトのアイコンを探しクリック
![](https://assets.st-note.com/img/1707181335806-DZIBjRqGES.png?width=1200)
26、スポイトの先を緑色に当て、クリック
白いOrderという文字が緑色になりました。
![](https://assets.st-note.com/img/1707181644444-7Ls2DXdpa3.png?width=1200)
27、長方形(2つ目のボタン)を選択
28、長方形(2つ目のボタン)を染める
右のパネルのFIllを
51AE11
から
FFFFFF
にする。
![](https://assets.st-note.com/img/1707181716960-d7d8wWTI0B.png?width=1200)
29、2つ目のボタンの文字をDismissにする
![](https://assets.st-note.com/img/1707181805518-Cas0pqfx3T.png?width=1200)
完成です⭐️
![](https://assets.st-note.com/img/1707181886319-jq73MKFE4R.png?width=1200)
今回は、初めてFigmを使ってみる方向けに、アプリをデザインしていきました。
もし記事が役に立ったと思ったら、ぜひスキボタンを押してくださいね。
それでは、次回の記事でお会いしましょう!
Follow me here😊
この記事が参加している募集
よろしければサポートお願いいたします。いただいたサポートはクリエイターとしての活動費に使わせていただきます。