https://lismotech.co.jp/wp-content/uploads/2023/06/2306サムネ.png

Adobeユーザー向けFigma入門Part1

UI/UX

こんにちは!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はこちら
最後までご覧いただきありがとうございました!


NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。

企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。

お得な情報がLINEに届く!!

LINE公式アカウントはこちらから。

友だち追加

最新記事

CONTACT

NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。

平日10:00〜19:00

お電話の場合こちらから

043-305-4162

平日10:00〜19:00