Notes from the tutorial for XD, the best software offered by Adobe to design websites.
Tutorial notes
Create and Style an Artboard
- Artboard Shortcut: A
- When adding an artboard, you pick the window size in the properties (right column)
- Clicking on an artboard's title selects the artboard and allows you to change its name
- Artboards work like masks in InDesign
Import content with Repeat Grid
- Images and text files can quickly be added in grids on XD
- Content is dragged and dropped into the grid
- Padding can be adjusted using handles
Define interactivity
- Click on title to select the artboard and see the height
- In the artboard properties inspector, under SCROLLING, select Vertical to place handle on the artboard indicating the view height
- Like linking pages in InDesign, selecting elements on an artboard can be linked to another artboard to simulate the user experience as they navigates the website. Select the Prototype Inspector to do so.
- Ease In-Out with a 0.4s transition makes for smooth linking
- Close buttons and previous arrows can be linked using a Tap, Action -> Type: Select Previous Artboard
- Hit the Play Button (upper right) after selecting an artboard to see it live
Reuse colors and character styles
To extract colors and fonts from an object:
- While in Design Mode, open the Libraries panel (top icon, bottom left)
- Select the object on the canvas
- In the libraries panel (left sidebar), click the + button on the right side of the headers for colors and/or character styles. The list will automatically generate.
Persistent navigation
To fix an object on the screen:
- While in Design mode, open the Layers panel (middle icon, bottom left)
- Select the obect from the Layers panel
- In the Transform area of the properties inspector (right sidebar), select "Fix Position with Scrolling"
- Z-Index: In the Layers panel (left sidebar) drag your folder above elements that should display behind it
Scrolling for Mobile
To scroll images horizontally on mobile screens:
- While in Design mode, open the Layers panel (middle icon, bottom left)
- Select the overflowing images from the Layers panel
- In the Transform area of the properties inspector (right sidebar), pick one of the three icons on the upper right side of "Fix Position with Scrolling." XD will mask the group to fit into the artwork and a blue handle allows you how large you want the window to be on the artboard.
