• ..

Figma

    四角を作る

    上のメニューの四角アイコンをクリックして選択します。または慣れてきたらショートカットrから選択できるようになると便利です。

    好きなサイズで作る

    クリックしたからクリックを離すまでの縦横の距離で好きなサイズの四角を作ることができます。

    100x100サイズで作る

    クリックだと100x100サイズで作れます。

    丸を作る

    デフォルトでは四角のアイコンになっているメニューアイテムのドロップダウンから選択します。または慣れてきたらショートカットoから選択できるようになると便利です。

    好きなサイズで作る

    クリックしたからクリックを離すまでの縦横の距離で好きなサイズの丸を作ることができます。

    100x100サイズで作る

    クリックだと100x100サイズで作れます。

    角を丸める

    オブジェクトをあるレベルまで拡大すると、角に丸いものが表示されます。これを内側へ引っ張ることでも丸を作ることができます。optionを押しながらするとその一辺だけを丸めることができます。

    ドーナッツや C の文字を作る

    丸オブジェクト作成後、ある程度拡大するとそのオブジェクトの中に選択できる丸が表示されると思います。この丸を上下にドラッグアンドドロップすると一周していない丸オブジェクトになると思いますが、その時に右サイドバーのデザインにあるフォームの数が変わっています。

    この一番右下の

    の値を返ることでドーナッツの内側の丸の大きさを設定できます。

    終わったらまたドラッグアンドドロップして完全な丸に戻すか、Cみたいなオブジェクトとして使いましょう。

    背景色を変える

    背景色は、オブジェクトを選択後右サイドバーにある Fill という項目から変更することができます。

    グラデーション

    カラーパレットの上部にあるドロップダウンからlinearradialを選択することでグラデーションカラーを付けることができます。

    オブジェクトをコピー(重複)する

    例えば同じサイズの要素が複数欲しい場合は毎回四角要素を同じサイズで作るより便利です。

    ドラッグアンドドロップでの方法

    optionキーを押しながら対象のオブジェクトをドラッグアンドドロップすることで、ドロップ先に対象のオブジェクトをコピーすることができます。多分一番よく使う方法になると思います。

    ショートカットで

    command + dでもそのオブジェクトをその場でコピーすることができます。

    ドラッグアンドドロップとショートカットでのコピーの組み合わせ

    実はショートカットでのコピーはドラッグアンドドロップでのコピーの移動距離などの情報を保持しています。なので例えば、10pxずつオブジェクトをコピーしたい場合はまず、

    1. ドラッグアンドドロップで10px下にオブジェクトをコピー
    2. ショートカットでコピー

    としたほうが早くで確実です。

    よく使うスタイルを使いやすくする

    Figma にはローカルスタイルというよく使う色やテキストスタイルなどを自分の好きな名前で登録しておける機能があり、これを使うことで効率よく作業を行えます。

    色のローカルスタイルを登録する

    ローカルスタイルは各スタイル設定項目の左上にある、サイコロの4(::)のようなアイコンから設定できます。

    以下の画像は2つの色をローカルスタイルに登録してみた例です。一度登録した色は::アイコンからいつでも使うことができるようになります。

    テキストのローカルスタイルを登録する

    テキストの場合も同じです。こちらもタイトルやサブタイトルという感じで定義して使っていくと便利だと思います。

    他にも Stroke や Effects といったスタイルも同様に定義して使うことができます。

    コンポーネントを作る

    Figma のコンポーネントは、 Sketch のシンボルのように1つのオブジェクトのスタイルを使いまわしたい場合にコンポーネント化することでそのオブジェクトを簡単にコピーして使い回せるようになります。また、コンポーネントを使うことで、一度配置した後にその見た目のオブジェクトのスタイルを変更したくなった時でも、コンポーネントとして登録したオブジェクトのスタイルだけの変更でコピーして配置したオブジェクトのスタイルも同時に変更できます。

    オブジェクトをコンポーネント登録する

    適当にオブジェクトを作成し、右クリックのコンテキストメニューから「Create Component」でコンポーネント化できます。(またはcommand + option + k)コンポーネント化したものはサイドバーのコンポーネントビュー(option + 2)で一覧することができます。そこから使いたいコンポーネントをドキュメント上にドラッグアンドドロップすることでコピーすることができます。

    あるコンポーネントから微妙にスタイルを変えて新しいコンポーネントを登録する

    コンポーネントをコピーしたものは Figma ではインスタンスと呼びます。これはサイズや色などの変更はできますが、細かい中身のオブジェクトの置いている位置などの変更はできません。これをするにはインスタンスからただのオブジェクトに変換(command + option + b)し、編集後再度コンポーネント化する必要があります。

    マスク

    ある親要素から子要素が絶対にはみ出ないようにしたい(はみ出た部分はカットしたい)場合に使えます。以下はグレーの要素から白要素がグレーの外にはみ出さないようにしています。

    マスクしているグループの表示領域は、その子要素の領域だけになるので、領域の元となるオブジェクトをコピーして、コピーされたものを使うといいと思います。

    また、複数のオブジェクトを選択してcontrol-option-m(macの場合)を押すことで、マスクグループを作ることができます。その場合表示領域は最初に選択していたオブジェクトの領域になります。

    ちなみにフレームに対してマスク機能を使うと効かなかったり、上手くいかないのでやめたほうがいいかなという感じです,,

    グリッド

    フレームが持つ機能で右のメニューのレイアウトグリッドから線?を表示して、それに合わせてオブジェクトを配置するといったことができます。

    線の種類は、

    • Grid (方眼紙)
    • Column (カラム)
    • Row (行) の3種類あります。

    Grid

    デフォルトでは方眼紙のように縦横に一定の間隔(10px)を空けたグリッドになります。10pxは詳細設定から好きな値に変更できます。

    Column

    詳細設定の「Column」からカラムにグリッドをカラムに変更できます。こちらもカラム数やそれぞれのカラムの溝のサイズなど好きに設定できます。

    Row

    カラムが縦分割なのに対してこちらは横です。

    線にフィット

    オブジェクトを移動する時も(赤線が出て)ちゃんと合わさる感じで配置できるので便利です。

    ショートカット

    control-gでグリッドを出したり消したりできるので、作る時は表示させておいて誰かにちょっと見せたい時などには消すなどできて便利です。

    拡大率を100%に瞬時に戻す

    メニューの「100%」という部分に100と入力して戻すのでもいいですが、ショートカットを使うともっと早いです。

    Figma には、command+-で縮小、command++で拡大というショートカットがあります。これで小さいものから50 100 200 400 800 と2倍ずつ拡大縮小することができます。なので、100未満の時はcommand++、より大きい時はcommand+-を何度か押しても100にリセットすることができます。

    一番てっとり早く Font Awesome を使う

    フォントを選択するセレクトメニューにはFont awesome 5 Freeという項目があります。これを使うとテキストで Font Awesome を使うことができます。

    フォントを Font awesome 5 Free に

    Figma はいつからか入力することができるようになったので、入力したほうが早いです。

    フォントをコピペ

    Font Awesome CheetSheetという一覧できるサイトがあるので、ここから好きなアイコン部分をコピーして、 Figma に貼り付けます。

    {#追記 2019-09}

    Iconify プラグインを使う

    Iconifyプラグインを導入することで、Figma から動かずにその場で探してドキュメントに追加することができます。

    インストールするにはインストールページの「Install」をクリックするだけです。(ログイン済の状態で)

    あとは使うだけです。ドキュメント上でコンテキストメニューのプラグインから Iconify を開き「Font Awesome 5」という項目(他にもマテリアルデザインアイコンなど様々なアイコンがある)を選択し、好きなアイコンを選びます。

    あとは「Add Icon」すればドキュメントに置かれるハズです。

    {/追記}

    アクセストークンを取得

    Figma の API を叩くなど、アクセストークンを用いて認証に通る必要があるのでこれを発行します。

    まず自分のアカウントのドロップダウンから「Account Settings」に行きます。

    すると「Personal Access Tokens」というセクションがあるはずです。「+Create a new personal access token」します。

    説明文を聞かれますが適当で大丈夫です。

    発行されたら*****-********-****-****-****-************の部分は大事に取っておきます。

    API でコメントを取得する

    API 系の情報はwww.figma.com/developers/docsにまとまっています。

    API のオリジンはapi.figma.comで、各 API ではヘッダーにX-Figma-Token: *****-********-****-****-****-************を置いて認証を通る必要があります。

    コメントを取得してみる

    ある Figma のドキュメントにはこんなコメントがされている状態だとします。

    さて、コメントを取得するための API はhttps://api.figma.com/v1/files/:key/commentsとなっています。ドキュメントをシェアする時、 https://www.figma.com/file/************************/titleという URL だと思いますが、この************************:keyに入ります。

    では叩いてみます。

    curl -s \
      -H 'X-Figma-Token: *****-********-****-****-****-************' \
      https://api.figma.com/v1/files/************************/comments     

    こんな感じでコメントが取得できました。

    {
      "comments": [
        {
          "id": "*******",
          "file_key": "************************",
          "parent_id": "",
          "user": {
            "handle": "nju33",
            "img_url": "https://www.gravatar.com/avatar/...",
            "id": "******************"
          },
          "created_at": "2019-04-20T16:48:31Z",
          "resolved_at": null,
          "message": "コメントテスト:grinning:",
          "client_meta": {
            "node_id": "0:1",
            "node_offset": {
              "x": 640,
              "y": -527
            }
          },
          "order_id": "1"
        }
      ]
    }