まずは自己紹介から始めますね！
山本 直輝です。
今年の5月1日からフリーのフロントエンドエンジニアをやっています。
令和元日創業です！
XDに出会ったのは8ヶ月前で、XDのシンプルさに魅了されて愛用しています。個人で制作するときはXDで作りますし、デザインデータを貰うのもXDだと嬉しいです！
さて、今回話すテーマは、デザイナーもエンジニアもハッピーなXDの使い方です。
タイトルにあったEFXDってなんだって話なんですが、これはエンジニアフレンドリーエクスプリシットデザインの略で、日本語にするとエンジニアにやさしい明示的なデザインという意味になります。
こういうとそれっぽいですが、実はXDUFをもじって4文字にしたかっただけです。
でも言いたいことからはズレてないので、流行らせます！流行らせてください！
僕はXDをデザイナーとエンジニアの架け橋になるアプリケーションだと思っていて、この機会に少しだけエンジニアフレンドリーを意識してもらえたら、デザイナーさんもエンジニアさんもハッピーになれると思います。
今回話すのは3つのポイントです。
どれもちょっとした工夫をするだけで制作効率が上がるテクニックです。
では、ひとつずつ見ていきましょう。
１つめのポイントです。
コンポーネントをまとめたページを作りましょう。
コンポーネントというのはお分かりの方も多いと思うんですが、以前はシンボルと呼ばれていた機能です。
よくつかうデザインパーツを登録しておくと、１回の変更で複数のパーツに同じ変更を適用することができます。
コンポーネントをまとめたページというのはイメージとしてはこんな感じです。
ヘッダー、見出し、ボタン、アイコンなどなどですね。スマホ版や色違いのバリエーションもあります。
コンポーネントがまとめてあるだけでも嬉しいですが、赤文字でイメージを伝えてもらえるとさらに良いですね。
これがあるとなぜ嬉しいか。
まずデザイン工程ではチーム内でデザインの共有がしやすくなります。トンマナも伝えやすいですね。
また、ここをマスターコンポーネントを置き場に決めておくと一目でコンポーネントインスタンスと区別することができます。
次にコーディング工程では再利用するパーツが明示されているので、変更に強いコーディングがしやすくなり、工数も見積もりやすくなります。
デザイン工程でもコーディング工程でもメリットのあるひと手間なので、ぜひやってみて作ってください。
２つめのポイントです。
よく使うカラーや文字スタイルにも名前をつけましょう。
はい、これはXDの制作画面なんですが、画面左側にアセットパネルが表示されているのがわかるでしょうか。
このアセットって実は名前をつけることができます。
アソートカラーとか境界線とか基本文字色とかつけてありますね、これはあくまでも一例なので、デザイナーさんの好きにつけてもらって構いません。
こうすると何が嬉しいか。
これは基本文字色で、これはアイコン用に少しだけ色味が変えてあるといったことを名前で表現することができます。
アセットの名前に意図を含めることでエンジニアもその意図を汲み取ってコーディングすることができるようになるわけです。
また、こうすることで、プロジェクト内でダブルスタンダードになるリスクを減らすことができます。
カラーアセットには不透明度が含まれないので、不透明度がのせいで色が違うといったことにも気付きやすくなるメリットもあります。
よく使うアセットに名前をつけるだけでいいので、ぜひやってみてください。
３つめのポイントです。
デザインスペックを共有しましょう。
はい、また制作画面です。
右上に共有ボタンがあるのわかりますでしょうか。
デザインスペックはXD画面右上の共有ボタンから、開発用に共有を押すと生成されるWebドキュメントです。
発行されたURLにブラウザでアクセスするとこんな感じの画面が表示されます。
アセットを一覧することができて、素材のダウンロードも可能です。optionキー、altキーで要素間の余白もみることができます。
これを使うと何が嬉しいか。
デザインスペックはクラウド上にあるので、チームメンバーは常にデザイナーが共有した最新版を見ることができます。
ローカルのXDでバッチ書き出しマークをつけたレイヤーはデザインスペック上でアセット書き出しの対象になります。
最初に紹介した、コンポーネントをまとめたページとの合わせ技をすると共通パーツをあっという間に書き出せてしまいます。
また、デザインスペックにはチャット機能がついていて、デザイン上にピン止めしてテキストメッセージをやりとりすることができます。
デザインデータのバージョン管理、ビジュアルを具体的に指定してのやりとりなどチームで作業する時に面倒なことを解決してくれるのがデザインスペックです。
ぜひ活用してみてください。
駆け足で説明しましたが、参考になったでしょうか。
最後にまとめますね。
"
コンポーネントをまとめたページを作ろう。
よく使うカラーや文字スタイルに名前をつけよう。
デザインスペックを共有しよう。
"
コンポーネントをまとめたページを作ると、デザインの共有がスムーズになり、変更に強いコーディングがしやすくなります。
よく使うカラーや文字スタイルに名前をつけると、意図が明確になってダブルスタンダードを防げます。
デザインスペックを共有すると、チーム内で最新版を共有できて、具体的な箇所を指定してやりとりすることができます。
EFXDでデザイナーもエンジニアもハッピーになりましょう！
ありがとうございました。
tooomo
recruitengineers
yamatoiizuka
myates3
tatsuyasawanobori
ajstarks
hiromitsuuuuu
nextbeat
yukiringo
hinofu
weddingpark
abcmisuzu
smashingmag
colly
holman
addyosmani
mojombo
frogandcode
jakevdp
malarkey
aleyda
trallard
vanstee
tammielis
