Adobe XD Update (June 2020 Release): Stacks, Scroll Groups, Design Tokens and More

Howdy, Folks! So here Adobe has come up with the new June 2020 Release: Adobe XD June 2020 Update (Launched on 16th June 2020).

What’s new exciting design manipulative features, we are getting this time! Here We Go…

This 30th Release of XD is packed with new features across Adobe XD, with new ways to design, prototype, and collaborate. Moreover, language support for Italian and Russian is added along with already supported eight other languages.

To get started, you can download Adobe XD or just go and Update to XD 30 in the Creative Cloud application.

What’s New for Designing and Prototyping in XD

As we all know, Adobe XD is a fast, powerful and easy-to-use tool for UI/UX Design. Adobe’s creative team designs the features that help you to do your work in the best way.

How Adobe XD’s new features help in your work:

• Save your time
• Automate your routine tasks and
• Help you focus on most impactful work

Stacks

Stacks are a new way that enables you to work with groups and components in XD. Similar to Flexbox in CSS, Stacks are made of columns or rows of objects with equally set spacing between them. As you add, remove, reorder, or resize objects in a stack, all the other objects adjust themselves automatically, maintaining the spacing as you change your designs.

When you create a stack, XD detects the direction of the created stack (vertical or horizontal). You can adjust the spacing between objects right on the canvas, either distributing objects evenly or not. Just Hover over the space between objects in a stack and press S to adjust one space or press Shift+S to adjust all spacing in the stack equally. No more tedious adjustments when designing common UI elements like cards, dropdowns, navigations, and modals.

Here, you can see a demo of Stacks from Adobe XD Team…

Source: theblog.adobe.com

If you’re working with a design system, Stacks, along with other Content-Aware Layout features such as Responsive Resize and Padding, make your components flexible and dynamic. Grab a component from your design system and customize it – change text, add or remove objects, or reorder objects – without having to reconstruct the component every time.

Scroll Groups

Scroll Groups make your created prototypes behave like live websites and apps. Yes, with the help of it, you can make parts of designs scroll for designing feeds, lists, carousels, galleries, and more. They are so excited to deliver Scroll Groups as part of this release because it is one of the most-requested features on the Adobe XD UserVoice.

You can turn any part of design into a Scroll Group and set it to scroll vertically, horizontally, or in both directions. After creating a Scroll Group, you’ll see blue handles on the canvas that can be used to adjust the visible scroll area. In the preview of your prototype, you’ll be able to scroll through the designated area.

Here is the demo of Scroll Group from Adobe XD Team

Source: theblog.adobe.com

Added New Ways of Work Collaboration with Developers

Not just being a great design tool, XD is a platform for design collaboration. With XD, you can manage design projects by ideating with the design team, sharing specifications with developers, and also can share the design job accomplishments with your clients.

Design Tokens

Design Tokens a new way for designers and developers to work together with XD. Now, you can add custom names to colours and character styles in your Assets panel that are automatically published into downloadable CSS files for developers. After this, it’s easy for developers to reference the CSS file in their code and if you change any styling in your designs, they can simply grab that updated CSS without doing the update in their code manually.

The “Design Tokens” concept was first introduced by Jina Anne as part of the Lightning Design System. Design tokens are a simple way to reference visual design decisions, like a colour or the styling of body text, that can be used in code. At Adobe, design tokens are used in Spectrum, their design system, like using “button-cta-background-color” to describe the blue colour used on Adobe.com webpages.

There is no need to change your workflow or use additional tools to use Design Tokens; just double-click on a colour or character style in Assets panel, give it a name, and the rest will be handled by XD. When you create or update a “Share for Development” link, automatically the link of a downloadable CSS file will be included with all represented tokens. Developers can then add this file to their application so all the styling is consistent and always up to date.

Here is an accurate demo to “Design Tokens” in XD…

Source: theblog.adobe.com

Integration with Slack

The Creative Cloud app for Slack is one of the most popular integrations that lets you share assets, get notifications, and stay up to date on your design projects. This latest release with deeper Slack Integration update adds support for shared channels, introduces an Activity Stream to get rich notifications and updates on your projects, and a series of new bot commands to manage notifications, provide feedback, and more.

Source: theblog.adobe.com

The Creative Cloud app for Slack can be installed in the Slack App Directory.

Durable links

As we all know, the design never gets its finalized until it is approved by the client or the final authority. And in between that you may need to share those designs with different audiences at different times. And now with the help of “Durable Links”, you can change the access settings on a Share Link in which you don’t need to create a new link. You can learn more about Share Links in the XD help documentation. 

And the last one…

Adding Data Visualization with Chart in XD

With this new Chart plugin for XD, you can add data visualizations to your designs with just a few clicks. This plugin builds a variety of fully-editable vector charts – line charts, area charts, bar charts, scatter plots, and more – based on real data or random data.

Install Chart for XD for free in the XD Plugin Manager.

At the time of chart plugin installation, you can select the type of chart you want to create and choose the source of data you want to use. You can use a different source of real data Google Sheets, CSV, JSON, or a REST API endpoint based on your personalized requirements.

Moreover, you can use the Chart Templates for more customizations in colours, text styles, line thickness and other styles to maintain consistency in your brand experience.

Conclusion

So, this was the fully updated information about the latest of Adobe XD June 2020 Update. And hope it would be helpful to you from downloading -> installation to using it successfully on your system. If there is any difficulty at any stage, feel free to contact KrishaWeb Design Team.

Thank You…