プロトタイピングのインポートとエクスポート
Figma プラグインインポート
Figma上で 「Import to Phase」 プラグインを使うことで、FigmaのデザインをPhaseにインポートできます。Figmaでインタラクティブコンポーネントを設定している場合、Phaseがそれを自動的に対応するアクションとして変換します。
アクション (インタラクション) のエクスポート
アクションを選択せずに「エクスポート」ボタンをクリックすると、Phaseは画面上の最初のアクションを自動的にアニメーションとしてエクスポートします。
アクションを選択せずに「エクスポート」ボタンをクリックすると、Phaseは画面上の最初のアクションを自動的にアニメーションとしてエクスポートします。
任意のアクションをエクスポートするには、以下の手順に従います：
- エクスポートしたいアクションが設定された要素を選択します。
- 稲妻⚡アイコンをクリックして、アクションリストダイアログから対象のアクションを選択します。
- 「エクスポート」ボタンをクリックします。
- エクスポート設定ウィンドウが表示されます。
- 「エクスポート」をクリックすると、アクションがアニメーションとして出力されます。
サポートされているエクスポート形式は次のとおりです。
- GIF：小さくてループするアニメーション向き。ウェブサイトへの埋め込みやSNS投稿に最適です。
- MP4：高品質なビデオとしてアニメーションを出力する形式です。
- Lottie (.json)：編集可能かつ軽量なアニメーション形式で、複数プラットフォームでスムーズに動作します。
- dotLottie (.lottie)：Lottieアニメーションを1つの自己完結型ファイルに圧縮した形式で、共有や導入がスムーズになります。
コードのエクスポート
インスペクトモード では、あなたのデザインをReactコンポーネント（CSS & JS） に変換して表示します。変換されたコードは、コピーしてコードベースに貼り付けることができるほか、開発者への参考資料として提供することも可能です。
プロトタイピングを始める
無料のウェブベースプラットフォームで始めます。