Figmaからインポート

Send to VibrはFigmaのプラグインです。Figmaで開いているファイル（バリアブル、スタイル、コンポーネント、フレーム、プロトタイプのリンク）を読み取り、1つのファイルとして保存します。Vibrはそのファイルをインポートし、あなたのデザインシステムとモデルで構築します。

プラグインをインストールする

Figmaで プラグイン メニューを開き、Send to Vibr を検索して実行します。プラグインは、スタータープランを含むすべてのFigmaプランで使えます。

送る内容を選ぶ

プラグインは、ファイル全体から1つの要素まで、選んだ範囲を送ります。

• ファイル全体： 各ページのプロトタイプフロー、フローがなければ画面を、ページごとに送ります。カバー、サムネイル、区切りのページはスキップされます。
• 何も選択していないページ： そのページのフロー、フローがなければすべての画面を送ります。
• セクション： その中のフレームを、それぞれ画面として送ります。
• フレーム： その画面を送ります。
• 要素： コンポーネント、インスタンス、またはフレーム内の任意のレイヤーです。Vibrはそれを再利用できるコンポーネントとして単独で構築します。

送りたいものを選択するか、プラグイン上部の This page or selection または Whole file を選びます。プラグインに送る内容が一覧表示されます。組み合わせることもでき、画面1つと要素2つをまとめて送れます。

その下で、一緒に送るものを選びます。

• Screens and elements, with layout and prototype links と Include frames they link to を選ぶと、フローがそろって届きます。その中の写真も、デザインで表示されているとおりに切り抜かれて一緒に届きます。
• Variables, text styles and shadows：ファイル全体から送ります。
• Components：バリアントも含めて送ります。画面で使われているものが先に並びます。

1つのファイルには、画面と要素を合わせて12件、写真を12件、コンポーネントを80件、バリアブルを1,500件まで含められます。

ファイルを保存する

Save file for Vibr を選択します。プラグインは.vibr-figma.jsonで終わるファイルを保存します。Copy を選ぶと、同じ内容がクリップボードにコピーされます。

Vibrにインポートする

入力欄で + を選択し、Figmaからインポート を選んでファイルを選びます。ファイルを入力欄にドロップするか、Copy でクリップボードにコピーした内容を貼り付けることもできます。

ダイアログには、Vibrが作成するものが一覧表示されます。不要なものはチェックを外します。

• バリアブルから作るカラーテーマ：ライブラリに追加されます。
• タイプランプ：フォントファミリーごとに1つ作られ、ライブラリに追加されます。
• フレームの写真：アップロードした画像と同じようにライブラリに追加され、画面に実際の写真が表示されます。
• 作成する画面と要素：フローでたどる順に並びます。

構築 を選択します。Vibrは各画面を個別のリクエストとして、あなたのデザインシステムとモデルで構築し、フレーム名で保存してから次の画面に進みます。入力欄の上のバーに、構築中の画面が表示されます。停止 を選ぶと実行が終了し、構築済みの画面は残ります。

実行が終わると、Vibrは最初の画面を開きます。再生 を選択して、フローをクリックして確認します。フローをご覧ください。

同じファイルをもう一度インポートすると、最初のインポートで作成したテーマとタイプランプが再利用されます。

何が何になるか

Figma	Vibr
カラーバリアブル	カラーテーマ。Brand/500のようなスケールやcolor/clayのような短い名前がテーマの色になります。Vibrはそこからライトとダークの役割を作成し、コントラストを確認します。
角の半径と間隔のバリアブル、シャドウスタイル	テーマの角丸、余白の単位、影。
テキストスタイル	フォントファミリーごとのタイプランプ。サイズ、ウェイト、行の高さ、文字間隔を含みます。Google Fontsにあるフォントは、Google Fontsから読み込みます。
画像の塗り	ライブラリの写真。レイヤー名から名前が付けられ（Photo: latte pourというレイヤーは@image/latte-pourになります）、画面で使われます。
フレーム	画面。モデルには、フレームの画像と、レイヤーのアウトライン（オートレイアウト、テキスト、コンポーネント、各レイヤーが使うトークン）が渡されます。
プロトタイプのリンク	画面同士のリンク。「戻る」は前の画面に移動します。オーバーレイは、それを開く画面の中にダイアログやシートとして組み込まれ、独自のリンクを持ちます。
コンポーネント	コンポーネントとそのバリアントをモデルに伝え、デザインシステムの対応するパーツで構築します。
要素	単独で構築され、ページの中央に配置されるコンポーネント。

プライバシーと安全性

• プラグインはネットワークにアクセスしません。保存したファイル以外、Figmaの外に出るものはありません。
• Vibrはファイルを読み込む前にチェックします。テキストはプレーンテキストとして取り込まれ、隠し文字は取り除かれます。すべての値はチェックされ、サイズが制限されます。各画像は、Vibrが開けるサイズの本物の画像である必要があり、Vibrはそれを描き直してメタデータを取り除きます。写真は、アップロードと同じチェックを経てライブラリに追加されます。テキストは、入力したリクエストと同じコンテンツチェックを通ります。
• ファイル内のものが実行されることはありません。ファイルのテキストは、添付したドキュメントと同じように、デザインの素材として各リクエストとともにモデルに送られます。キー、プライバシー、ストレージをご覧ください。

ヒント

• フレームには、画面に付けたい名前を付けます。Checkoutというフレームは@screen/checkoutになります。
• 大きなファイルでは、ファイル全体ではなく、ページか選択範囲を送ります。
• 実行後は、「カートをボトムシートにして」のような通常のリクエストで、どの画面でも調整できます。