Wait a minute… why 1420px, you ask? XD automatically adds a 20px margin between each repeating column. I prefer sticking to a saturated blue like #00AAFF or magenta #FF00FF, as these are similar to what we typically see for guides.Ĥ. Now let’s make our grid with the awesome Repeat Grid tool! Select the all three shapes, group them together, click the Repeat Grid button, and then manually set the width to 1420px.
Then, select and color the larger shape to a color of your choice and remove the border.
The two smaller shapes should already be white, just remove the border. This just allows the group to be automatically selected as we’ll see in step 4.ģ. Next, we want to set a color for our grid and group the shapes. Technically we don’t need to group the shapes as it becomes a group once we turn it into a repeat grid. We will address the height once we group our column and gutters and make our repeat grid.
Align shapes next to each other, select and copy the smaller shape using the keyboard Option key, and move it to the right side of the larger shape. Now, using the rectangle tool, let’s create two shapes: one at 15×15 and one at 15×70. First, pull up a blank canvas at 1920×1080 or simply use an area outside of your canvas in your current document.Ģ. Here are the quick steps we use to create a simple, reusable grid for any Adobe XD project:ġ. just having a gutter that sizes the grid appropriately, creating a grid as a symbol could also be useful.įor this walkthrough, we will use a standard 1200px max-width grid (1170px w/ outer margins). For those who like having the visibility of the outer gutter vs. If we simply use the built-in grid, we would have to adjust our margins with some math to display the grid at the appropriate max-width. This really comes in handy when you need to compare screens that show full-width elements that span wider than your established max-width. Yeah yeah, we know this was a recent feature added in one of the latest updates – thank you Adobe! However, I was still finding it useful to create a grid as a symbol for use on various artboard screen widths. In a world where technology is rapidly advancing and user expectations are rising, it’s no longer enough to have an average user experience to delight your users and surpass your competition you must strive for the exceptional. Just using the icon itself provides no reference to the space or container it would live in. A tall but not very wide icon would have the same spacing as an icon that was wide. This is especially helpful for developers looking at prototypes in developer mode. It made sense to outline the process within XD, as some users may be making icons directly within their project.Īdded bonus: The uniform sizing for all the icons and UI elements also allows us to align and space them consistently in relation to other elements. Obviously, we would just want to container transparent in Illustrator. However, making the fill transparent will allow the entire container and icon/element to remain selectable. Simply turning the container layer off or unchecking the fill just puts us back where we started. Not so awesome, as they are not always placed on a white background. Now the only problem was that I have a white background behind each icon or UI element. just exporting the individual element, it would be much easier to size them consistently, i.e., 32px, 24px, 16px, 12px, etc. If I keep the container with the element vs. Luckily, I had just created a guidelines template in Illustrator for a custom set of icons and UI elements that led to an “ah ha!” moment. The same inefficiency applies if we are repeatedly zooming in and out or selecting layers just to select an outlined icon or UI element. Nevermind the anxiety I am consumed with when observing this behavior, but I digress. Navigating to menus and toolbars painstakingly slows down production and creativity. Adobe users have long known that keyboard shortcuts can be huge time savers for repetitive or frequent tasks.
Whether you are using an existing Adobe XD icon library or creating your own, outlined icons can be a nuisance to select with the pointer tool. While the Adobe UX tool’s improvements have been a life saver, we’ve found a few Adobe XD shortcuts and workflow techniques that help maintain efficiency no matter the project complexity or size. They typically require fast turnarounds and usually up to 10-15 versions or rounds of revisions per feature. Here at Perficient Digital, we use Adobe XD on a daily basis for very large and sophisticated enterprise projects.
0 kommentar(er)
