Figmaで図表をデザインするときの時短アイディア

Figmaで図表をデザインするときの時短アイディア
  • X
  • Facebook
  • note
  • hatena
  • Pocket
2023/02/06 08:00

 本連載では、SmartBankのデザイナーが「デザイナーの業務効率化」をテーマに、FigmaやNotionを活用した「業務効率改善のTips」を紹介していきます。今回焦点を当てるのは「Figmaで図表をデザインするときの時短アイディア」についてです。

 こんにちは!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化しておきます。

※この続きは、会員の方のみお読みいただけます(登録無料)。