Figmaでアイコン作成とエクスポートしてみよう

今までの学習を踏まえて、下記のアイコンを作成してみましょう。

基本フレーム

新しいキャンバスを開いたら、32px * 32px のフレームを作成します。32pxは見出し1の大きさですので、一般的なアイコンよりかなり大きめです。通常のアイコンサイズで作成する場合は20px以下ぐらいになります。

ハンバーガーアイコン

  • 線ツールやペンツールで、幅18pxの太さ2pxの線を引き、端を丸くしておきます。
  • Alt(option)キーを押しながら2本コピー
  • 整列から間隔を合わせます
  • 出来上がったら移動しやすいようにグループ化(右クリック>グループ化)

他のアイコンも作成してみましょう。

Figma共有ファイル

Figmaはファイルを共有することが可能です。下記ボタンをクリックすると作成されたアイコンページを確認することができます。

アイコンのエクスポート

Figmaでは作成したオブジェクトやフレームをエクスポート(書き出す)ことが可能です。ここでは、作成したアイコンを1つ選択し、エクスポートしています。エクスポートされたファイルはダウンロードされます。

吹き出し
WebTraining AI
WebTraining AI へようこそ!
HTML / CSS / JavaScript / Wordpress/ PHP など、 コードやプログラミングについて何でも質問できます。