コンポーネント

コンポーネントとは、デザインの中で繰り返し使うことができるUI要素のことです。コンポーネントを使うことでコストを下げ、効率を上げることができます。

(1) . 再利用可能なコンポーネントの作成

任意のオブジェクトやレイヤーからコンポーネントを作成することができます。コンポーネントは、シェイプ、ボタン、テキストのように単純なものから、カードやメニューのように複雑なものまであります。また、カードやメニューのような複雑なものもあります。

注：コンポーネントを作成し、デザインシステムを構築すると、似ているが少し異なるコンポーネントがいくつか出てきます。 この場合、それらを管理するためにコンポーネントバリエントを作成することができます。これにより、コンポーネントライブラリが簡素化され、誰もが必要なものを簡単に見つけることができるようになります。

個別コンポーネントの作成

個々のコンポーネントを作るには、いくつかの方法があります。

1.コンポーネントとして作成したいレイヤーを選択します。

2.自分なりのやり方を選びます。

ツールバーでコンポーネントを作成します。

選択部分を右クリックし、「コンポーネントの作成」を選択します。

ショートカットキーの使用：

Mac：⌥ Option+⌘ Command+K

Windows：Ctrl+ Alt+K

3. Pixsoは、このレイヤーを特別なコンポーネントフレームにネストさせます。レイヤーパネルに表示される紫色のアイコンで、コンポーネントネットを確認することができます。

4. 右側のパネルで、説明文を追加できます。共同作業者と開発者は、検査パネルで確認することができます。

コンポーネントを一括で作成

デフォルトでは、「コンポーネントの作成」オプションは、個々のコンポーネントを作成することを意味します。しかし、Pixsoはコンポーネントを一括して作成することができます。コンポーネントを作成するには、以下の項目を選択します。

• フレーム内のオブジェクトおよびレイヤー
• グループ内のオブジェクトおよびレイヤー
• パスやベクターグリッドのような単一レイヤー
• ブール演算のレイヤー

注：上記以外の複数のレイヤーを選択した場合、Pixsoはすべてのレイヤーに対してコンポーネントを作成します。

ここでは、コンポーネントを一括で作成する方法を紹介します。

1. コンポーネントとして作成したいレイヤーを選択します。
2. コンポーネントの横にあるドロップダウンボタンをクリックします。
3. 複数のコンポーネントを作成するを選択します。

4.  Pixsoは、フレーム、グループ、ブール演算、またはパスのコンポーネントを作成します。

(2) .コンポーネントの命名と管理

コンポーネントパネル

ファイル内のコンポーネントにアクセスする最も早い方法は、コンポーネントパネルからアクセスする方法です。以下はその方法です。

左側のパネルにある「コンポーネント」をクリックします。

ショートカットキーも使えます：

Mac: ⌥ Option-2

Windows: Alt+2

コンポーネントパネルの構成

コンポーネントパネルでは、以下のようなコンポーネントにアクセスすることができます。

• ローカル・コンポーネント: 現在のファイル内で作成したコンポーネント。
• 使用されるコンポーネント: 現在のファイルで使用されている他のライブラリのコンポーネント。
• 使用可能なライブラリ: チームや組織で有効なリソースライブラリ。

コンポーネントパネルの各セクションにはタイトルがあります。 Pixsoは、有効なライブラリをすべて表示し、これらのセクションにファイル名で名前を付けます。

リソースライブラリのコンポーネントを表示

構成要素はこの順番で並んでいます：ファイル > ページ > フレーム。

関連コンポーネント

Pixsoは、コンポーネント間の関係を次のように定義しています。

名前: たとえば、Pixso は、Design/Component/Activation、Design/Component/Hover、および Design/Component/Forbidden をまとめます。

オリジナルファイルの設定: 例えば、Pixsoはフレーム内のコンポーネントを関連するコンポーネントとして捉えています。

(3) .コンポーネントインスタンスの作成

コンポーネントは、デザイン上で再利用可能なUI要素です。メインコンポーネントは要素のプロパティを定義し、インスタンスはデザインで再利用できるコンポーネントのコピーである。 インスタンスを作成するには、いくつかの方法があります。どの方法を使うかは、コンポーネントをクラウドに公開するかローカルに公開するかで決まります。

