GROWI-Design XDデザインリンク集
XDの使い方 (Coder 向け)
■■■--このセクションを読むのが面倒な人は--■■■
- デザイナーが教えに行きますので、お声がけください
【XDってなに】
- adobe製のwebデザインツールです
- ページ遷移やクリック挙動などを擬似的に再現できるので、実際の画面っぽくデザインできます
- あくまで擬似的にやってるだけなので、あまり信用しすぎないで
【ページの探し方】
- XDはページごとにURLが発行されます
- URLはなるべくタスクやストーリー説明文に書いておきます。
- URLがわからなければ、デザイナーに聞くか下記のカタログから探して下さい。
【クリック挙動やページ遷移を確認する】
- ボタンなどは、クリック時の挙動を設定してある場合があります
- クリック可能箇所は、画面内の適当な場所をクリックした際に青く点滅します
【オブジェクトの詳細な数値を確認する】
- XDではフォントサイズや色変数、マージンなども確認できます
- 画面右のサイドバー、
</>ボタンをクリックすると、「スペック表示モード」になります- 知りたいオブジェクトをクリックすると右側に詳細が表示されます
デザインスペックURL
マザーシップ
- すべてのリンクを束ねているXDのページ
- https://xd.adobe.com/view/cd3cb2f8-625d-4a6b-b6e4-917f75c675c5-986f/ external_link
コンポーネントカタログ
| 更新日 | 更新者 | 公開物の内容 | URL(PC) | URL(SP) | 対象のストーリー |
|---|---|---|---|---|---|
| 2020-10-23 | mos | ボタンいろいろ (3連ボタン, Slackボタン, Outlined) | https://xd.adobe.com/view/cd3cb2f8-625d-4a6b-b6e4-917f75c675c5-986f/screen/487d7250-5b76-422a-9bc2-7a1f38cd75e8/ external_link | なし | |
| 2020-10-23 | mos | SubNavbar(記事ヘッダー) | https://xd.adobe.com/view/cd3cb2f8-625d-4a6b-b6e4-917f75c675c5-986f/screen/80d6480c-f3ec-495f-8ece-56bf47bb3df0/ external_link | なし | |
| 2020-10-23 | mos | 複合モーダル | https://xd.adobe.com/view/cd3cb2f8-625d-4a6b-b6e4-917f75c675c5-986f/screen/8ed796d8-14df-4349-8fea-1ac10765805a/ external_link | ||
| 2020-12-23 | mos | ページ内リンク遷移時の見た目 | https://xd.adobe.com/view/cd3cb2f8-625d-4a6b-b6e4-917f75c675c5-986f/screen/855d549a-082d-468a-a3e3-cd62f7e7e0a7 external_link | ||
GROWI基本ページ
Editページ
[管理画面] Slack連携
| 更新日 | 更新者 | 公開物の内容 | URL(PC) | URL(SP) |
|---|---|---|---|---|
| 2021/04/15 | kaori | Slack連携ページ | https://xd.adobe.com/view/84255460-3ae9-4bd4-8158-a483d8370552-d176/ external_link | なし |