ハンドオフパネル

1. プロパティの値を確認する

「ハンドオフ」パネルでは、開発者が選択したレイヤーのプロパティを確認・コピーできます。サイズ、レイアウトの制約、シャドウ、線などの値に加え、テキストの内容、フォント、文字サイズ、行の高さといった情報も確認できます。

「塗り」セクションでは、Hex、RGB、CSS、HSL、HSB 形式の色の値を確認できます。

2. 要素間の距離を確認する

開発者モード、または「ハンドオフ」パネルでレイヤーを選択し、別の要素にポインターを合わせると、要素間の距離を確認できます。

3. 参考コードを表示する

デザインから生成されたコードを確認するには、「ハンドオフ」パネルを開き、コードのセクションまでスクロールします。プルダウンから、CSS、iOS、Android の参考コードに切り替えられます。

4. 開発プラットフォームを切り替える

開発する環境に合わせて単位を選択できます。iOS、Android、Web 向けの設定が用意されています。

5. 換算倍率を指定する

プロパティの単位換算に独自の条件がある場合は、開発要件に合わせて数値と単位を変換できます。

たとえば、 デザインの幅が 750 px で、実装時には 375 dp にする場合は、換算倍率を 0.5 に設定し、単位を px から dp に変更します。確定すると、選択したデザインの値に指定倍率が適用されます。

6. 換算後の幅を指定する

倍率の代わりに幅を指定することもできます。たとえば、750 px のデザインを幅 375 に換算したい場合は、倍率を 0.5 にする方法のほか、フレームを選択して幅を 375 と指定する方法があります。

選択したフレームと入力値から倍率が計算され、デザイン内のほかのレイヤーにも適用されます。

注意：ここでの換算設定は、デザイン自体のサイズを変更しません。

7. 選択対象を設定する

スライス内のコンポーネントやレイヤーを選択対象から除外できます。細かな要素が選ばれてしまうのを防ぎたい場合に便利です。

観察者モードまたは開発者モードで、画面右上のアイコンから設定します。

注意：初期設定では、内側のレイヤーも選択できます。

必要に応じて「コンポーネント／スライス内のレイヤーを選択可能にする」のチェックを外します。

「コンポーネント／スライス内のレイヤーを選択可能にする」をオフにすると、キャンバスではスライス全体が選択され、内部のレイヤーは選択されなくなります。