コンポーネントパネルからインスタンスを作成する

左側のコンポーネントパネルからコンポーネントを検索することができます。一方、このパネルで他のライブラリを開くこともできます。

1. 左側のパネルで「コンポーネント」をクリックします。
2. 使用したいコンポーネントを探します。

現在のファイルで作成されたローカルコンポーネントを表示します。

• 有効化されたライブラリからコンポーネントを選択します（あらかじめチームリソースライブラリを有効化しておく必要があります）。
• ローカルコンポーネントおよび現在のファイルで使用されているコンポーネントを表示します。
• チームやエンタープライズリソースライブラリ内のファイル、または閲覧権限のみを持つファイルを含む、アクセス権限を持つライブラリからコンポーネントを検索します。

3. コンポーネントを選択し、キャンバスにドラッグすると、そのインスタンスが作成されます。

コピーによるインスタンスの作成

同じファイル内でデザインしているのであれば、コンポーネントをコピーしてインスタンスを作成することができます。その方法はいくつかあります。

1.ショートカットキーの使用：

Mac: ⌘ Command+D

Windows: Ctrl+D

2.ドラッグしてコピー：⌥ Option(Mac)またはAlt(Windows)を押しながらコンポーネントをドラッグし、インスタンスを作成します。キーを離す前にマウスを離さないと、Pixsoはコンポーネントをコピーするのではなく、移動させてしまいますのでご注意ください。

3.コピー＆ペースト：ショートカットキーでコンポーネントをコピーし、インスタンスとして貼り付けます。

Mac: ⌘ Command -C と ⌘ Command-V

Windows: Ctrl+C と Ctrl+V

インスタンスの置き換え

コンポーネントにより、デザイン要素を作成、再利用することで、プロセスの効率と一貫性を保つことができます。 インターフェースを構築する際、アイコンやボタン、カードなどのコンポーネントのインスタンスを常に切り替えて使用します。

インスタンスメニュー

現在のファイルまたは有効なチームリソースライブラリからコンポーネントを検索し、インスタンスメニューから置き換えることができます。

インスタンスを選択した後、右側パネルからインスタンスメニューにアクセスします。そして、関連するコンポーネントを選択し、現在の選択部分を置き換えます。

(4) . バリアントの作成と利用

コンポーネントを作成し、デザインシステムを構築すると、似ているけれども少し異なるコンポーネントが出てきます。例えば、複数のボタンコンポーネントがあり、それぞれが異なるステータス、サイズ、明るさを持つことがあります。それがバリアントでできることです。コンポーネントバリアントにより、類似のコンポーネントを同じコンテナに入れることができ、より早くコンポーネントを見つけることができます。

注：バリアントを使用して異なるアイコンをグループ化することは推奨されません。同じアイコンでサイズが異なる場合、Pixsoはコンポーネントセットとしてグループ化することを推奨します。

一般に、似たようなコンポーネントをバリアントと呼びます。そして、バリアントをまとめた入れ物をコンポーネントセットまたはコンポーネントバリアントと呼びます。

バリアントプロパティとプロパティ値

ニーズに応じてバリアントのプロパティやプロパティ値を定義することができます。また、バリアントのプロパティや値を設計システム内のコード・コンポーネントにマッピングすることも可能です。

プロパティ：バリアントの機能として捉えることができます。例えば、ボタンコンポーネントは、タイプ、サイズ、状態などのプロパティを持つことができます。

プロパティ値: 例えば、デフォルト、ホバーなどの値を持つことができる。

コンポーネントセット内のすべてのバリアントは、同じプロパティと値を所有しています。 しかし、個々のバリアントは、属性と値の組み合わせの一意の値でなければなりません。

レイヤーの命名規則

ネーミングは、バリアントを作成・管理する上で重要な要素です。自由に設定できる他のレイヤー名とは異なり、コンポーネントセットのバリアントには専用の命名規則があります。名前にはバリアントのプロパティや値に関する詳細が含まれている必要があります。バリアントの名前を変更するためにレイヤーパネルをダブルクリックすると、これらの詳細が表示されます。

