Figmaで作成したデザインをMiroに同期できるFigmiroを使ってみた

Figmiroを使えばFigmaで制作したデザインをMiroの画面遷移図に同期することが可能になり、frameの書き出しやMiroへの貼付、位置調整などの手作業を減らすことができます。
2021.12.03

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

画面遷移図の更新にかかる時間はジワジワと増えがち

現在私が担当しているアプリ開発のプロジェクトでは、画面デザインをFigma、画面遷移図をMiroで制作しているため、デザインの調整作業が発生するたびにMiroで遷移図の更新を手作業で行うケースが多く、遷移図の更新にかける時間もジワジワと増えがちになります。FigmaもMiroも便利で素晴らしいツールなので両方使っていきたいのですが、なるべく手作業になるものは減らしていきたいので、FigmaとMiroを同期させることができるFigmiroを使ってみました。


FigmaにFigmiroのプラグインを追加する

まずはFigmaにFigmiroのプラグインを追加します。Figmaにログイン済みのブラウザならこちらのリンクからプラグインをすぐにインストールすることができます。

FigmaからMiroに同期させたいデザインを選択する

Miroに同期させたいデザインを選択し、Main menuPluginsFigmiroの順に進みます。今回はひとつのframeで試していますが、複数選択することも可能です。また単体のオブジェクトやgroup単位でもMiroに同期することができます。

MiroでFigmiroが使えるように許可設定をする

初めてFigmiroを使う場合はMiro側で連携が許可されていないため、Log into Miroというボタンが表示されるのでタップしてMiroを開き、Figmaのデザインを同期させたいboardがあるteamを選びます。最後にInstall & authorizeボタンをクリックして許可設定は完了です。

FigmaのデザインをMiroに同期させる

Figmiroの設定ウィンドウからMiroのboardを選び、単体のframeまたは複数frameの場合はOnly selectedを選択、ファイル内のすべてを同期させたい場合はAll on the pageを選択します。

次にデータのフォーマットを選択します。選べるのはPNG JPG SVGの3種類です。

最後にSyncボタンをクリックすると、Miroのboard内にFigmaで制作したデザインが同期されます。

Figmaでデザインの調整が発生した場合、一度Miroに貼付された画像はもう一度プラグインを使ってFigmiroでframeを同期するだけで更新されるので、画面遷移図などの位置調整をやり直さずに済むなど、手作業になりがちな遷移図の作成・更新が楽になります。また、同期するデザインがframeの場合、Miro側に同期された画像のファイル名がFigmaのframe名になります。