📔

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

2022/08/29に公開

はじめに

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

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

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

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

アイコンライブラリ(パッケージ)とは、Material IconsFont AwesomeIonicons などのように、たくさんの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_nameicon-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 をカンマ区切り、formatsvg を利用

request
curl -H 'X-FIGMA-TOKEN: figd_*****' 'https://api.figma.com/v1/images/AzxbUywWQXXxV1kWF3Opc8?ids=2:4,2:6,2:8&format=svg'
response.json
{
  "err": null,
  "images": {
    "2:4": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/4077462f-d3a7-4152-93c1-f9789dd8285b",
    "2:6": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c8ebfda9-09b1-4fc6-ae94-7a214285a17a",
    "2:8": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/d92ec1e9-589f-4fc4-9319-7cdd9c03f746"
  }
}

SVG ダウンロード

1つ前の GET image API での URL からそれぞれの SVG をダウンロードする
2つ前の GET file components API のコンポーネントリストで、node_id からコンポーネント名など引っ張り、保存時に利用する

heart.svg
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24 41.95L21.95 40.1C18.4167 36.8667 15.5 34.075 13.2 31.725C10.9 29.375 9.06667 27.275 7.7 25.425C6.33333 23.575 5.375 21.9 4.825 20.4C4.275 18.9 4 17.3833 4 15.85C4 12.85 5.00833 10.3417 7.025 8.325C9.04167 6.30833 11.5333 5.3 14.5 5.3C16.4 5.3 18.1583 5.75 19.775 6.65C21.3917 7.55 22.8 8.85 24 10.55C25.4 8.75 26.8833 7.425 28.45 6.575C30.0167 5.725 31.7 5.3 33.5 5.3C36.4667 5.3 38.9583 6.30833 40.975 8.325C42.9917 10.3417 44 12.85 44 15.85C44 17.3833 43.725 18.9 43.175 20.4C42.625 21.9 41.6667 23.575 40.3 25.425C38.9333 27.275 37.1 29.375 34.8 31.725C32.5 34.075 29.5833 36.8667 26.05 40.1L24 41.95ZM24 38C27.3667 34.9 30.1417 32.2417 32.325 30.025C34.5083 27.8083 36.2417 25.8667 37.525 24.2C38.8083 22.5333 39.7083 21.05 40.225 19.75C40.7417 18.45 41 17.15 41 15.85C41 13.65 40.3 11.8417 38.9 10.425C37.5 9.00833 35.7 8.3 33.5 8.3C31.8 8.3 30.2167 8.825 28.75 9.875C27.2833 10.925 26.1 12.4 25.2 14.3H22.75C21.8833 12.4333 20.7167 10.9667 19.25 9.9C17.7833 8.83333 16.2 8.3 14.5 8.3C12.3 8.3 10.5 9.00833 9.1 10.425C7.7 11.8417 7 13.65 7 15.85C7 17.15 7.25833 18.4583 7.775 19.775C8.29167 21.0917 9.19167 22.5917 10.475 24.275C11.7583 25.9583 13.5 27.9 15.7 30.1C17.9 32.3 20.6667 34.9333 24 38Z" fill="black"/>
</svg>

その後

GitHub Actions で取得の自動化をしたり、npm package として Publish などをすることで、コード側でも簡単に利用できるようにする

おわりに

Figma のコンポーネント、ライブラリ機能を利用することで、デザイン運用の効率化が可能になる
受託案件などの再利用性は求められない場面でも、アイコンだけでもライブラリ化しておくと制作スピードが向上する
初めて機能を試す場合は、アイコンから試してみるのがよさそうに感じる

記事で出てきた Figma ファイル

Discussion