メインコンポーネントとインスタンス - Adobe XDのチュートリアル

このレッスンでは メインコンポーネントと インスタンスについて説明します。 教材として エクササイズファイルのフォルダーにある 08 フォルダーの中の 08_04.xd を使います。 コンポーネントはドキュメント内で 何度でも使用することができます。 アートボード上のオブジェクトを選択すると 左上に 塗りつぶされた緑色の菱形の マークがありますので、 これはメインコンポーネントであることが わかります。 「ライブラリ」パネルを表示し、 メインコンポーネントを右クリックして 「アセットのコンポーネントを表示」 をクリックしましょう。 そうすると「ライブラリ」パネル上で 該当するコンポーネントが ハイライトされます。 コンポーネントを再利用するには、 「ライブラリ」パネルから 「コンポーネント」を アートボードにドラッグします。 ２つドラッグ＆ドロップしました。 もしくはコンポーネントを複製します。 複製するには、 オブジェクトを option shift を 押しながら Windows の方は Alt Shift を押しながら ドラッグします。 このようにしてできた コンポーネントを選択すると、 左上に白抜きの 菱形のマークが表示されます。 これらをインスタンス といいます。 オリジナルがメインコンポーネントで 左上のマークは 塗りつぶされた緑の菱形、 複製はインスタンスで 左上のマークは 白抜きの菱形です。 続いてメインコンポーネントを 編集してみましょう。 作業しやすいように、 左下の真ん中のアイコン、 レイヤーアイコンをクリックして レイヤーパネルを表示しておきます。 まずはボタンの色を変更します。 メインコンポーネントの 角丸長方形の上を ダブルクリックします。 「レイヤー」パネルでは 「長方形１」というレイヤーが 選択されていることを 確認してください。 プロパティインスペクタで 「塗り」の横にある カラーチップをクリックし、 003399 と色を変更し、 return もしくは Enter キーで確定します。 メインコンポーネントの ボタンの色を変更すると、 インスタンスの色も 瞬時に変更されました。 続いてメインコンポーネント内の テキストを変更します。 button という文字を ダブルクリックして選択し、 もう一度ダブルクリックして…