Posted at

FigmaでFont Awesomeを使えばいいことが待っている、きっと……

Figmaを触ってて、アイコン使いたいな〜っと思ってたら

Font Awesomeが簡単に使えるとのこと。

早速使ってみました。

※本記事の内容はFigmaの公式ドキュメントに既に書かれております(英語)

https://help.figma.com/article/250-working-with-fonts#icon


1. Font Awesomeにてアイコンをコピー


  • チートシートからコピー
    スクリーンショット 2019-01-23 7.08.51.png

  • またはアイコンの詳細からコピー
    スクリーンショット 2019-01-23 7.08.59.png


2. Figmaにてコピーしたアイコンを貼り付け、フォントを「Font Awesome 5 free」に設定

どこでもいいのでFigma上でコピーしたアイコンを commnad + v で貼り付けます。

するとTextが置かれますが、まだアイコンは表示されていません。

スクリーンショット 2019-01-23 7.39.00.png

フォントを「Font Awesome 5 Free」へ変更すると表示されます。

FIgmaFontAwesome.gif

以上です!!!


おまけ. アイコンを大きくしたいときはフォントサイズをいじります。

IconSize.gif

大きくなって強そうにみえますね。


タイトルはこちらから自動生成しました。

http://www.copymecha.com/index.php