FlowstepとFigmaは競合ではなく、互いを補完するツールです。Flowstepでは UI デザインのアイデアをすばやく生成して検討し、Figmaでは仕上げ、共同編集、本番に使える成果物の作成を行います。両方を一緒に使うと、それぞれの長所を活かせます。
FlowstepのデザインをFigmaにコピーする方法
1
Flowstepで1つ以上の画面を選択する
画面をクリックして選択します。複数の画面をまとめて選択して、一度にコピーすることもできます。キャンバス上で選択が強調表示されていることを確認してください。
2
選択範囲をコピーする
Mac では **Cmd+**⇧+C、Windows では **Ctrl+**⇧+C を押します。処理中は「Preparing your design. Stay on the current tab.」（デザインを準備しています。現在のタブに留まってください）と表示されます。コピーはまもなく完了します。
3
Figmaファイルに貼り付ける
Figmaに切り替えて、デザインを配置したいファイルを開きます。Mac では Cmd+V、Windows では Ctrl+V を押して貼り付けます。Flowstepの画面がFigmaのキャンバスに表示され、そのまま編集できます。
Figmaへのコピーにはブラウザーのクリップボードを使うため、ブラウザーでFlowstepによるクリップボードへのアクセスを許可しておく必要があります。権限エラーが表示された場合は、ブラウザーの設定でクリップボードへのアクセスを許可してから、もう一度お試しください。コピーの途中でタブを切り替えると転送が中断されます。コピーが完了するまで、Flowstepのタブを開いたままにしてください。
Figmaからデザインを取り込む
逆方向に、Figmaのフレームを編集可能な画面としてFlowstepに取り込むこともできます。取り込みはすべてのユーザーが利用できます。Figmaアカウントを一度接続すれば、フレームのリンクから取り込めます。1
Figmaを接続する
設定から、FigmaアカウントをFlowstepに接続します。Flowstepは、Figmaの認可を使って、あなたがアクセスできるファイルを読み取ります。
2
Figmaでフレームのリンクをコピーする
Figmaで対象のフレームを右クリックし、Copy link to selection を選択します。ページ全体のリンクをコピーすると、そのページのトップレベルのフレームをまとめて取り込めます。
3
Flowstepに取り込む
Flowstepのツールバーで Figma の取り込みオプションを使い、リンクを貼り付けます。Flowstepはフレームをキャンバス上の編集可能な要素に変換します。取り込むたびに新しい画面が追加されます。同じフレームを再度取り込んでも、以前の取り込み結果は置き換えられません。不要になった古い画面は削除してください。
取り込まれる内容
Flowstepは、Figmaのフレームを平面の画像ではなく、ネイティブで編集可能な要素として再現します。取り込みでは次の内容が引き継がれます。- フレームとそのネストされたレイヤー
- テキスト（文字ごとのスタイル（太さ、色、太字など）を含む）
- Figma の変数に設定された色
- 画像の塗りつぶし、SVGアイコン、図形
- ドロップシャドウとインナーシャドウ、レイヤーとバックグラウンドのぼかし
- 破線と点線のストローク
ファイルの組織でFigmaが接続されている必要があります。フレームを取り込めない場合、Flowstepは次に取るべき対応を示すメッセージを表示します。例えば、認可の期限が切れている場合はFigmaを再接続し、Figmaがレート制限中または応答が遅い場合は待ってから再試行します。Communityテンプレートの場合は、先にチームに複製してから新しいリンクを貼り付けてください。