AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Adobe xd scrollable area3/25/2023 ![]() Here, we have discussed the scroll effect and groups. However, we can also create a scroll group for vertical scrolling, but scroll groups are useful for creating a specific scroll effect in the same container. To scroll the artboard for a long design, we can increase the artboard's height.We can also have the nested scroll groups for creating multiple levels of scrolling effect in our design.Use the repeat grid feature or padding to adjust the scroll objects properly.We can use these actions to make it more realistic. The scroll groups can also be combined with component states and actions such as auto animate, overlay, and scroll.When previewing the design on different devices, use your touchpad, mouse in the respective direction to experience the scrolling feature.Now that we are familiar with the scroll groups and scrolling effects, here are a few tips that will be helpful for you: Add scroll groups in a separate artboard and publish them as part of the design specs as a workaround. ![]() Scroll groups do not work in design specs. Similarly, we can have horizontal or vertical and horizontal scroll effects. To preview the scroll effect, press the Ctrl+Enter key combination to preview the screen. We can have a preview for viewing the scroll effect. Once the width of the scroll group is defined, our objects are ready to be scrolled. Drag the slider to define a width and select the items that need scrolled. After selecting the scroll option, the width slider will automatically set to the objects. Now, our final step is to define the width of the scroll group. These options are horizontal scroll, vertical scroll, and vertical and horizontal scroll, respectively. Select any scroll option from the given options in the above image. Now, select the scroll option from the right sidebar menu. For now, if you are not familiar with the repeat grid, you can manually copy and paste the objects. We will explain the repeat grid feature in the upcoming sections. You can also use the repeat grid feature to create the same card or container multiple times. Now, create objects that you want to make scrollable. We are selecting iPhone 12, 12 pro artboard sizes. Select any of the artboards as per your requirement. ![]() To design in Adobe XD, we have to choose an artboard. How to Create Scroll Groups in Adobe XD?įollow the below steps to create the scroll groups: Let's understand how to create scroll groups. In this section, we will discuss how to create scrollable objects in Adobe XD. There are three different buttons available in the right sidebar for horizontal, vertical, and horizontal and vertical scrolls. XD supports horizontal and vertical scrolling. The scroll groups feature useful for creating sliders, carousel, and navigable maps. It provides a real-time experience of the application. Now, using Adobe XD we can create scrollable objects which will be scrolled without affecting other components of the design. Before the scrolling feature, we need to create multiple screens for displaying more content of the design. It is one of the finest features of the Adobe XD that allows us to create the content scrollable in a single frame. Scrolling is a new feature of the Adobe XD which was released with XD version 30.0.
1 Comment
Read More
|