RareJob Tech Blog

レアジョブのエンジニア・デザイナーによる技術ブログです

Figmaを使ってフロー図を書いてみた

お久しぶりです!デザイナーの渡辺です。

最近は自分が周りの人と違って
人間らしからぬ生活を送っているということに気づき
朝散歩をはじめました!
陽の光を浴びるのは大事ですね。(梅雨に入ったので休憩してます)

さて今回は業務中に、フロー図を書く機会がありましたので
せっかくならFigmaで書いてみようということで
その時どのように書いたのかを簡単にお話できればと思いますφ(..)

そもそもなんでFigmaでフロー図?

今回私がフロー図を書く際の前提として

  • 私はそこまで頻繁にフロー図を書くことはない
  • 大々的に共有するものではなく、軽く流れを提案したい程度
  • 使いやすければチーム内などで提案するというのあり

というとこから始まりました!
なので正直見やすいものが作れるならツールは何でも良かったです!

Figmaを選んだ理由としては
「見栄えのよさげなプラグインがありそう」
という理由です笑

色々見て選んだのは「Omnichart」というファイルです。
今回はプラグインではなくファイルを選んでます!

さっそく使ってみる

Communityから「Omnichart」を検索してDuplicateボタンをぽち。

f:id:yui_1027:20210623120946p:plain

ファイルが複製されるので開いてみます。

f:id:yui_1027:20210623121248p:plain
コンポーネント
f:id:yui_1027:20210623121311p:plain
フロー図とサイトマップの例

Omnichartにはコンポーネント集と
それを使って作ったフロー図とサイトマップの例が入っています。

もうこれコピーして中身変えれば終わりじゃん
そんな感じでサクッと作れてしまいました(゚∀゚)!

f:id:yui_1027:20210623120716p:plain
フロー図の一部

Omnichartのよいところ

基本的にカラー、パーツがコンポーネント化されているので
有料化しているチームにこのファイルを置き
assets→Librariesに登録してしまえば
チーム全員が同じカラー同じ見た目のフロー図が簡単に作れるというところですね!

f:id:yui_1027:20210623121631p:plain

コンポーネント化されているのでカラー変更や形状変更は簡単なので
Figmaに慣れていない方でも触りやすいのではないかなと思います!
カラーも決められている分、 「作る人によって色が違う!」ということになりません。

また、フロー図だけではなくサイトマップも作れるので
実際に作ったデザインとサイトマップを連携させるということも可能です。

Omnichartの注意点

Omnichartはファイルなので有料化されたチームでなければ
コンポーネントを共有できないという点と
ファイルの複製時にコンポーネント化されているパーツは一部になっているので
必要なパーツはチーム単位で1つ1つコンポーネント化する必要があるというところです。

コンポーネント化に関しては、1度やってしまえば終わりですので
少しめんどくさいのですが、やってもよいのかなと思います!

ただ、有料化に関しては使う場面によっては
難しい場合もあるので良し悪しは分かれそうです(._.)ムムム

まとめ

私個人としてはOmnichartを使うことでフロー図の見栄え統一、
サイトマップとのデザインの連携などメリットはあるものの
有料化しないと使い勝手は悪いという結論になりました。

ただ、我々デザインチームは有料チームを使用しているので チーム間での作成は問題なく、
業務効率を上げるためのフロー提案に使っていこうと思いました!

有料化チームがすでにある方は
デメリットはそんなにないと思うので一度試して見てはいかがでしょうか?
他にもよいプラグインやファイルがあるぞー!という方は
教えてくださると嬉しいです(`・ω・´)ゞ

Figmaについてはレアジョブアピールや
他のデザイナーも触れているのでそちらもご覧ください。

appeal.rarejob.co.jp

rarejob-tech-dept.hatenablog.com

それではノシ