Lay out and design your app or website

Focus on the structure and flow of an app before refining your design. Add artboards, placeholder text, and basic shapes to map out the design. Use Repeat Grid to place copies of text and objects in rows and columns. Set up symbols as placeholders for items that repeat throughout your design. Leverage templates and design elements from wireframe kits available for XD to quickly get a head start.

Learn how to use the canvas to experiment with design concepts before updating artboards. Use Repeat Grids in various ways to speed up your design process. Modify a design element in a Repeat Grid to update elements in other cells simultaneously. Open UI kits and wireframe kits to copy and paste design elements into your document. Streamline the management of your documents assets, including color and character styles, from the Assets panel.

Use the Rectangle, Ellipse, Line, and Pen tools to draw simple icons. Refine the graphics in your app with the Boolean operators by adding, subtracting, intersecting, and excluding overlapped shapes. Import icons and illustrations created in Adobe Photoshop CC and Illustrator CC. Explore Symbols and Repeat Grids as you develop your design.

Fine-tune your app or website’s design by adding final images and text to your artboards and Repeat Grids. Add symbols and apply symbol overrides and use images, colors, and character styles from Creative Cloud Libraries and the Assets panel.