📔

Figmaでアイコンライブラリ作成 + Figma API を利用してSVG化も

2022/08/29に公開

Figma

SVG

tech

はじめに

Figma は Webサイトやアプリにおける UIデザイン、プロトタイプツールで、2022年7月に日本語対応するなど、現在非常に勢いを見せている
筆者も前々職・前職での自社サービス開発や、業務委託での受託Webサイト制作において、デザインツールとして活用している

Figma にはコンポーネント、テキストスタイル、オートレイアウトなどの便利な機能があるが、活用するかどうかは社内の文化やスキル、やる気次第なこともある
具体例を持って便利機能の活用方法を紹介することで、デザイナーにもコーダー(エンジニア)にもどちらにも嬉しい制作を行うチームが増えると、とても嬉しい

今回は、Webサイトやアプリなどで欠かせない「アイコン」の管理方法について紹介していく

アイコンライブラリの考え方

アイコンライブラリ(パッケージ)とは、Material Icons や Font Awesome や Ionicons などのように、たくさんのSVGアイコンがライブラリごとのルールに基づいてまとまったもの
プロトタイプ制作や、独自のアイコンを制作しない場合において、上記のライブラリを利用してきた人も多いだろう
なぜこれらの有名どころのアイコンライブラリが使いやすいのかを考えてみる

サイズ感が共通

それぞれの SVG をダウンロードしてコードを見ればわかるように、48px × 48px、512px × 512px など、すべてのアイコンの viewBox (フレームサイズ)が揃っている
ただし、Font Awesome は高さが 512px 固定で、幅はアイコンの形状に応じて 64(32?)px 単位で異なる

また、フレーム基準で中身のパスの大きさや配置が決められているため、同じパーツでアイコンを入れ替えた際も、アイコンの位置や大きさを改めて変更する必要がない

色・色数が共通

ほとんどのライブラリが1色でライブラリごとに色が統一されている
2色の例として、Material Icons の Two tone タイプがある
どちらにしても、色が違っていたり、突然多色のFigmaアイコンのようなものが紛れ込むようなこともない
デザイン・コードどちらも、一括での色変更などもやりやすくなるので、ぜひ揃えていきたいところ

デザイン、コード向けのライブラリが用意されている

例えば Google Material Icons では、サイト上でアイコンを確認できる他、Figma ファイルが公開されている
コードサイドでは、Material UI で @mui/icons-material が公開されているなど、取り回しがしやすいようになっている

Figmaでのアイコンライブラリの作り方

デザインファイルを新規作成

メニューから新規作成、ファイル名を忘れずにつけておく

フレームの作成

アイコンごとにフレームを作成する
フレームのサイズは今回は正方形で考えるが、よくあるスペーシングの8の倍数、小さいパーツでも扱いやすいように3の倍数の最小公倍数で、24px や 48px 四方のフレームがおすすめ
今回は 48px で作成する

フレームを作成後、上の◇ボタンからそれぞれコンポーネント化をし、アイコン名をつけておく
アイコン名は icon_name や icon-name など、英語小文字 + 単語区切り - _ などのルールを作る
Material Icons では icon_name、Font Awesome では icon-name が用いられている

縦横比を固定にしておくと、利用時に勝手が良いため設定する

塗り(背景色)は、アイコン利用時には不要なので削除する
作業時に白背景があったほうがいい場合、アイコンフレームをさらに覆うフレームを作成し、そちらに塗りを設定するのがおすすめ

パスの作成

※デザインは専門ではないので、ザックリと

予めサイズ感のルールを決めて、適切なサイズでパスを作成していく
(今回は Material Icons の一部をそのまま拝借する)

線はアウトライン化する

複数のパスは結合する

他にもパスを綺麗にする方法があり、Figma から美しい svg アイコンを書き出したいときに遭遇しがちなことなども参照

パスを選択し、制約を縦横どちらも「拡大・縮小」にする
これを設定することで、アイコン利用時にコンポーネントを拡大・縮小した際に、中のパスも拡大・縮小される

アイコンで利用している塗り色は、Color Style で命名しておくと、利用時に便利

ライブラリを公開

上部メニューより「スタイルとコンポーネントを公開」する

変更内容を確認し公開する
変更内容を一言でまとめて入力しておくのがおすすめ
「公開」と言っても、全世界への公開ではなく、同じチーム内でのみ利用できるようになる

アイコンの追加や修正などがあった際は、更新のたびに「スタイルとコンポーネントを公開」を繰り返す

他のFigmaデータでの利用

先ほどライブラリを公開したことで、同じチーム内での利用が可能となった

ライブラリの利用

サイドバーのアセットからチームライブラリを開く

利用するライブラリのスイッチをオン

サイドバーのアセットで閲覧・利用可能となる

サイズや色を変更して利用する

ライブラリに更新があった場合

通知されるので、必要な場合に更新する

Figma API を利用してコード化

Figma では開発者向け API が提供されており、利用することでライブラリ、コンポーネントの情報の取得や、PNG、SVG出力などもできる
各 API の説明のサイドバーにて簡単にテストすることもできる

個人アクセストークンの発行

Figma の設定ページより発行できる

ライブラリのコンポーネント情報の取得

GET file components
file_key は Figma ファイルの URL を利用する

内部ID、コンポーネント名、ページ名などのコンポーネント情報が取得できる

request

curl -H 'X-FIGMA-TOKEN: figd_*****' 'https://api.figma.com/v1/files/AzxbUywWQXXxV1kWF3Opc8/components'

response.json

{
  "error": false,
  "status": 200,
  "meta": {
    "components": [
      {
        "key": "313ed1f631a889878197f2da6893c8eeb1ca6e39",
        "file_key": "AzxbUywWQXXxV1kWF3Opc8",
        "node_id": "2:6",
        "thumbnail_url": "",
        "name": "star",
        "description": "",
        "created_at": "2022-08-28T18:59:50.740Z",
        "updated_at": "2022-08-28T19:11:12.329Z",
        "containing_frame": {
          "name": "Icons",
          "nodeId": "2:3",
          "pageId": "0:1",
          "pageName": "Page 1",
          "backgroundColor": "#FFFFFF"
        },
        "user": {}
      }
      ...
    ]
  },
  "i18n": null
}

SVG ダウンロード URL を取得

GET image

file_key は同じくURL、ids は先ほどの API レスポンスの node_id をカンマ区切り、format は svg を利用