Figma初心者向けの爆速キャッチアップ記事
Figmaを使ってみようと思った時に
Webデザインツールの定番のFigma、ワイヤーフレーム作りから本格的なデザインまで良い感じにできるツールで、良いものであることは間違いない気がする。
しかし具体的な使い方はよくわからない、そんな方向けの記事です。
Figma、初心者でググるとリッチな記事は出てきますが、とりあえず使ってみたい場合何を学ぶべきか、というものが逆にわかりづらかったのでまとめます。
Figmaの始め方
公式サイトでサインアップするだけです。
googleのアカウントがあれば始められるのが良いですね。
ログインしたら
ファイル一覧が見れます、テンプレを見て雰囲気を見ても良いですが、New design fileをクリックすると0から新規作成できます。
何を理解するべきか
各種UIの使い方とLayer、Pagesなどの概念を理解する必要があります。
パワポの経験があればだいたいフィーリングで使いこなせると思いますが、予め知っておいた方が迷わない所があるなと感じたので、ある程度触って理解したものを共有します。
まずはFrameを使う
FigmaにはFrameという概念があります。
様々な対象デバイスの画面解像度のFrameが用意されており、これを並べて中身を作りこんでいくことでデザイン設計書ができあがる、という使い方でデザインを作りこんでいきます。
最初はPagesが名前の通り1ページのような使い方をするのかな？と誤解を持ってしまいますが、Pagesは同じWEBサイトのPC版とスマホ版、ユーザー向け機能と管理画面、共通コンポーネント一覧のような棲み分けを行うための機能です。
例えば自身のポートフォリオサイトを作る場合、トップページのFrameと業績ページのFrameを並べていくようなイメージです。
任意の解像度のFrameを選択するとその解像度のFrameが配置されるので、必要な数を並べてリネームします。
Frameの中に図形、テキストを配置していく
Frameを配置したらあとはパワーポイントのように図形やテキストを並べて画面の構成、デザインを作りこんでいきます。
Prototypeを作りこむ
画面の構成が整ったら右サイドバーのPrototypeを選択し、各要素をクリックした際の挙動を設定します。
クリックイベントやマウスオーバーの挙動などを作りこむことができます。
画面遷移を一通り作りこんでから画面右上の再生ボタンをクリックするとプロトタイプ機能が起動します。
完成したアプリケーションのようにボタンやリンクをクリックして、使用イメージを共有することができます。
この際、Frameの解像度が検証デバイスの解像度より低い場合、HTMLのように良い感じに表示されずに画面の端が真っ黒になります。
Prototypeの出来栄えをプレゼンする時に使うであろう解像度のFrameを選びましょう。
このPrototype機能を使えばまるでプロのデザイナーの仕事のように完成イメージを見せつけることができます。
Figmaをちゃんと使いこなすために学ぶ事
上記のような流れで適当に作りこんでも最低限それっぽいプレゼンを行うことができるくらいの素材ができあがります。
あとはFigmaの便利機能をきちんと理解してベテランを目指しましょう。
グループ化とコンポーネント化
上記の説明では雑に並べた図形とテキストですが、これらの要素はサイドバーやリンクのような粒度でグループ化することができます。
綺麗にグループ分けすることで後々改良するときにどれが何のための素材なのか見通しが良くなります。
また、コンポーネント登録機能を利用することで、コンポーネントのデザイン変更をすべてのページに反映させる、といった使い方が可能になります。
例えばサイドバーはコンポーネントとして登録すると、後々デザイン変更を行う際、全てのページに変更内容を反映させるためにひたすらコピペするような地獄を見ずに済みます。
プラグインを活用する
Figmaにはマテリアルデザインのアイコンを検索、貼り付けするプラグインなど便利な拡張機能が存在します。
検索して使いこなしましょう、
デザインテンプレートを活用する
https://www.nucleus-ui.com/のようなサイトで無料のものから有料のものまで、様々なデザインテンプレートが配布されています。
0から作らずにこうしたテンプレートを活用することで、プロのデザイナーがいない状況でも高い品質のデザイン案を作ることができます。
カラースタイルを整備する
CSS変数でよく使う色を登録するような機能が存在します。
コンポーネントやカラーを整備することでメンテナンス性の高いデザイン設計図を作成しましょう。
他にも使いこなすコツや便利な機能は沢山あります（あるはず）。
正直私もよくわかっていないですが、使いこなしてできることの幅を広げていきたいですね。
Discussion