Repeating grid is one of the most common things that one has
to do usually while creating a web user interface in Adobe XD. In this blog, we
will understand about the grids and how to create and repeat them in XD.
What is Repeating Grid?
In Adobe XD, there is an option of repeating grids. We can apply repeat grid on single object or group of the objects, press (Ctrl + R) or select the repeat grid option the right side and bottom dragging option will be activated then drag the handle right or downside to repeat the grids.
We can adjust the space between the columns of the grids by
clicking between the them. When the pink color space will be shown, we can
adjust the space equally by just clicking and dragging.
Using this option, you can even form a complete list of a
few elements that repeat most often. You can also manage their style.
This is the most time-saving feature of the Adobe XD when we
have to create the pages or the screens with the lists of repeating elements
then the repeat grid option is suitable for this work when we make changes
into the single elements of the repeat grid, it will automatically be applied on all elements of that group.
Let’s Take the Steps to Create the Repeat Grids
1. Open Adobe XD. Select the size of the Artboard.
2. Select any object you want and draw that object on the artboard. For drawing rectangle, select rectangle option form left panel or press
the (R) key.
3. Click on the Repeat grid option on the right-side panel.
When we click on that option the green color handles will be activated, drag
the handles right side or towards the bottom of the
Page to repeat the grids.
4. It will simultaneously create the same object by dragging
handles. Changing the padding between the elements are also possible. Just hover
over the gaps and use the double arrows to change the padding by increasing and
decreasing the gaps.
Uses of Repeat grid feature :
- We can use repeat grid for repeating images and texts or for both things. You can work with the texts using the repeated grids in several different ways. This can make fun too.
- We can update each individual instance
of a text objects in a repeat grid, or we can also drag the already written
texts files(.txt) into the repeat grid and will automatically adds the contents
of that particular file to the repeat grid.
- In repeat grid we can update individual text elements by holding (ctrl) or (MAC) and clicks on the text in the repeat grid. Or we can just simply double click the text and edit directly.
- Working with images in the repeat grid we can build repeated patterns and the image that are filled in the object or shape we created will be repeated with the patterns respectively.
- We can change the images of the
grids individually by dragging one-by-one image into the objects or we can also
select multiple images and drag them into objects of the repeat grid to change
the images of the repeat grid.
How to create interactions using this :
- To create interactions from a repeat grid, we have to create another art board by pressing (A) and choosing the art board size.
- And then select the prototype option or press the (ctrl+tab) to go to the prototype option, select the repeat grid on the first art board.
- Then the blue arrow will appear drag the arrow to the destination page or art board or in the right panel select the destination art board from the drop-down options.
- select
the animation mode to transition for art board animation then save the file and
click on the preview button and see the animation in the preview.
How is grouping possible ?
Grouping of the elements is also possible within the repeated grid and the animation you created from those groups. To make the group of the objects select an object and then hold (shift) and click on the others objects to select them also and after selecting them all right click and select make group option or simply press (Ctrl+G) to make the group of the selections. Then go to prototype option and drag the arrow to the destination page and it will link the art boards and then save the file and see the preview of the art boards to see the animations.
How to adjust the negative space?
We can also adjust the negative space in the repeat grid by mouse hover the overlap space of the grid the cursor will turn into double arrows then drag them upwards or downwards to adjusts the negative space of repeat grid. Adding some extra elements in the grid will create the negative padding space into the grid.
Want to master Adobe XD and the sense of UI designing? If
yes then go for UI & UX design courses from ADMEC Multimedia Institute in Delhi,
India.
For better training, join Adobe XD course from experts.
Learning from ADMEC will give you a core understanding on
the essential topics, fundamentals and basics that very rarely are being taught
in the current scenario.
Get to know more about the teaching mythology of ADMEC here –
About ADMEC.
No comments:
Post a Comment