こんにちは！SmartBankのデザイナーをしている春山（@yuki930）です。
私たちは、B/43というVisaプリペイドカードと家計簿アプリがひとつになった「家計簿プリカ」という新しいジャンルのサービスを運営しています。
第2回では、「Figmaで図表をデザインするときの時短アイディア」をテーマに、Figmaでフロー図やグラフを作るときの工夫をご紹介します。
Figmaで効率よくフロー図を作る
最初は、次のようなフロー図を効率よく作るためのアイディアについて、B/43のユーザーインタビューページに掲載している「お金のふたりの家計管理マップ」の図を例に説明します。
複数回利用するパーツはComponent化する
複数回利用するパーツをComponent化することで効率をアップさせることができます。汎用性を高めるため、名前やアイコンの差し替えが可能な形でComponent化してみましょう。
最初に、アイコンをComponent化しておきます。80x80のFrameを作り、アイコンを真ん中に置いてComponent化します。
すべてのアイコンを、それぞれComponent化しておきます。
次に、アイコンとタイトルが入った要素を作成し、Component化しましょう。まずはFrameを作成します。先ほどComponent化したアイコンを［⌘D］で複製して配置します。タイトルも打ち込み、パーツを仕上げます。
パーツができたら［Frame］を選択した状態でComponent化します。
Component内の要素を置き換えられるようにする
このComponentを、右側のプロパティパネルからPropertyの変更が可能なComponentにしていきます。
まずはアイコンを差し替えられるようにしましょう。作成したComponentをダブルクリックしてアイコン部分を選択し、右側のプロパティパネルから［Create instance swap property］ボタンをクリックします。
Nameはなんでも構いませんが、今回はIconとしました。そのあと［Create property］をタップします。
次に、タイトル部分を差し替えられるようにしていきます。作成したComponentをダブルクリックしてテキスト部分を選択し、右側のプロパティパネルから［Apply text property］ボタンををクリックします。
こちらのNameも任意の文字で構いません。今回はTitleとしました。
ここで、差し替え可能になっているか確認してみましょう。作成したComponentを［⌘D］で複製し、子Componentを作成します。複製した子Componentを選択した状態で右側のプロパティパネルを見ると、IconとTitleという項目が表示されており、Iconの差し替えやTitleの変更が可能になっていることがわかります。
その他の複数回使うパーツも同じ手順でComponent化しておきます。
