###### tags: `LT`

Figmaでアプリアイコンを作ろう
========

先日iPhoneアプリのアイコンを作りました.

<img src="https://i.imgur.com/CZp2MsU.png" width="30%">

## Figmaとは

https://www.figma.com/

- UI/Webデザイン&プロトタイピングツール
- ブラウザでもローカルでも使える
- 拡張機能でローカルフォントも使える
- 基本的に無料で利用できる
- 複数人の同時作業やコメントもできる

デザインに必要なフレームは用意されている

<img src="https://i.imgur.com/aIV20Kr.png" width="30%">

### 類似サービス

- Adobe XD
- 知名度が高い
- Adobeソフトと連携できる
- Sketch
- 歴史が長い
- Macでしか使えない
- InVision Studio
- InVisionのサービスと連携できる
- APIが提供されているため、プラグインの開発が可能
- 無料プランが多い

## Figma Community

デザイナーや開発者がプラグインやファイルを公開できるスペースで, Figmaユーザーなら誰でも参加可能. コミュニティ上で公開されているプラグインをインストールしたり, ファイルを自分の下書きへ複製できる.
やりたいと思ったことは一回ここで調べることで大抵楽にできる.

## 今回使ったテンプレート

App Icon Toolkit - iOS/macOS/Android — Figma
https://www.figma.com/community/file/824894885635013369

アイコンを作って嵌め込むだけでプレビュー, 書き出し用の各サイズのファイル準備までやってくれる.

## 製作の過程

> アプリの内容は、iPhoneにバーコードリーダー装置をつけて、倉庫の入出庫管理をするアプリです。

ということだったので,

- スキャンして読み取るイメージ
- 倉庫のイメージ

を持たせればよいと思った.
スキャンについては, Face IDなどの普及で「四角の枠」=「何かを読み取る」というメンタルモデルがあると思ったので, それを取り入れた.
倉庫については, ごちゃごちゃしそうだったので段ボールを取り入れることで「在庫」というイメージを持たせた.