エンジニアでもこわくないFigmaかんたん操作(初級編)

エンジニアでもこわくないFigmaかんたん操作(初級編)

目次

    はじめに

    Eビジネスエンジニアリング課の小枝です。
    直近では管理画面アプリのUIデザインを手掛けています。

    今回はグラフィックソフトに馴染みのないエンジニアでも実務で使える、Figmaの最小限の操作をご紹介します。
    これだけ押さえれば大丈夫!Figmaは怖くない……!!

    概要

    対象:Figmaの操作に馴染みのないエンジニア
    ゴール:画面移動、オブジェクトの選択、画面の書き出しがわかる

     

    お品書き

    ・手のひらツール
    ・グループ内のオブジェクトを選ぶ方法
    ・画面の書き出し方

    手のひらツール

    画面の移動には手のひらツールを使用します。
    でも移動させるたびにツールから選択するのは面倒です……。
    手のひらツールの説明の画像

    Figmaではスペースキーまたはマウスのホイールボタンを押し続けている間、一時的に手のひらツールになります。

    スペースキーと左ボタンまたはホイールボタンを押し続けている間手のひらツールになる説明の画像

    グループ内のオブジェクトを選ぶ方法

    複数のオブジェクトがグループ化されている場合などは、レイヤーウィンドウから選択できますがレイヤー名から探すのは結構大変です。

    なので選択したいオブジェクトをまずクリックして選択します。
    オブジェクトを選択している画像

    ダブルクリック一回ごとに現在選択しているオブジェクトの子要素が選択できるので、選択したいオブジェクトが選択できるまでダブルクリックし続けます。
    必要な数だけダブルクリックする説明の画像

    画面の書き出し方

    書き出したい画面を選択して、画面右下のインスペクタからエクスポートの+アイコンを押下すると、書き出しの指定ができます。
    画像をエクスポートする説明の画像

    サイズや拡張子も選べますし、複数画面をひとまとめに書き出すことができます!
    複数画面をエクスポートする説明の画像

    まとめ

    手のひらツールはスペースキーもしくはホイールボタンで使える!
    グループ内のオブジェクトはダブルクリックで選択できる!
    画面の書き出しは画面右下から!

    アジアクエスト株式会社では一緒に働いていただける方を募集しています。
    興味のある方は以下のURLを御覧ください。