helpdelete

GROWI-Design XDデザインリンク集

XDの使い方 (Coder 向け)

■■■--このセクションを読むのが面倒な人は--■■■

  • デザイナーが教えに行きますので、お声がけください

【XDってなに】

  • adobe製のwebデザインツールです
  • ページ遷移やクリック挙動などを擬似的に再現できるので、実際の画面っぽくデザインできます
    • あくまで擬似的にやってるだけなので、あまり信用しすぎないで

【ページの探し方】

  • XDはページごとにURLが発行されます
    • URLはなるべくタスクやストーリー説明文に書いておきます。
    • URLがわからなければ、デザイナーに聞くか下記のカタログから探して下さい。

【クリック挙動やページ遷移を確認する】

  • ボタンなどは、クリック時の挙動を設定してある場合があります
    • クリック可能箇所は、画面内の適当な場所をクリックした際に青く点滅します

【オブジェクトの詳細な数値を確認する】

  • XDではフォントサイズや色変数、マージンなども確認できます
  • 画面右のサイドバー、</>ボタンをクリックすると、「スペック表示モード」になります
    • 知りたいオブジェクトをクリックすると右側に詳細が表示されます

デザインスペックURL

マザーシップ

コンポーネントカタログ

更新日更新者公開物の内容URL(PC)URL(SP)対象のストーリー
2020-10-23mosボタンいろいろ
(3連ボタン, Slackボタン, Outlined)		https://xd.adobe.com/view/cd3cb2f8-625d-4a6b-b6e4-917f75c675c5-986f/screen/487d7250-5b76-422a-9bc2-7a1f38cd75e8/ なし
2020-10-23mosSubNavbar(記事ヘッダー)https://xd.adobe.com/view/cd3cb2f8-625d-4a6b-b6e4-917f75c675c5-986f/screen/80d6480c-f3ec-495f-8ece-56bf47bb3df0/ なし
2020-10-23mos複合モーダルhttps://xd.adobe.com/view/cd3cb2f8-625d-4a6b-b6e4-917f75c675c5-986f/screen/8ed796d8-14df-4349-8fea-1ac10765805a/ 
2020-12-23mosページ内リンク遷移時の見た目https://xd.adobe.com/view/cd3cb2f8-625d-4a6b-b6e4-917f75c675c5-986f/screen/855d549a-082d-468a-a3e3-cd62f7e7e0a7 

GROWI基本ページ

更新日更新者公開物の内容URL(PC)URL(SP)対象のストーリー
2020/10/23mos記事ページhttps://xd.adobe.com/view/cd3cb2f8-625d-4a6b-b6e4-917f75c675c5-986f/screen/d1e27523-3c28-4fc2-a7fc-e3078bdd0bbe/ https://xd.adobe.com/view/cd3cb2f8-625d-4a6b-b6e4-917f75c675c5-986f/screen/812cbff7-747c-4fdd-bc0d-2324a2e4fb34/ 
2020/11/05mos新レイアウト記事ページhttps://xd.adobe.com/view/cd3cb2f8-625d-4a6b-b6e4-917f75c675c5-986f/screen/70491b40-7b6d-4268-b73a-e8e3a5b68fa7/ GW-3604 ユーザーホームを整理し、ページ表示時のデザインを刷新する
2020/10/23mosedit画面https://xd.adobe.com/view/cd3cb2f8-625d-4a6b-b6e4-917f75c675c5-986f/screen/6ce54cb3-947b-4485-a26e-35b9e8a888b7/ https://xd.adobe.com/view/cd3cb2f8-625d-4a6b-b6e4-917f75c675c5-986f/screen/10e65825-b3c8-432d-8fd2-6928ddd4f6c7/ 
2020/10/23mosNot Found ページhttps://xd.adobe.com/view/cd3cb2f8-625d-4a6b-b6e4-917f75c675c5-986f/screen/4620d1ba-2119-4c75-bba1-94a8e15505dd/ https://xd.adobe.com/view/cd3cb2f8-625d-4a6b-b6e4-917f75c675c5-986f/screen/f879be56-8897-4f0d-9887-25b3307e1fda/ 

Editページ

更新日更新者公開物の内容URL(PC)URL(SP)対象のストーリー
2020/10/23mosedit画面https://xd.adobe.com/view/cd3cb2f8-625d-4a6b-b6e4-917f75c675c5-986f/screen/6ce54cb3-947b-4485-a26e-35b9e8a888b7/ https://xd.adobe.com/view/cd3cb2f8-625d-4a6b-b6e4-917f75c675c5-986f/screen/10e65825-b3c8-432d-8fd2-6928ddd4f6c7 
2020/12/23shintaro-oリンク編集モーダルhttps://xd.adobe.com/view/cd3cb2f8-625d-4a6b-b6e4-917f75c675c5-986f/screen/916c0cdb-7283-4f00-b7de-05423c85bcc6 
2020/12/23shintaro-oイージーグリッドモーダルhttps://xd.adobe.com/view/cd3cb2f8-625d-4a6b-b6e4-917f75c675c5-986f/screen/c07e8e02-c485-409a-8387-ff2ad0066237 

[管理画面] Slack連携

更新日更新者公開物の内容URL(PC)URL(SP)
2021/04/15kaoriSlack連携ページhttps://xd.adobe.com/view/84255460-3ae9-4bd4-8158-a483d8370552-d176/ なし