Figma 2 / 2 | nju33

一番てっとり早く 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"
    }
  ]
}