リアルタイム共同作業できるデザインツール Figma とホワイトボードツール FigJam の 便利 Tips 集

リアルタイムにブラウザ上で共同作業ができる Figma と FigJam をよく使っています。
本記事では便利な Tips をご紹介します。良いものを見つけたら随時更新していきます。

# Figma , FigJam とは

#### Figma は[デザイン](https://www.figma.com/design/)と[プロトタイプ](https://www.figma.com/prototyping/)のためのツールです。
類似のサービスは Adobe XD や Sketch です。

<iframe width="560" height="315" src="https://www.youtube.com/embed/Cx2dkpBxst8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

#### FigJam は[ホワイトボードツール](https://www.figma.com/figjam/)です。
類似のサービスは Miro です。

<iframe width="560" height="315" src="https://www.youtube.com/embed/axDzyLEfYgU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


両方共、リアルタイムにブラウザ上で共同作業でき、3ファイルまで無料で使えます。


# 便利 Tips 集

### 学習

Figma 公式の YouTube チャンネルで学習教材や Tips がたくさんあります。
他にも日本語で解説動画を出している人が多くいますので YouTube で探してみてください。

https://www.youtube.com/c/Figmadesign


### 日本語化
**「Figma」が日本語版を発表　初の他言語への正式ローカライズ**

```
言語設定を日本語に更新する方法は次のとおりです。
figma.com にログインし、画面の右下隅にある?マークをクリックします
メニューで [言語を変更] を選択します。
ポップアップモーダルで [日本語] を選択し、[保存] をクリックします。
```
（2022-07-27 追記）


3rd Party 製のプラグインで日本語化出来るのでこちらも引き続きオススメです。

https://chrome.google.com/webstore/detail/figma-%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96/ekodckpnalonppfcddgnkoapajahbahc?hl=ja


### ショートカット

`Ctrl + Shift + ?` でショートカットが出てきます。 
`スペース` を押している間は選択アイコンと手のアイコンが入れ替わり画面内を移動しやすくなります。
`オブジェクト間をつなぐ矢印` は Figma には無いのですが FigJam コピペして持ってこれます。 

https://www.figma.com/community/file/1000770873527818995

https://www.figma.com/community/file/948411204667227139


### コミュニティ
[Figma](https://www.figma.com/@figma) / [FigJam](https://www.figma.com/@figjam) のコミュニティには、デザイン素材やディスカッション用のテンプレートが数多く準備されています。便利なものをご紹介します。

https://www.figma.com/community

### UI デザイン
#### Ant Design
https://www.figma.com/community/file/831698976089873405

#### Material UI
https://mui.com/design-kits/

#### アイコン
https://www.figma.com/community/file/834587122842084475

### UX デザイン 

#### ブレインストーミング
https://www.figma.com/community/file/964626434721506143

#### Crazy 8
https://www.figma.com/community/file/964652140702534507

#### PEST 分析
https://www.figma.com/community/file/1034554833135654575

#### コンセプトマップ
https://www.figma.com/community/file/1027005967571633904

#### リーンキャンバス
https://www.figma.com/community/file/1103312054391972491

#### ビジネスモデルキャンバス
https://www.figma.com/community/file/1028014024373154378

#### エンパシーマップ
https://www.figma.com/community/file/1027358830096634813

#### ユーザーペルソナ
https://www.figma.com/community/file/1027357893837345723

#### カスタマージャーニーマップ
https://www.figma.com/community/file/1004010456952258106

#### サービスブループリント
https://www.figma.com/community/file/1103779968600369094

#### ストーリーボード
https://www.figma.com/community/file/1035970892967340446

#### フローチャート
https://www.figma.com/community/file/964644828001526628

#### ワークフロー
https://www.figma.com/community/file/1103388157450225357

### システム構成図
#### AWS
https://www.figma.com/community/file/989585391556898521

#### Google Cloud
https://www.figma.com/community/file/989580565034038997

#### Microsoft Azure
https://www.figma.com/community/file/989576823914996434

#### UML
https://www.figma.com/community/file/999008812984283340

### チーム・タスクマネジメント

#### カンバン
https://www.figma.com/community/file/1034527112410220189

#### 朝会
https://www.figma.com/community/file/1025461733126324339

#### アジェンダ
https://www.figma.com/community/file/1026970355968683737

#### 1 on 1 ミーティング
https://www.figma.com/community/file/1025467610408328312

#### プロコン（Pros／Cons）
https://www.figma.com/community/file/1025466370171113590

#### ふりかえり
https://www.figma.com/community/file/964642284354524001