見出し画像

Figmaを初めて触るエンジニアへ

Yusui Hoshino

  • Qiitaからのお引越し記事です。（元記事）

  • 私MonoのFigmaファイルを初めて触るエンジニアに最低限の機能を教える記事。

  • 他のFigmaファイルに対しても8割くらいは応用が効く内容になっていると思います。

心構え

  • 開発 >> デザイン

    • 特にハッカソンでは、技術がメインで評価されます。

    • デザインに時間がかかって動かないプロダクトを作るよりは、全てデフォルトコンポネントでダサいけれど動く物を作る方ががマシだと思ってます。

  • デザイナーは実装の大変さを分かってない

    • 実装が無理ゲー、もしくは膨大な時間がかかるデザインを気づかずに行っていることがあります。

    • デザインを変更する方が良い場合もあるので、早めの相談待ってます。

  • デザイナーはミスしがち

    • プログラミングと違い、FIgmaは適当なデザインを見てもエラーを吐いてくれません。

    • ミスを見つけたら速攻でデザイナーに教えてあげましょう。

基本色々

Figmaのファイル構成について

  • File

    • Guideline Page

      • スタイル、コンポネント、素材などをまとめている

    • Layout Page

      • 実際の画面のデザインをまとめている

    • Prototype Page

      • プロトタイプを作る用のページ

      • デモ用に最適化されているので、エンジニアは見る必要なし

命名について

  • Figmaのスタイル名とプログラミング変数名を一致させるのが理想です。

  • しかし、Figmaは検索の観点から命名が特徴的です(「/」使いがち）。よって、プログラミングで利用されるものと異なる場合が多いです。

  • また、ハッカソンなどの場合は時間が少ないので、デザイナーとエンジニアがそれぞれ使い慣れた別の命名を利用しても良いと思っています。

サイズについて

  • 8の倍数を基本としてレイアウトしています。

  • line, stroke以外のオブジェクトで少数のものがあれば、偶数に勝手に直してOKだと思います。

デザインをどこまで反映すればよいか

  • 色、テキスト

    • 反映してください

  • コンポネント

    • 最低限種類は合わせてください

    • 余裕があればデザインに見栄えを近づけてください

  • 間隔

    • 1つのデバイスに対しては反映してください

    • 多デバイスへのメディアクエリなどは後回しで

  • 要素の階層、機能

    • 参考程度で反映させる必要はありません

    • デザイナーが変更しやすいFigmaファイルにした場合、マークアップ言語の構造と全く別物になる可能性があります。

  • コンポネント

    • 参考程度で実際の画面を優先してください

    • コンポネントはLayout Pageにあるもので、インスタンスを同時に変更できる便利機能です。ただ、インスタンスのみを変更して配置した場合もあるので、実際の画面も適宜確認してください。

便利機能

optionで距離を測る

  1. オブジェクトをクリック

  2. optionを押しながら、別のオブジェクト上をマウスでなぞる

  3. 距離が表示される

commandクリックで深い層のオブジェクトを選択

  1. command + クリック

  2. 深い階層のオブジェクトを一度で選択できる

command + Yでアウトラインを見る

  1. command + Yでアウトラインを見れる

  2. 重なっているオブジェクトや、Auto Layoutが見やすい

右パネルを使って

画像出力

  1. 出力したい画像をクリック

  2. 右パネル一番下のExportの「+」をクリック

  3. PNGやPDFなどの形式を選んで出力（PNGの場合はRetinaディスプレイに対応させるために「数x」を調節できる）

※ちなみにアイコンはコードで埋め込めるという点でGoogle Material Desginのアイコンを利用していることが多いです。その場合はFigmaから出力する必要はありません。

InspectパネルでStyle（色、テキスト）一覧を確認

  1. 右上のタブをInspectにする

  2. 何もないところをクリック

  3. 右パネルにスタイル一覧が表示される

  4. Editアイコンをクリック

  5. 詳細を見れる

InspectパネルでCSSを見る

  1. 右上のタブをInspectにする

  2. 要素をクリックスすると、描画しているCSSが見える

Spacing

「Figmaのモバイル設計手法へ」から、エンジニアが最低限知っておくべき情報だけ解説します。


Auto Layout

  • 機能

    • CSSのFlexのようなもので、要素を縦や横に一列に並べられる

    • 要素を一定の間隔を空けて並べられる

  • 問題点

    • 個別の間隔を指定できない

  • 解決策

    • 間隔を0にして、空オブジェクト（#spacing）を差し込む

#spacing

  • オブジェクト間に差し込むカラフルなオブジェクト

  • 大体8の倍数になっている

※CSSなどは各オブジェクトがmarginを持てるので、空オブジェクトを作る必要はありません。見栄えのみを参考にしてください。

Spacing Manager

  • #spacingという名前のオブジェクトの表示、非表示を切り替えられるプラグイン

  • 利用方法

    1. Spacing Manager に飛ぶ

    2. Install

    3. Figmaファイル内の左上のアイコン → Plugin → Spacing Manager →

    4. Show / Hide spacings in current page（表示もしくは非表示）

Prototype

右上からPrototypeモードに切り替える。

画像遷移の詳細を知る

  1. 画面遷移が設定されている画面をクリックする

  2. 矢印をクリック

  3. 詳細を確認

    1. Navigate to は普通の画面遷移

    2. Overflowはダイアログなどの、元の画面の上に表示する画面遷移

    3. 他にも画面遷移の時間、トランジション、配置位置などが確認できる。
      （矢印がない場所の画面遷移はノリで頑張って）

動きを見る

  • PC

    • スタートしたい画面を選択後、右上の再生ボタンをクリックする

  • スマホ（おすすめ）

    1. Figmaというアプリをインストールする

    2. アプリ内でMirrorモードに変更

    3. PC画面で表示したいFrameを選択

    4. アプリ内でタップやスクロールに対応するFrameを表示できる

画面からはみ出した要素はスクロール

  • Figmaは一番親のFrame（デバイスサイズのFrame）から、子要素がはみ出しているとPrototype中にスクロールできます。（デザイナーがVertical/Horizontal Scrollを指定している場合）

  • このはみ出している部分を非表示にしたい場合は、デバイスサイズのFrameを選択 → 右パネルのClip Contentをオンにしてください

Adobe税を払うために使わせていただきます