More than 1 year has passed since last update.

Figmaで簡単なモックアップを作ってみた（2023.8）

Posted at 2023-08-25

はじめに

今更ですが、自作iOSアプリのデザイン検討を行うため、Figmaを使ってみました。

Adobe XDやZeplin などいろいろデザイン、プロトタイピングツールをプロミングする側として受け取り参照したことはありますが、自分作ったことはなかったので、備忘録として。

とりあえずざっくりiOS用のモックアップを作れるように、既存のデザインパーツの使い方と画面遷移の手順を記します。

【環境】

・Mac OS 13.2.1
・Chrome（116.0.5845.96）
・Figmaはブラウザ版を使用

言語の変更

デフォルトは英語になっているので、日本語に切り替えます。
変更方法は2通りあります。

手順1.
・ログイン後のページ（以下、TOPページと呼びます）の左上にあるアカウント名＞Settingsをクリック

・表示されたポップアップのAccountタブ＞Language＞Change Languagesをクリック

手順2.
・各ページ左下の「？」アイコンをクリック＞Change Languages...をクリック

手順1.、手順2.、どちらの場合も下記ダイアログが表示されるので「日本語」を選択してsave（保存）を押す。

Macのローカルフォントを利用する

ブラウザ版Figmaは、そのままではローカルフォントを使用できないようです。
公式サイトからFigmaのフォントインストーラーをインストールする必要があります。

インストールするとログイン時の起動項目に追加されます。インストール後は、ブラウザをリロードすると、ローカルフォントが使用できるようになります。

デザインファイルの作成

TOPページの右上にある「+デザインファイル」をクリック。

新規タブで「下書き／無題」と書かれたページが開きます。これが新規のデザインファイルで自動で木に保存されます。「無題」をタップすると、ファイル名を変更できます。

フレームの作成

左上のリージョンツール（＃マークのボタン）＞フレームをクリックすると、右側のデザイン欄に使用できるフレームが表示されます。今回はスマホ＞iPhone 14 Proを選択します。

レイアウト（ボタン等の配置）

自分でパーツをデザインすることもできますが、今回はテンプレートを使います。いろんなデザインテンプレートが用意されていますが、今回は下記の3つを使用します。

JP + UI Kit iOS
iOS 15 UI Kit for Figma
Apple Design Resources – iOS 17 and iPadOS 17

これらはデザインファイルになっていて、各リンクページの上に「Figmaで開く」（Open in Figma）ボタンが用意されていて、別タブで開いて必要なパーツをコピー＆ペーストで、自分のデザインファイルに持ってきて使用するようになっているようです（一度使用したデザインファイルは、TOPページの「下書き」に表示されます）。下記は「JP + UI Kit iOS」のページを開いた例です。

まずは「JP + UI Kit iOS」のComponentsの13.ButtonからOutlineの通常ボタンをコピーして、先程作ったデザインファイルのiPhone 14 Proのフレームにペーストします。

デザインファイル左側のレイヤーで表示されているもので、「ページ」として表示されているものはクリックで切替ができます。

ページの下のグレーの線で区切られている部分は、ページ内に書かれている内容にで、ここはクリックしてもその部品の位置に移動してくれません。
ページ全体（例：Components）が表示されている状態で、該当するパーツ（例；13.Button）を選択すると青線で囲まれるので、その状態からズームすると探しやすいです。
（ズームイン、ズームアウトは、commad+option+スクロールで行います）

「JP + UI Kit iOS」のComponentsの13.ButtonからOutlineの通常ボタンをコピーして、先程作ったデザインファイルのiPhone 14 Proのフレームにペーストすると下記のようになります。

画面遷移（設定）

画面遷移させるための別フレームを先程の「フレームの作成」と同じ手順で作成します。

画面右側上の「プロトタイプ」をクリックしてから、最初に作ったフレーム（iPhone 14 Pro - 1）に配置したボタンをロールオーバーすると○が表示されます。その○の上にロールオーバーすると、○の中に+が表示されるので、そこからドラッグして、2つ目のフレーム（iPhone 14 Pro - 2）までドラッグします。矢印で結ばれます。このとき下記のように表示されいればＯＫです（次に移動／iPhone 14 Pro - 2／即時）。