デザインの実装には、開発者とのコラボレーションが欠かせません。UXPinでは、デザインに関するすべての情報をSpec mode（スペックモード）という1つの場所に集約しています。それによって、エンジニアリングチームは常に最新のスペック・バージョンを確認できます。

Specモードは、デジタル製品開発に関わるすべての人に向けたオープンブックのようなものです。デザイナーは安心して制作を続けることができ、エンジニアはプロジェクトの遂行で必要な情報にいつでもアクセスすることができます。デザインに変更があれば、すぐにスペックモードに反映されます。

プロパティの確認

スペックモードでは、次のプロパティを確認できます。

• **General（サイズ）：**すべての情報のサイズが表示され、画面サイズを切り替えることもできます。
• **Grid（グリッド）：**列数、列幅、ガター、マージンを表示します。
• **Colors（カラー）：**デザインの色、複雑なグラデーション、不透明度を表示します。 HEXとRGBAの色表現を切り替えたり、その値をコピーしたりできます。 デザインシステムでカスタム名を指定した色は、値ではなくその名前で表示されます。
• Typography（タイポグラフィ）：フォントファミリ、スタイル、サイズ、リーディング（行間）、並べ替えを指定します。

スペックモードでは、CSSコードをコピーしたり、レイヤーをイメージアセットとしてダウンロードしたりできます。 ただし、マスクされたグループの一部である外観はダウンロードできません。

<aside> 🖇️ 備考 非表示のレイヤーは、スペックモードでは表示も選択もできませんが、表示の切り替えはできます。画面左の[Layors（レイヤー）]から、目のアイコンを使ってください。

</aside>

距離の計測

スペックモードでは、要素間の距離と要素とキャンバスの端との間の距離を測定できます。 要素の上にカーソルを置くと、キャンバスの端までの距離が表示されます。 クリックすると、他の要素の上にカーソルを置くだけで、要素間の距離が表示されます。

Style guide（スタイルガイド）

スペックモードの便利な機能として、Style guideがあります。

トップバーにある[Style guide]をクリックするとアクセスできます。