XD開発者用リンク活用方法まとめ - Paku-Soba/Svelte-example-app GitHub Wiki

• 1. 画像
• 2. pxサイズ
• 3. カラー
• 4. 文字

• XD開発者用リンク活用方法まとめる。
  • デザインスペックの表示および確認方法
  • コードスニペット
    • CSS コード
      • CSS コードを生成するには、XD アプリで共有／開発を選択し、「Web 用に書き出し」を選択してデザインスペックを公開する。
      • CSS スニペットセクションからデザインの CSS コードを表示してコピーできる。
      • コードスニペットをコピー＆ペーストするには、スニペットをクリックしたままドラッグし、コードエディターに切り替えて貼り付ける。
    • HTML コード
      • Lottie ファイルとビデオファイルの HTML コードを生成するには、XD アプリで共有／開発を選択し、「Web 用に書き出し」を選択してデザインスペックを公開する。
      • HTML コードは、プロパティインスペクターの HTML セクションからコピーできる。
      • コードスニペットをコピー＆ペーストするには、スニペットをクリックしたままドラッグし、コードエディターに切り替えて貼り付ける。

→ XD開発者用リンクからCSSコードをコピーして使えることもできるが、今回使用するライブラリは、Tailwind CSSの為、Tailwind CSS使用を優先する。

• 3/7(木) 時点_アイコンのSVGダウンロードうまくいかない為、後回し。
  • まとめて対応する。
    • ダウンロードできなかった原因について(※ 3/8(金) 時点_ 実装対応時、原因判明)
      • アイコンが画像としてデザインされている要素と画像ではない要素が混在していた為
      • デザインスペックタブに切り替えを行い、アイコンを選択しても「アセット」が表示されない要素も存在する。

→ 画像としてSVGダウンロードできないアイコンは、アイコンライブラリを使用する。

1. 右レールの </> アイコンをクリックしてデザインスペックのタブに切り替える。
2. デザインスペックタブに切り替えて「アセット」を選択する。
3. ダウンロードする画像を選択し、「ダウンロード」ボタンをクリックする。
4. アイコン画像がSVGファイルでダウンロードされる。

1. 右レールの </> アイコンをクリックしてデザインスペックのタブに切り替える。
2. デザインスペックタブに切り替えた状態で、pxサイズを確認するデザイン要素をクリックする。
   ※ 例） エラーダイアログ pxサイズ確認。
3. 右上の四角形 width、heightのpxサイズを確認する。
4. <style>タグにて、max-width、max-height プロパティを使用してpxサイズのCSSコードを書く。

<style>
.modal-box {
	max-width: 692px;
	max-height: 100px;
	}
</style>

1. 右レールの </> アイコンをクリックしてデザインスペックのタブに切り替える。
2. デザインスペックタブに切り替えた状態で「アピアランス」を選択する。
3. 線型グラデーションカラーを選択するとカラーがコピーできる。
4. コピーしたカラーをtailwind.congif ファイルにてcolorsプロパティを使用し設定する。

1. TailwindCSSのgradientユーティリティを使用しグラデーションを実装する。
2. タグにて、`bg-gradient-to-{グラデーション方向}`を指定、クラデーションとして表現する色を`from-{color}`、`to-{color}`ユーティリティで指定する。
3. 文字の間隔は、TailwindCSSのtracking-{size}ユーティリティを使用し実装する。
4. 今回の場合、headerのサイト名表記をtracking-widestクラスを使用し文字の間隔を実装。

...
<header class="bg-gradient-to-b from-headerColor02 to-headerColor01">
	<span class="px-5 py-2 text-white font-thin text-4xl tracking-widest">SCRIBE ASSIST</span>
</header>
...

• layout Header及びご利用にあたって画面実装

1. 右レールの </> アイコンをクリックしてデザインスペックのタブに切り替える。
2. デザインスペックタブに切り替えて「コンテンツ」を選択する。
3. コンテンツを選択すると文字のコピーができる。