Adobeユーザー向けFigma入門Part1

こんにちは！LiSMOアシストデザイナーの山邉です。
今回はAdobeユーザーさん向けに、Figma入門記事を書きました！
アカウントの作成からシェアの方法までを記載しています。
AdobeXDとはどう違うの？といった導入前の疑問にもお答えします！

Figmaって何？どんなことができる？

Figmaとは、デスクトップアプリやブラウザ上で使用できるUIデザインツールです。
デザインだけでなく、プロトタイプの作成も可能です。
Adobe製品で言うと、XDみたいなものですね。
Figmaの便利なところは、ブラウザ上で使えて、しかも共同で同時に編集ができるところです！
デザイナーだけでなく、ディレクターやエンジニアなど複数人が関わるプロジェクトでは大活躍です！
ブラウザで使えるので、「共有相手がAdobe持ってない！」といったことが起こりません。

インストールと初回設定

今回の記事ではブラウザ版を使用していきます。
Figma公式サイトにアクセスしましょう！
まずはFigmaのアカウント作成が必要です。無料版と有料版があります。
ほとんどの機能が無料で使えるので、まずは無料版のアカウントを作りましょう。
オフィシャルサイトにアクセスして、「Try Figma for free」（日本語版だと「始める」）というボタンからアカウントを作ります。

メールアドレスとパスワードを入力するか、Googleアカウントのログインでもスタートすることができます。
「Create account」のボタンをクリックすると、アカウントが作成されます！
自動的に編集画面が開かれて、チュートリアルが表示されます。「Next」で次の画面に進みます。
チームを作成するよう推奨されますが、個人で利用したい場合は「Cancel」ボタンを押すと、チームを作らずに進みます。

日本語表示に変更する

Figmaのデフォルトは英語表示です。
日本語に変更するには、左上のプロフィールアイコンをクリックして、設定メニューを選択します。

「Language」から「日本語」を選択して保存します。

これで日本語表示になりました！

新規デザイン作成

いよいよデザイン作成です！
画面右上の「＋デザインファイル」を押すと、新規キャンバスが開きます。

これがキャンバスです！
ペンツールや長方形ツールなど基本的な機能は他のデザインツールと同様の使い方なので省略します。

フレーム（キャンバス）の作成

フレーム（キャンバス）とは、WEBブラウザやモバイル画面などの枠のことです。
iPhoneの画面サイズを調べて、アートボードのサイズを調整して…といった工程が不要になります！
まずが画面左上のフレームアイコンをクリック。すると、画面右柄にフレーム一覧が表示されます。
今回はiPhone14を選択してみます。

そうすると、iPhone14のサイズのフレームが作成されました！

画面遷移

画面遷移の機能を試すため、ログインボタンを作ってみました。
長方形のオブジェクトと文字を同時に選択して、グループ化しています。
グループ化は⌘+G（WindowsだとCtrl＋G）か、右クリックで「選択範囲のグループ化」でできます。

遷移先のページを作成します。
先ほどと同様に新しくフレームを作成します。

画面右側からプロトタイプを選択。
遷移元となるボタンを選択すると、青い矢印が出てきます。
この矢印を引っ張って、遷移先の画面にドラッグします。
XDのプロトタイプと同じ操作感ですね。
ページ遷移の設定ができたら、右上の三角ボタン▶︎からプレビューが見られます。

プレビュー画面の操作がサクサク動いて快適〜☺️

プロジェクトのシェア

デザインファイルができたら、他の人にシェアしてみましょう！
Figmaではプロトタイプだけでなく、全体ページのプレビューも見ることができます。
シェアをするには、画面右上の「共有」ボタンを押します。
共有相手と権限を選択して、「リンクをコピーする」を押せば完了です！

終わりに

以上で今回の記事は終了です！
コンポーネント化やローカルスタイルなどの便利機能は次回の記事で説明します。
詳しく知りたい方はそちらもあわせてチェックしてくださいね☺️
Part2はこちら
最後までご覧いただきありがとうございました！