Principleはインタラクションデザインツールで、デジタルデザインとプロトタイプを活き活きとしたものにすることができます。

スクロールやスワイプ、複数状態の管理、カスタムアニメーションおよびすばらしくスムーズなトランジションの作成など、豊富なインタラクションを利用できます。Principleの詳細。

FigmaをPrincipleアカウントに接続すると、Figmaから簡単にデザインをインポートでき、高度なアニメーションの作成を始めることができます。

FigmaとPrincipleを使用して、デザインに本物のような外観と雰囲気を持たせることができます。

この記事では、次の操作を行う方法を説明します。

1. FigmaとPrincipleの接続
2. Figmaからのデザインのインポート
3. PrincipleからのFigmaアカウントの接続解除

FigmaとPrincipleの接続

FigmaとPrincipleを接続するには、両者で作成されたアカウントが必要です。現在、PrincipleはmacOSでのみ利用できます。

初めてFigmaからデザインをインポートする場合は、接続を許可するためのFigmaアカウントの詳細情報の入力を求められます。これは[Figmaからインポート]オプションを初めて使用するときだけです。

1. Principleを開きます。
2. メインメニューの[ファイル]に進んで[Figmaからインポート]を選択します。
3. または、[インポート]ボタンをクリックします。
4. オプションから[Figma]を選択します。
5. [Figmaに接続]ボタンをクリックします。
6. ブラウザウィンドウが開きます。ログインしていない場合は、Figmaアカウントへのログインを求められます。
7. [アクセスを許可]をクリックして確定します。
8. Principleに戻るようにダイアログボックスに表示されます。

   注: すぐにPrincipleにリダイレクトされない場合は、認証ウィンドウを閉じてPrincipleにもどってもかまいません。そのように見えなくても正常に接続されています。

Figmaからのデザインのインポート

2つのアプリケーションが接続されたので、デザインを直接Principleにインポートすることができます。注: ファイルをFigmaからPrincipleにエクスポートすることはできません。

ファイルのページからすべてまたは選択したフレームをインポートできます。

1. Principleを開きます。
2. メインメニューの[ファイル]に進み、[Figmaからインポート]を選択します。
3. または、[インポート]ボタンをクリックします。
4. オプションで[Figma]を選択します。
5. 所定のフィールドでドキュメントを選択できるようになります。すべての最近編集したファイル
   
   が表示されます。

   注: マルチプレイヤーを使用していたファイル(たとえば、複数の編集者がコラボレーションしているファイル)は、[最近編集したファイル]の候補の中で優先されます。

   

6. ページのすべてのフレームをインポートするには、[ページをインポート]をクリックします。
7. [選択したフレームをインポート]をクリックすると、Figmaで現在選択されているすべてのフレームがインポートされます。
   
   

   注: この時、Figmaに移動して、インポートするファイルを選択することもできます。Principleでの選択が更新されます。

8. ステータスメッセージに、レイヤーがFigmaによって現在描画中であることが表示されます。
9. 描画が終わると、フレームはPrincipleのArtboardに追加されます。
10. 各オブジェクトは、Figmaにある場合と同様に、個別のレイヤーとして描画されます。個々のオブジェクトを、左側にある[レイヤー]パネルで選択することも、キャンバスで直接選択することもできます。

Figmaアカウントの接続解除

Principleのアカウントと結びついているFigmaのアカウントを変更したり、両者の接続を完全に解除するには、Principleで次の操作を行います。

1. Appleメニューバーの[Principle]メニューをクリックします。
2. オプションで[Figmaとの接続を解除]を選択します。
3. 再接続したり別のアカウントに接続して、インポートプロセスを再開することもできます。

FigmaおよびPrincipleでのシャドウを使用した作業

ドロップとインナーシャドウの動作は、FigmaとPrincipleで異なります。Figmaではオブジェクトのキャンバス上の位置に基づいてシャドウが描画されますが、Principleではオブジェクトそのものに基づいてシャドウが表示されます。

Principleでオブジェクトを回転すると、オブジェクトのシャドウの位置も回転します(これに対して、Figmaでは一貫性が保たれます)。