コンポーネントライブラリをインポートする

Pixso では、Sketch と Figma のコンポーネントライブラリをインポートできます。これらのツールで作成したライブラリと、そのコンポーネントを使用するデザインファイルを一緒に移行できます。インポート後も、デザインファイル内のインスタンスはライブラリの更新を受け取れます。ライブラリとデザインファイルの関係を維持したまま、Pixso へ移行するための機能です。

1. Sketch のリソースをインポートする

1.1 操作の開始と事前準備

1. ワークスペースの「コンポーネントライブラリのインポート」をクリックすると、ダイアログが開きます。

2. 最初に、ライブラリを取り込むチームを選択します。リソースを正しく連携させるため、次の点を確認してください。

• インポートしたコンポーネントライブラリは、選択したチーム内で使用します。対応するデザインファイルも同じチームにインポートしてください。
• ライブラリの重複を避けるため、同じチームに同一ライブラリの複数のブランチやコピーを取り込まないでください。インポートするライブラリが、実際に使用しているバージョンであることを確認してください。
• チームライブラリをインポートできるのはチーム管理者です。デザインファイルの取り込み時にライブラリが見つからない場合は、チーム管理者に連絡してください。
• コンポーネントライブラリとデザインファイルのインポート順序に指定はありません。

1.2 Sketch のコンポーネントライブラリをインポートする

チーム管理者は、次の手順でライブラリをアップロードできます。

1. ダイアログで対象のチームを確認し、「Sketch コンポーネントライブラリ」を選択してファイルを指定します。複数のファイルをまとめてインポートできます。

2. インポートしたライブラリは、チームのリソースライブラリとして自動的に公開されます。同じチーム内で、そのコンポーネントを使用する Sketch ファイルと連携します。

注意：同じチームに、ライブラリの複数のブランチやコピーをアップロードしないでください。同一ファイルが存在する場合は、次の操作を案内するメッセージが表示されます。

1.3 Sketch のデザインファイルをインポートする

チーム内の編集者は、Sketch のデザインファイルをインポートできます。ライブラリとデザインファイルを移行する場合は、次の手順で進めます。

1. 「Sketch デザインファイル」を選択し、インポートするファイルを指定します。

2. 対応する Sketch ライブラリがチーム内で連携済みの場合は、インポートしたデザインファイルを開き、インスタンスを選択します。「メインコンポーネントへ移動」をクリックすると、対応するライブラリを開けます。ライブラリへのアクセス権限が必要です。

3. ライブラリファイルに更新がある場合は、右下に通知が表示されます。

4. 「表示」から変更内容を確認し、「更新」をクリックして反映します。

2. Figma のリソースをインポートする

2.1 事前準備と操作の開始

（1）事前準備：

• Google Chrome を使用し、エクスポート用のブラウザー拡張機能をインストールします（ダウンロードリンク）。

• ブラウザー右上の三点メニューをクリックします。

「拡張機能」から「拡張機能を管理」を選択します。開いた画面の右上で「デベロッパーモード」を有効にします。

ダウンロードした拡張機能の ZIP ファイルを、その画面にドラッグします。

• 下図のようなカードが表示されたら、インストールは完了です。

注意：インストール後は、エクスポートする前に Figma のファイルを再読み込みしてください。

2.2 インポート前の確認

1. Pixso ワークスペースの右上にある「コンポーネントライブラリのインポート」をクリックし、「Figma」タブに切り替えます。先に Figma からコンポーネントライブラリとデザインファイルをダウンロードしておいてください。

注意：ここでいう Figma コンポーネントライブラリは、Figma でチームライブラリとして公開した、共有コンポーネントやスタイルを含むファイルです。デザインファイルは、それらのチームリソースを使用するファイルです。メインコンポーネントとインスタンスの両方を含むファイルは、コンポーネントライブラリとしてインポートしてください。

2. インポート前に、次の点を確認してください。

• ライブラリを取り込むチームを選択します。連携先を正しく指定することが重要です。
• チームライブラリをインポートできるのはチーム管理者です。
• ライブラリにはスタイルを含めてください。スタイルがない場合、インポート後にインスタンスと連携できないことがあります。そのため、ライブラリにスタイルを作成しておくことをおすすめします。
• Pixso はファイルの重複を確認します。同じファイルがチーム内にある場合は、スキップするか上書きするかを選ぶメッセージが表示されます。

2.3 Figma のコンポーネントライブラリをインポートする

チーム管理者は、対象のライブラリをドラッグするか、クリックして選択し、画面の案内に従ってインポートします。

インポートしたライブラリはチームのリソースライブラリとして公開され、同じチーム内で、そのコンポーネントを使用する Figma のデザインファイルと連携します。

2.4 Figma のデザインファイルをインポートする

チーム内の編集者は、Figma のデザインファイルをインポートできます。ライブラリとデザインファイルを移行する場合は、次の手順で進めます。

1. 「Figma デザインファイル」を選択し、インポートするファイルを指定します。

2. 対応する Figma ライブラリがチーム内で連携済みの場合は、インポートしたデザインファイルを開き、インスタンスを選択します。「メインコンポーネントへ移動」をクリックすると、対応するライブラリを開けます。ライブラリへのアクセス権限が必要です。

3. ライブラリファイルに更新がある場合は、右下に通知が表示されます。

4. 「表示」から変更内容を確認し、「更新」をクリックして反映します。