🐍

Figmaでピクトグラムをつくる

2025/01/12に公開

この記事で得られること

この記事では、Figmaでピクトグラムも作れることがわかります。FigmaはwebデザインなどのUIデザインツールとして主に使用されますが、ロゴやピクトグラムの作成も可能です。

はじめに

ピクトグラムとは

ピクトグラムとは、情報やメッセージを視覚的なシンボルやアイコンを使って簡潔に伝える図形のことです。言葉を使わずに、誰でも直感的に理解できることを目的としています。
現代のピクトグラムの基礎は、1964年の東京オリンピックでの使用に遡ります。
https://www.ssf.or.jp/knowledge/history/interview/068.html

Figmaで作る

webデザインで主に使用されることが多いFigmaですが、図形ツールやAout layout,variantを使ってピクトグラムを組み立てていきたいと思います。作り方はあくまで一例です。参考にしていただけると幸いです!

手順1 Frame作成

まず、ピクトグラムの土台のFrameを作成します。8px✖️8pxをひとマスとするグリッドをを作成します

手順2 要素作成

次に手順1で作成した赤いひとマスに埋め込む「要素」を作ります。
図形ツールを使い、円、長方形、三角形を組み合わせて様々な形を作成します。

それぞれの要素をvariant化してcomponentから選べるようにします。
variantは1.図形の特徴、2.背景色の2種類で分けて区別します。

手順3 Frameに埋め込む

手順2で作成した要素を手順1で作成したFrameに埋め込みます。
Aout layoutを使うとピッタリハマります。

手順4 組み立てる

いよいよピクトグラムの形にしていきます。

完成

今年の干支である、「ヘビ」をモチーフに作成しました。

Figmaで作るメリット

以前、同じやり方でIllustratorで作成したことがありました。Illustratorにも良い点はありますが、Figmaで作成するメリット2つあると思います。

  1. Auto layoutを使うことでレイアウトが崩れない
    ➡︎イラレでは図形を入れ替えるたびにカーソルが隣の図形と触れてしまい、レイアウトが崩れてしまっていました。が、FigmaではAuto layoutで固定されているため簡単に操作ができます。
  2. variantで図形の入れ替え/反転が簡単
    ➡︎レイアウトを崩さずに、右サイドバーのドロップダウンリストから他の図形を選択できるのはとても簡単で楽です。

まとめ

この記事では、「Figmaでピクトグラムを作成する」ことを紹介しました。

ピクトグラムの土台作成(Frame,要素作り)は一手間かかりますが、思っているよりかは簡単にできます。ただその後のピクトグラム作成は、思っている図形が描けず、「どの図形を組み合わせたらヘビの形になるのかな」と試行錯誤していました笑(図と地の関係が難しかったです)

この記事を読んで少しでも挑戦してみたいなと思っていただけたら幸いです。
最後まで読んでいただきありがとうございました!!

KA projects

Discussion