以下はそのルールです。プロパティ1＝ある値、プロパティ2＝ある値、プロパティ3＝ある値です。例えば、色＝白、シェイプ＝矩形、シャドウ＝あり。

コンポーネントのバリアント化

注意：バリアントを含むインスタンスをファイルに追加すると、Pixsoはそのバリアントグループからすべてのバリアントをインポートするので、操作に影響を与える可能性があります。

Pixsoで既にコンポーネントライブラリをお持ちの場合、コンポーネントをバリアントとしてグループ化することができます。以下はその手順です。

• コンポーネントの名前を変更し、スラッシュで区切ります。
• キャンバスの上にコンポーネントを置きます。
• コンポーネントをバリアントとして作成します。
• コンポーネントのプロパティに名前を付けます。

キャンバス上のコンポーネントの管理

注：コンポーネントセットにはコンポーネントしか入れられませんので、テキスト、説明、フレーム、グループバリアントを追加することはできません。

コンポーネントをバリアント化するとき、Pixso はコンポーネントセットのバリアントに現在のキャンバスのレイアウトとスペーシングを適用します。そのため、事前にレイアウトやスペーシングを調整することがおすすめです。

コンポーネントバリアントは、デフォルトで紫の点線と塗りつぶしがないことに注意してください。あなたのブランドやデザインシステムに合うように、これらを調整することができます。

コンポーネントバリアントの作成

