https://images.prismic.io/uxpincommunity/f09f746aa28ac8863ef372e0efc7059cdb7fe393_1_specmode_x2.jpg?auto=compress,format

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

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

プロパティの確認

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

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

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

</aside>

距離の計測

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

https://images.prismic.io/uxpincommunity/3b8bf7331198cc5b1ca113d9cb80565517a52374_2_specmode_x2.jpg?auto=compress,format

Style guide(スタイルガイド)

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

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

https://images.prismic.io/uxpincommunity/302fd611522a1f743475e870c98ffdf3519701b6_3_specmode_x2.jpg?auto=compress,format