SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

共同作業に最適なプロトタイピングツール「Figma」入門

【Figma勉強会の資料も紹介】プロトタイピングツール「Figma」を現場で使いこなすための取り組み

共同作業に最適なプロトタイピングツール「Figma」入門 第4回

  • X ポスト
  • このエントリーをはてなブックマークに追加

独自プラグインの開発

 Figmaの標準機能だけでも十分ですが、プラグインを利用するとより幅広いカスタマイズが可能になります。さらにブリューアスでは、デザイナーとエンジニアが協力し必要に応じて独自プラグインを開発し取り入れることで効率化を図っています。

なぜ、独自プラグインが必要なのか?

 すでにさまざまなプラグインが公開されているので、必要なものは大概見つかるのですが、既存のプラグインだと少し使いづらかったり、どうしても痒いところに手が届かないことがあります。

 それがFigmaの性質上プロトタイプから業務を行う上で複数のパターンを用意する場合や、日々の業務で多く発生する単純な作業の場合、ひとつひとつにかかる時間はわずかでも、積もり積もって多くの時間を費やすこととなり、工数を圧迫してしまいます。

 また、独自の業務フローを採用しているため目的を達成できるプラグインがないFigmaのポリシー上公開プラグインではなく非公開のプライベートプラグインでないと使えないなど、さまざまな理由で見つからないことがあります。

 実際に現場の意見を元に公開したプラグインをいくつか紹介します。

規則性のないインスタンスやコンポーネント、フレームの名前を一括変換する時につかえる「Multi Renamer」

 一度に複数のインスタンスやコンポーネント、フレームの名前を変更したい時、規則性がなく、Figma上では置換しづらいことがあります。

 このプラグインでは、対象の名前をリスト化してエクスポートできるので、テキストエディタやエクセルに貼り付けて対象の名前を変更することができます。

テキストエディタに貼り付ければ範囲選択や正規表現を利用した置換も可能
テキストエディタに貼り付ければ範囲選択や正規表現を利用した置換も可能

ペンディングになったデザインに、ワンクリックでマスクとメモを設置できる「Don't Need」

 弊社では、プロジェクトを進行する中で作成したデザインが一旦必要なくなった場合、マスクをかけてその旨をテキストで記載する運用ルールがあります。

 このプラグインでは、その作業をワンクリックで完了できます。

1画面ずつマスクを作成してテキスト記入する手間を解消
1画面ずつマスクを作成してテキスト記入する手間を解消

自作のコンポーネントセットの担当者名や更新日時を簡単に変更することができる「Status Changer」

 前ページのデザインの運用ルールで説明したように、エンジニアが一目でデザインの進行状況を把握できるようにデザイン作成ステータスを設置しています。

 このプラグインを利用すると、ステータスを変更した際に変更日時と担当者名を一括で変更できます。

変更日時と担当者名の更新作業の時間を短縮
変更日時と担当者名の更新作業の時間を短縮

 こちらで紹介したFigmaのプラグインの開発秘話やTipsを「Brewusマガジン」で紹介しているので、よろしければご覧ください。

おわりに

 Figmaの魅力や現場での使いこなし方をお伝えしてきましたが、いかがでしたか? この連載がみなさんの、Figmaを導入する切っ掛けや、一助となれば幸いです。

 ブリューアスでは、Figmaを本格的に導入してから、まだ1年と少ししか経っていません。更新頻度が高く、どんどん使いやすく多機能になっているFigma。運用しながらよりよい活用方法を見つけていきたいと思います。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
共同作業に最適なプロトタイピングツール「Figma」入門連載記事一覧

もっと読む

この記事の著者

株式会社ブリューアス UIデザインTEAM(カブシキガイシャブリューアス UIデザインTEAM)

株式会社ブリューアス  スマホアプリ開発を中心にUIUXデザインからWeb制作まで、多様な技術力と実績を持つ開発会社です。BtoBからBtoCまで幅広い領域での制作・開発経験があります。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/16016 2022/07/15 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング