XDの導入と値の取得方法 〜コーディング課題に取り組む方へ〜

今日は、コーディング課題に取り組む人に向けて、AdobeXDの導入方法と、コーディングに必要な数値の取得方法を説明するよ!

AdobeXDの概要

Adobe XDはアドビシステムズが提供している、UIデザインツールです。デザインの制作だけでなく、プロトタイプの作成からチーム内での共有などの機能も充実しています。

「思考のスピードでデザインする」というコンセプトのもと開発されたツールのため、PhotoshopやIllustratorなどよりも動作が軽く、ストレスのない使用感からWebデザインでも使用される場面が増えてきています。

同様の機能を持ったツールに、Sketchやfigmaなどがあります。

(figmaの使い方についてはこちらhttps://crestadesign.org/figma/で解説しています)

XDのプラン比較

XDは無料でも基本的な機能が使用できます。

チームでの開発などを前提とした場合は有料プランじゃないと、機能を活かしきれませんが、個人の勉強用であれば無料プランでも良いでしょう。また、すでにAdobeCCコンプリートプランを契約している人は実質無料で使用できます。

XDのプランは、こちら(https://www.adobe.com/jp/products/xd/compare-plans.html)で比較できます。

Adobeアカウントがない方はアカウントを作る必要があります。(アカウント作成は無料です)

スタータープランのダウンロードボタンをクリックし、画面の指示に従ってインストールしましょう。

XDの画面の見方

XDのカンプデータからコーディングをする際に抑えておきたいのは、画面左側のレイヤーパネルと、画面右側のプロパティインスペクターです。レイヤーパネルにはデザインを構成している要素(オブジェクト)の階層構造が表示されています。

グループ化しているものはフォルダアイコンで表示されており、フォルダアイコンをクリックすると開閉することができます。

コーディングするときのときの値の取得方法

オブジェクトを直接またはレイヤーパネルから選択すると、オブジェクトの幅・高さ、位置、色などがプロパティインスペクターに表示されます。基本的にはプロパティインスペクターからコーディングに必要な数値を取ることができます。

図形を選択した場合

テキストを選択した場合

次に余白の取得方法を説明します。オブジェクトを選択し、他のオブジェクトにカーソルを合わせた状態でoptionキー(windowsはたぶんaltキー)を押すと選択したオブジェクトから、カーソルを合わせたオブジェクトまでの距離が表示されます。

XDの画面の見方はわかったかな?これでXDのカンプデータからのコーディングができるね!頑張って☆

デザインカンプはこちら

 この記事がいいと思ってくださった方は、SNSでのシェアをお願いします![addthis tool="addthis_inline_share_toolbox_mqi1"]

質問をTwitterから募集します!

無料でwebデザインに関する質問にお答えします。

クリ★スタは未経験からwebデザイナーを目指す方を応援しています!そのため、学習していく中での些細な疑問に記事で回答していきます。

お気軽にご連絡ください。→クリ★スタ(@cresta_design)

Youtubeでは動画学習コンテンツを配信しています!

 動画での学習は、テキストでの学習の3倍以上の効果を得られると言われています。そのため、クリスタでは、初学者の方に効果的な学習をして頂くためにYoutubeで学習コンテンツを提供しています。

 ぜひチャンネル登録お願いします🙇‍♂️→クリ★スタYoutubeチャンネル

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA