Open1

FigmaでAWSのアーキテクチャ図を書く

ioio

Figma歴

デザインの感度が高いフロントエンドエンジニアに使い方を教えてもらい、2021年からFigmaを愛用しています。といってもUI開発を念頭に置いてコンポーネントを緻密に作っているわけではなく、スライドやモックなど人に説明するためのデザインツールとしてライトに多用しています。

作ったもの

今回、Figmaを利用して以下の個人開発アーキテクチャ図を作成しました。

AWSのアーキテクチャ図作成ツール

AWSの公式サイトでは基本となるマインドセットやツールが紹介されいています。
AWSのアーキテクチャ図を描く方法

様々なサードパーティ製ツールがあり、Figmaのページに飛ぶと、FigJamの中に簡単な作り方や例、アイコンが並んでいます。

アイコンはいいとして、例はこれじゃない感。

参考となるアーキテクチャ図

そこで、有名企業のアーキテクチャ図をお手本にしたいと思いました。
Findyの技術選定に関わる特集記事ではAWS以外にも沢山の企業のアーキテクチャ図が紹介されています。

今回はAWSのサービス以外も入れたかったため、マネーフォワード社の図を手本にしました。