1. バリアントとして作成したいコンポーネントを選択します。
2. [バリアント]オプションの[コンポーネントバリアントの作成］をクリックします。
3. Pixsoは、すべてのコンポーネントを個々のコンポーネントセットに追加します。

プロパティの命名

1. コンポーネントセットを選択します。
2. 右側のパネルで、現在のプロパティ名を確認します。
3. クリックすると、プロパティ名を編集できます。
4. 空白部分をクリックすると、操作が完了します。
5. この操作を他のプロパティにも同様に行います。

新しいバリアントの作成

注意：Pixsoはバリアントをコンポーネントセットと呼ばれる個別のフレームに収めます。コンポーネントセットはコンポーネントのみを含むことができます。ツールバーの「コンポーネントの作成」オプションをクリックするか、ショートカットキーを使って素早くコンポーネントを作成することができます。

Mac: ⌥ Option ⌘ Command+K

Windows: Ctrl+ Alt+K

1. コンポーネントを選択します。
2. バリアントオプションの横にある「＋」マークをクリックします 。

3.Pixsoでは、以下の操作を行えます。

• 同じコンポーネントを、同じプロパティで追加できます。
• 2つのコンポーネントをバリアントとして、コンポーネントセットに追加できます。

4. これらのバリアントは、デザインのニーズに応じて視覚的に変更することができます。

注：デフォルトでは、コンポーネントのバリアントは紫の点線で塗りつぶしがありません。あなたのブランドやデザインシステムに合うように、それらを調整することができます。

プロパティと値の追加

初めてコンポーネントを作成するとき、またはデザインのニーズに基づいて、バリアントにプロパティと値を追加することができます。

コンポーネントバリアントにプロパティを追加する方法：

1. コンポーネントのバリアントを選択します。
2. バリエーションオプションの横にある「＋」マークをクリックします。
3. [新規プロパティ]を選択します。

バリアントを選択した後でのみ、値を追加することができます。これを行うには、値を追加するプロパティのドロップダウンボックスをクリックします。

(5) . コンポーネントセットにバリアントを追加

以下のいずれかの方法で、コンポーネントセットにバリアントを追加してください。

コンポーネントセットを選択すると、「+」記号が表示されます。少なくとも2つのバリアントがあるときだけ、この記号が表示されることに注意してください。

バリアントセクションで、新しいバリアントをクリックします。

ショートカットキーを使って、現在のバリアントをコピーすることができます。

Mac: ⌘ Command+D

Windows: Ctrl+D

他のコンポーネントをコンポーネントセットにドラッグして、バリアントとして追加できるようにします。

バリアントを含むインスタンスをファイルに追加すると、Pixsoはそのコンポーネントセットのすべてのバリアントをインポートします。 このように、グランドコンポーネントセットのインポートは、Pixsoのスピードとパフォーマンスに影響を与えます。

バリアントの管理

コンポーネントに新しいバリアントを追加すると、Pixsoはこれらのバリアントをデフォルトでコンポーネントセットに追加し、それらの間隔も同じになります。セットに入れる前に、コンポーネントが別のレイアウトにあった場合、Pixsoはセットの元のプロパティを保持します。

• バリアントを選択し、コンポーネントセットに移動できます。Pixsoでは、他のバリアントの上など、セット内の任意の場所にバリアントを配置することができます。
• 右側のパネルでコンポーネントセットの大きさを調整できます。また、通常のフレームと同じように、キャンバスにすることもできます。
• さらに、右側のパネルでバリアント間の水平方向の間隔を調整できます。

プロパティと値の名前の変更

プロパティの名前の変更：

• プロパティをクリックして、名前を変更します。
• Enterキーを押すか、空白部分をクリックすると、この操作は完了します。
• この操作を他のプロパティにも繰り返します。

値の名前の変更：

• ダブルクリックでテキストボックスを有効にします。
• Enterキーを押すか、空白部分をクリックすると、この操作は完了します。
  

プロパティの削除:

• コンポーネントセットを選択します。
• バリアントセクションのプロパティオプションにマウスを乗せる
• 削除アイコンをクリックして、操作を確認します。

バリアントの設定

• インスタンスを選択します。
• 右側のパネルでコンポーネントセットの名前を確認し、その下にあるプロパティと値を設定します。
  

インスタンス間の切り替え

バリアントを使用する場合、共通のコンポーネントのようにインスタンスを置き換えることも可能です。

最も効果的な方法は、インスタンスメニューを使用することです。このメニューでは、現在のファイルまたは有効なライブラリからコンポーネントを検索して置き換えることができます。

• 置き換えたいインスタンスを選択します。
• 右側のパネルでコンポーネント名をクリックします。
• インスタンスメニューから、前回選択したコンポーネントを置き換える別のコンポーネントを選択します。

(6) . メインコンポーネントの編集

作成したインスタンスは、すべてメインコンポーネントにリンクしています。メインコンポーネントを調整すると、Pixsoはそのコンポーネントにリンクしているすべてのインスタンスに変更を適用します。

メインコンポーネントとインスタンスが同じファイル内にある場合、Pixsoは即座に変更を適用します。

コンポーネントの更新

デザインを修正する場合は、元ファイルの主要コンポーネントのみを編集することができます。

未公開のコンポーネント: Pixsoは、メインコンポーネントで行った変更を、ファイル内のローカルインスタンスに自動的に適用します。

公開のコンポーネント: メインコンポーネントとインスタンスが同じファイル内にある場合、変更は即座に適用されます。これらの変更を他のファイルのインスタンスに適用したい場合は、これらの変更をリソースライブラリに公開する必要があります。

メインコンポーネントの検索

• 現在のファイル内のインスタンスを選択します。
• 右側のパネルにある「デザイン」オプションをクリックします。
• 「インスタンス」セクションの「メインコンポーネントへ遷移」をクリックします。
• メインコンポーネントを選んで、好きなようにデザインします。

注：Pixsoは、インスタンスに戻るためのオプションを提供します。

チームライブラリにアップデートを公開

公開されているスタイルやコンポーネントに変更を加えた場合、その変更は現在のファイルのインスタンスにのみ適用されます。 これらの変更をチームに同期させたい場合は、アップデートを公開する必要があります。

Pixsoは、コンポーネントパネルに青い点を表示し、公開する必要のある変更があるかどうかを知らせます。

• 左側のコンポーネントパネルをクリックすると、チームリソースライブラリが開きます。
• 追加、修正、削除されたスタイルとコンポーネントが表示されるリストを確認します。
• 関連する説明を追加します。
• 「公開」ボタンをクリックすると、変更内容が公開されたかどうかがPixsoから通知されます。

(7) . コンポーネントからインスタンスを切り離す

任意のインスタンスをそのメインコンポーネントから切り離すことができます。

インスタンスメニューから

• 切り離りたいインスタンスを選択します。
• 右側パネルの「インスタンス」メニューをクリックします。
• 「メインコンポーネントからの切り離し」をクリックします。

右クリックメニューより

• キャンバスまたはレイヤーパネル上でインスタンスを右クリックします。
• すべてのオプションの中から「コンポーネントを切り離す」を選択します。

ショートカットキーの利用

また、ショートカットキーで素早くインスタンスを切り離すことも可能です。

Mac: ⌥ Option +⌘ Command +B

Windows: Ctrl+B

注：誤ってコンポーネントを作成してしまった場合、以下のショートカットキーでインスタンスに戻ったり、キャンセルすることができます。

Mac: ⌘ Command+Z

Windows: Control+Z

コンポーネントとなったインスタンスを復元したい場合は、復元することができます。

新しいコンポーネントのインスタンスを作成します。

コンポーネントからインスタンスを切り離します。

元のコンポーネントを削除します。

コンポーネントのプロパティを設定する

コンポーネントのプロパティを使うと、共同編集者が変更する部分を操作項目として公開できます。メインコンポーネントまたはコンポーネントセットに設定し、インスタンスの右パネルから操作します。

プロパティ	変更する内容	作成する場所
バリアント	サイズ、種類、状態などの選択肢	親コンポーネントまたはコンポーネントセット
レイヤー	内部のレイヤーの表示・非表示	対象の子レイヤー
インスタンス	内部のインスタンスで使うコンポーネント	入れ子のコンポーネントインスタンス
テキスト	テキストレイヤーの内容	対象のテキストレイヤー

対象の子レイヤーに直接作成する方法と、先にプロパティを定義してから子レイヤーに関連付ける方法があります。編集権限を持つ共同編集者は、設定や値の変更を行えます。

バリアントのプロパティ

コンポーネントまたはコンポーネントセットを選択し、コンポーネントのプロパティ欄でバリアントのプロパティを作成します。sizeやstateなど、選択肢を表す名前と値を設定します。各バリアントの値の組み合わせは一意にします。例えば、size=small, state=hoverのように指定します。

レイヤーの表示プロパティ

1. メインコンポーネント内の子レイヤーを選択します。例えば、ボタン内のアイコンです。
2. 右側のレイヤー欄でプロパティの操作を選択します。
3. 名前を付け、初期状態で表示するかどうかを選びます。
4. インスタンスを作成し、公開されたプロパティから表示・非表示を切り替えます。

単純な任意要素のために作るバリアントを減らせます。ただし、表示プロパティは一つのコンポーネント内の設定です。プロトタイプの状態として接続できる別々のオブジェクトが作られるわけではありません。異なる遷移先が必要な場合は、別のオブジェクトやバリアントを使います。

インスタンスのプロパティとクイック交換

1. メインコンポーネント内にあるインスタンスを選択します。
2. 右側のインスタンス欄からプロパティを作成します。
3. ローカルのコンポーネントまたは有効なライブラリから、初期値となるインスタンスを選びます。
4. 作成時に、クイック交換の候補として適切なコンポーネントを設定します。

親のインスタンスに、内部のコンポーネントを交換する操作が表示されます。インスタンスのプロパティを設定するには、対象レイヤーがコンポーネントのインスタンスである必要があります。

テキストのプロパティ

1. メインコンポーネント内のテキストレイヤーを選択します。
2. 右側の内容欄からプロパティを作成します。
3. 名前と初期テキストを設定します。
4. インスタンスを選択し、公開されたテキストの値を編集します。

複数のテキストレイヤーを同じプロパティに接続できます。その値を変更すると、関連するテキストを揃えられます。

テキストのプロパティでは、番号付きリスト、箇条書き、上付き文字などの高度な書式は公開されません。そのような書式を含むテキストをプロパティ経由で編集すると、書式が失われる場合があります。書式を維持する必要があるときは、テキストレイヤーを直接編集してください。