【初心者向け】Atomic Design っぽい、Figma の使い方


![Figma の使い方](https://qiita-image-store.s3.amazonaws.com/0/200180/06b4bba9-89d5-b3fd-975c-711fc3447cb1.png)


# **はじめに**
みなさま、いかがお過ごしでしょうか。Figma 流行ってきてますね〜。

他にも Framer X や STUDIO 、そして Figma の上位互換かもしれない [Phase](https://phase.com/) が盛り上がりを見せています。
導入記事も増えてきているので、具体的な **作成フロー** を紹介したいと思います。
作成済みのファイルは探せばいっぱいあるので、Atomic Design ぽいプロセスで、よく使う UI パーツを作るところまでハンズオン形式で書いてみます。
ただし、[原理主義的なプロセスや理論](http://atomicdesign.bradfrost.com/) ではなく、誰でも順を追って Figma を使える状態を目指します。


ストラテジストとエンジニア、そしてデザイナの作業が分断されている時点でイノベーティブではありません。
この三者が統合的にデザインできること、すなわち **ワークフローそのものを最適化することが目標** です。

<details><summary>*Figma と Atomic Design の親和性*</summary><div>
### **Figma と Atomic Design の親和性**
Atomic Design は進め方がよくわからないですよね。
いつの間にかエンジニアとデザイナで認識が違っている、なんてのはよくある話です。

デザイナーにとって、最も共感しづらいのは Atoms から作り始めることです。全体が見えなければ細かい設計はできません。

しかし Figma は全て仮の状態で進めても、あとで変更できます。
Sketch なども可能ですが、バージョン管理やコミュニケーションコストが高めです。
一方で **常に最新である Figma** はそれがありません。

さらに、**複数人で柔軟に共同設計できる** ので、UI が出来上がるまでエンジニアがパーツやレイアウトで悩まなくて済みます。
しかもリアルタイムで書き換わるので、脳の並列化もできます。
一度作ると変化に強いチーム独自のフレームワークが出来上がるのです。

</div></details>


# **とりあえずやってみよう、Atomic Design っぽい作成フロー**

![AtomicDesignSteps.png](https://qiita-image-store.s3.amazonaws.com/0/200180/0e9256b5-a7d3-869a-10f0-161bfac0d3db.png)

これはあくまで **1 つの方法** でしかありません。
Atoms と Molecules の切り分けなどは記載しません。みなさんで話し合って決めてください。
そして [デザインスプリント](https://qiita.com/hikaru_tayama/items/79b12df47a7a95138bfc) 同様、カスタムして使ってください。



## **STEP 0 : Stance**
ツールはあくまでツールです。銀の弾丸はありません。
そのため目的だけは揃えておいてください。

```
1. 相互協力のために使用する

2. 発話志向で進める

3. 完成はそもそも存在しない
```


## **STEP 1 : Color**
色がなければ何も見えません。
いまは適当でいいので Style の登録をしておきましょう。
メインカラー以外にグレー、リンクの青あたりは作っておくと楽です。
あとで足せますが **最低白黒 2 色** は作っておいてください。

![001.gif](https://qiita-image-store.s3.amazonaws.com/0/200180/c24f02c0-bc71-c6e1-9df1-765c9d688c77.gif)

```
1. Rectangle Tool を選択

2. シングルクリック

3. Fill を選択し、色を調整

4. Color Style を登録
```

Style 化したら消しても大丈夫です。
また四角形のサイズは問いません。


<details><summary>*Align Tips*</summary><div>

### 整列と Frame
整列は色々やり方があります。とりあえず揃えるだけでサマになるのでお勧めです。
Shift を押しながら複数クリックして整列すれば、それぞれ合わせたいものに揃います。
Frame に対して整列したいばあいは、オブジェクト選択した状態で直接整列ボタンを押してください。

</div></details>




## **STEP 2 : Image**
画像は色の集合体なので Figma ではシェイプの中に埋めることができます。
すでに挿入したい画像が決まっている場合は画像自体をコピペ、またはドラッグ & ドロップで配置してください。

![002.gif](https://qiita-image-store.s3.amazonaws.com/0/200180/5b543163-bea8-0a89-9483-eadddb7c904b.gif)


```
1. Rectangle Tool を選択

2. シングルクリック

3. Fill > 左上の Solid を Imageに

4. 任意の画像を選択

5. Color Style を登録
```


また、画像自体を Color Style にすることが可能なだけでなく、Fill の重ね合わせもすべて含んで Color Style にできます。
例えば画像の上に文字を置きたい場合、視認性確保のために透明度の高い黒をオーバーレイすることがあると思いますが、それすべてを 1 つの Style として登録できます。

<details><summary>*Image Tips*</summary><div>

### 画像配置の種類
画像は以下の 4 種から配置方法を選べます。
他のデザインツールに慣れている方は Crop がおすすめです。option 押しながらダブルクリックするとショートカットできます。

- Fill : 勝手にトリミング
- Fit : 内接リサイズ
- Crop : 手動トリミング（辺をつかんで画像をカット）
- Tile : 繰り返しのやーつ

</div></details>





## **STEP 3 : Shape** 
UI は絵画ではありません。すべて外形線があります。
角 R 付きのボタンやカード、リスト等よく使う形状を作ります。
それぞれの Component を作っておくと R のサイズを一括で変えられるのでボタンの種類ごと変更しなくて済みます。


![003.gif](https://qiita-image-store.s3.amazonaws.com/0/200180/cfff66ba-ef0d-fe0b-9b97-d38becfc92ea.gif)


```
1. Rectangle Tool を選択

2. シングルクリック

3. Fill > Color Style を適応

4. Corner Radius を変更

5. Create Component
```

Figma では **繰り返し使用するものを Component 化** して、Master Component をコピペするようなイメージでいてください。
新しいオブジェクトを追加する場合や、それぞれの配置を変更したいときは Master Component だけ変更すれば全て変わります。

個人的によく使うのは以下です。

- ボタン R : 2 ～ ∞ px (大きくすると左右が半円のボタンになります）
- フォーム R : 0 ～ ∞ px 
- カード R : 2 ～ 24 px （最近は大きいのが流行っているが扱うには慣れが必要） 
- プレーン矩形 : 0 px

上記は作ったものとして進めます。

<details><summary>*Component Tips*</summary><div>

### Master Component へジャンプ
子 Component を繰り返してどれが Master Component かわからなくなった場合は、右クリックして Go to Master Component を押しましょう。

### Master Component に似たオブジェクト
右クリックして Detach Instance を押してください。Frame になります。


### Q. なぜ、ボタンとカードは同じ R ではない？
細かいこだわりですが、カードの上にボタンを置く場合、カードの R の方が大きい方がよいので変えています。また、それに応じて他の矩形も変えることが多いので Component しています。
またプレーンな矩形は都度 Frame を作ることで代替可能です。角 R なしで一括で変えたいもののために作っています。

### Q. Master Component は別ページにいれなくてよい？
さては Sketch ユーザですね？
Symbol と違って、専用のページを作らなくても運用できます。
ちなみに PROTOTYPE で画面遷移を付ける時は Master Component から画面にヒモ付けると、子 Component はすべて同じ画面に遷移できるようになります。
Frame（画面）をまたいで Component を使っている時は気を付けてください。

例えば、ハンバーガーメニューを押したら、メニューを開いた画面に遷移させたり、Submit ボタンで遷移先が同じ場合などは Master Component を使って繋げると便利です。

</div></details>



## **STEP 4 : Font** 
文字ほど人に伝わった風にみえるものはありません。
**大小など文字サイズ違い**を複数作っておきましょう。

![004.gif](https://qiita-image-store.s3.amazonaws.com/0/200180/73fb8ad7-4343-6e8a-91da-cb6d417aa33f.gif)


```
1. Text Tool を選択

2. シングルクリック

3. 文字を打つ & プロパティ調整

4. Font Style を登録

5. 作成した文字を選択（個別に変えたい場合はドラック）

6. Color Style を適応
```

文字サイズは 3 くらいあればだいたい足ります。ハイパーリンクと薄い文字色などは Color Style を当てると良いです。

<details><summary>*Font Tips*</summary><div>

### 日本語を表示
デスクトップアプリか Account Settings の enable local fonts をしてください。


### Text の折り返し
Text Align の右のオプションメニュー（3 点リーダみたいなの）を押して、Auto Resize をいじってください。手動で Text Box をリサイズしたり、改行した場合、これが変わっています。

- Width : 改行以外は折り返ししない
- Hieght : Text Box に合わせて改行
- Fix : Text Box を変更しない（Text Box からはみ出るが消えない・・・）


</div></details>



## **STEP 5 : Icon**
神は細部に宿ります。
アイコンによってサービスの完成度は左右されますが、最初はダミーアイコン（四角）でもよいです。
デザイナがいない？それはやばいですね、[適当なアイコン](https://material.io/tools/icons/?style=round)を入れて採用に励みましょう。

![005.gif](https://qiita-image-store.s3.amazonaws.com/0/200180/633818e3-ae2b-e894-e5d7-265e65aa151b.gif)



```
1. Frame Tool を選択

2. 矩形サイズを作成(24 x 24 など)

4. ベクターアイコンを作成、配置

5. Create Component

6. Background を非表示（目のアイコン）
```


<details><summary>*Icon Tips*</summary><div>

### Q.なぜ、矩形サイズを作ったのか？
Component を作る上で、繰り返しやすくするためです。
またアイコンをデザインしているとそれぞれの大きさや線の細さ、センタリングされているかなどが後々気になってきます。
矩形内でアイコンを調整すれば、margin や位置調整をしなくて済みますのでアイコンのサイズは統一しておくと早いです。
デメリットとしては書き出しの際、アイコンファイル自体の余白が生まれて重くなります。
</div></details>


## **STEP 6 : Button**
そろそろ単純作業に飽きてきたでしょうか。
ここからは各ステップで作成したものを組み合わていきます。
色や文字、外形線を組み合わせてボタンを作ります。
せっかくですからレスポンシブ？なパーツを作っていきましょう。

![006.gif](https://qiita-image-store.s3.amazonaws.com/0/200180/c32591e1-4bd9-6166-7f66-9e1e39673d6e.gif)

```
1. ボタン用 Shape をコピペし、リサイズ

2. Color Style を適応

3. 文字を配置

4. Create Component

5. 文字の CONSTRAINS を調整（Left & Right , Top & Bottom など）
```

ボタンのサイズに応じてテキストエリアが変更されるだけでよければ上記で終了です。
テキストボックスによって文字をトリミングしたい場合は以下を試してみてください。

![007.gif](https://qiita-image-store.s3.amazonaws.com/0/200180/e73d42ac-3e4f-baec-7974-4e6f4deacd41.gif)


```
6. 文字をグループ化し、Properties Panel のプルダウンメニューから Frame 化

7. 文字（ Frame )の CONSTRAINS を Left & Right , Top & Bottom 
```


<details><summary>*CONSTRAINS Tips*</summary><div>

### CONSTRAINS
これは触って確認する方が早いと思います。

- Left : 左の margin を維持してほしいとき
- Right : 右の margin を維持してほしいとき
- Left & Right : 左右の margin を維持してほしいとき
- Center : Frame または Conponent の中央に配置したいとき
- Scale : リサイズに合わせて拡大縮小してほしいとき

これらは複数の Frame または Conponent で重ね掛けや組み合わせることができるので、ブレイクポイントがない拡大縮小であればだいたい作ることができます。
（例えばアイコンは固定サイズでシークバーが可変の動画再生 UI など）

特にスマートフォンのデザインでは役に立ちます。



</div></details>




## **STEP 7 : Form**
ここまでくれば Figma の基本的な使い方はマスターしたも同然です。次の次元に進みましょう。
ボタンと文字入力フォームは形が似ているので、先ほど作ったボタンを流用します。

![009.gif](https://qiita-image-store.s3.amazonaws.com/0/200180/ad937794-c8ad-ac71-99f5-ad561c1a9cb3.gif)


```
1. ボタン Component をコピペ

2. 右クリックして Detach Instance

3. 文字の Color Style を調整

4. レイヤーパネルから、Component パネルへ

5. option を押しながらフォームの外形線をドラッグアンドドロップ

6. Color Style を適応(必要に応じて STROKE もつける) 

7. 文字を調整

8. Create Component
```

文字入力欄ができたでしょうか。
おっと、アイコンがあるフォームも作りたい？

![010.gif](https://qiita-image-store.s3.amazonaws.com/0/200180/592a4a71-f7f6-8832-dcd8-bd1f51904e6e.gif)

```
9. Form をコピペ

10. 右クリックして Detach Instance

11. テキストの位置、 CONSTRAINS を調整

12. アイコンを配置、 CONSTRAINS を調整

13. Create Component
```



## **以降に関して**
ここまでくれば後は Component の組み合わせや組み換えです。
[Material Design](https://material.io/design/components/cards.html) などを参考に UI パーツを作ってみてください。
その他にも必要な UI Component があったらぜひコメントで教えてください。

操作面で困ったら日本語で相談できる、**[Figma コミュニティ](https://join.slack.com/t/figma-jp/shared_invite/enQtNDQ1NjgzMDE3MjgxLTQ1NDUwZGE1YWZjMzIxNjYzNjQ5YTcxMTI1ZDA4OGUzYWRlMGMxNGI2ZWRiYjUwZjI2ZTBiNjg0YjcxN2QwYjE)** があります。
ぜひ Join してください！




# **終わりに**
ステークホルダーがデザインをきちんと理解していれば、戦略やバリュープロポジション、ユーザ調査に注力できますし、運用されている間に UI の改善など、**よりスペキュラティブで、本質的なデザインにフォーカスできます**。

そのためにも **共同で作成できる [Figma](https://www.figma.com/)** はツールとしてとても可能性を秘めています。
これを機会に何らかのプロジェクトで、ご使用いただく一つの選択肢になれば幸いです。なんなら一緒に使いましょう！




# **おまけ**

## 使用したファイル
以下 URL から実際のファイルを見ることができます。(若干変更しました)
興味がある方は、Sign In して触ってみてください。
なお View Only ファイルでも、Deplicate to your Drafts を押すと、編集できます。

**https://www.figma.com/file/bB3Eft1qYDwvtEeao7eBuUBf/Atomic-Design?node-id=0%3A1**


![011.gif](https://qiita-image-store.s3.amazonaws.com/0/200180/bb2f6e61-cabb-0076-4237-02ba1257d381.gif)

<img width="434" alt="スクリーンショット 2018-12-25 10.49.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/200180/eb919c62-745e-14ba-d167-a359094b20ef.png">


## **Atomic Design 以前の、DESIGN について**
全体感を理解しないまま UI デザインできるのが Figma の利点でもあるのですが、あまりおすすめしません。
よほどセレンディピティが高いか、宗教上の理由、または VC にお尻を叩かれていない限り、全体像を共有してからの方が手戻りが少ないです。

そのためにも下記のような各種キャンバスやマップを練習しておき、Figma ファシリテーターとして、**プロジェクトの初期段階から参画** してください。

- チームビルディング（[Figma を触ってもらう時間](https://www.figma.com/proto/QAFFxXKf3qmqnU5783dUmb/whats-Figma?scaling=contain&node-id=42%3A23)を取りましょう）
- [リーンモデルキャンバス](https://leanstack.com/is-one-page-business-model)
- [バリュープロポジションキャンバス](https://strategyzer.com/canvas/value-proposition-canvas) 
- [サービスブループリント](https://u-site.jp/alertbox/service-blueprints-definition)
- カスタマージャーニー / UX マップ
- [デザインスプリント](https://www.gv.com/sprint/#design-sprint)
- インセプションデッキ



言うまでもありませんが、現場は多様なので全ての組織に効果的なプロセス、ツールはありません。
しかし **Figma は一貫して使えます。**



## **Atomic Design 解説や意義、メリットデメリット**
下記を参照ください。

- [Atomic Design に学ぶ Web 開発をハッピーにするデザイン手法](https://qiita.com/usako/items/10ea7340f1a0b23a7b8b)
- [Atomic Design & Design Systemsをお話させて頂きました](https://yory.design/note/dmm-designsystems/)