四角を作る

Image from Gyazo

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

好きなサイズで作る

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

Image from Gyazo

100x100サイズで作る

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

Image from Gyazo

丸を作る

Image from Gyazo

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

好きなサイズで作る

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

Image from Gyazo

100x100サイズで作る

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

Image from Gyazo

角を丸める

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

Image from Gyazo

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

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

この一番右下の

Image from Gyazo

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

Image from Gyazo

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

背景色を変える

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

Image from Gyazo

グラデーション

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

Image from Gyazo

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

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

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

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

Image from Gyazo

ショートカットで

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

Image from Gyazo

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

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

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

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

Image from Gyazo

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

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

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

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

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

Image from Gyazo

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

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

Image from Gyazo

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

コンポーネントを作る

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

Image from Gyazo

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

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

Image from Gyazo

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

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

Image from Gyazo

マスク

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

Image from Gyazo

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

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

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

グリッド

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

線の種類は、

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

Grid

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

Image from Gyazo

Image from Gyazo

Column

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

Image from Gyazo

Row

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

Image from Gyazo

線にフィット

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

Image from Gyazo

ショートカット

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

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

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

Image from Gyazo

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 はいつからか入力することができるようになったので、入力したほうが早いです。

Image from Gyazo

フォントをコピペ

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

Image from Gyazo

{#追記 2019-09}

Iconify プラグインを使う

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

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

Iconify インストール画面

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

好きなアイコンを選択した

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

{/追記}

アクセストークンを取得

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

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

Image from Gyazo

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

Image from Gyazo

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

Image from Gyazo

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

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"
    }
  ]
}