FlowstepとFigmaは相互補完的なツールであり、競争相手ではありません。Flowstepはユーザーインターフェースのデザインアイデアを急速に生成し、探索するのに役立ちます。Figmaは洗練され、協力し、本番環境対応の作業を構築する場所です。両方を一緒に使用することで、双方の最良の点が得られます。
Flowstepのデザインを Figma にコピーする方法
1
Flowstepで1つ以上の画面を選択する
画面をクリックして選択するか、複数の画面を選択してそれらをすべて一度にコピーします。選択がキャンバスで強調表示されていることを確認します。
2
選択をコピーする
Macで **Cmd+**⇧+C を、Windowsで **Ctrl+**⇧+C を押します。Flowstepは「Preparing your design — stay on this tab and keep the screen selected」と表示され、作業中です。コピーはしばらくで完了します。
3
Figmaファイルに貼り付ける
Figmaに切り替えて、デザインを配置するファイルを開きます。Macで Cmd+V、Windowsで Ctrl+V を押します。Flowstepの画面がFigmaキャンバスに表示され、編集可能な状態になります。
Figmaへのコピーはブラウザのクリップボードを使用するため、ブラウザはFlowstepのクリップボードアクセスを許可する必要があります — パーミッションエラーが表示された場合は、ブラウザ設定でクリップボードアクセスを許可し、もう一度試してください。コピー中にタブを切り替えると転送が中断されます。コピーが完了するまでFlowstepタブにフォーカスを当てたままにしてください。
Figmaからデザインをインポートする
逆方向に行き、FigmaのフレームをFlowstepに編集可能な画面として持ち込むこともできます。インポートはすべてのユーザーが利用でき、Figmaアカウントを1回接続してから、フレームリンクからインポートします。1
Figmaを接続する
設定からFlowstepにFigmaアカウントを接続します。Flowstepは、Figmaの認可を使用して、アクセス権のあるファイルを読み取ります。
2
Figmaでフレームリンクをコピーする
Figmaで、インポートしたいフレームを右クリックして Copy link to selection を選択します。ページ全体へのリンクをコピーして、すべてのトップレベルフレームを一度にインポートすることもできます。
3
Flowstepにインポートする
Flowstepツールバーの Figma インポートオプションを使用して、リンクを貼り付けます。Flowstepはフレームをキャンバス上の編集可能な要素に変換します。同じフレームを再度インポートすると、その場で更新されます。
インポートされるもの
Flowstepは、Figmaのフレームをネイティブで編集可能な要素として再構築します — フラットな画像ではありません。インポートは以下の内容をもたらします：- フレームとネストされたレイヤー
- テキスト（ウェイト、色、太字などの文字ごとのスタイル含む）
- Figma変数からの色
- 画像フィルとSVGアイコン、図形
- ドロップシャドウ、内側のシャドウ、レイヤー、背景ブラー
- ダッシュしたおよび点線のストローク
ファイルの組織には Figma が接続されている必要があります。フレームがインポートされない場合、Flowstepは何をすべきかを指示するアクション可能なメッセージを表示します — 例えば、認可が期限切れの場合は Figma を再接続、Figmaがレート制限または応答が遅い場合は待機して再試行、またはコミュニティテンプレートの場合はまずチームに複製して新しいリンクを貼り付けます。