\ The Importance of Design Language Systems and Auto Layout

The Importance of Design Language Systems and Auto Layout

Most of us know Design Language Systems (DLS) as a collection of tech used to build apps for Android, iOS, or Salesforce. It’s the catalog of components where we get the iOS drawer, android buttons, salesforce cards, etc. However, too few of us have thought about how we can create engaging and efficient DLS for our clients. Tackling problems like the evolution of a catalog of components to a DLS that has efficiencies built in could speed up design process, cut down on redundancies, and provide value impact to organizations and designers alike.

In addition to creating DLS components, designers should also look into incorporating Figma’s Auto Layout components as an easy way to maintain alignment as components change size. Building Auto Layout into DLS cuts production time in half and yields high-fidelity mockups. Strive’s Technology Enablement experts and team of UX/UI designers come in doing just that, spending less time on production work and more time problem solving. Remember, the more time designers spend designing mockups, the more money and resources companies are paying.

Greater speed also means having the ability to quickly adjust to new requirements or iterating based on feedback. These changes are usually setbacks, not just for the designer, but for developers and other downstream teammates that depend on the mockups.

Lets take a look at how DLS + Auto Layout can speed up your design process:

Design Language Systems

How many times have you had to take out a component and then detach it, resize it, and then measure it to make sure it fits the grid? For those that don’t have a DLS at all, it’s even more nuanced. So, instead of doing either, we simply click on the text ‘label’ and type in the new label, ‘addresses’. Thanks to Auto Layout, the component resizes to fit the bigger text.

Design Language System

What if we want to change the state to make it look like ‘addresses’ has been selected? Well, with a set of prebuilt components, we can easily swap the unhighlighted, default navigation bar with the highlighted version. Note that even with swapping the components, the Auto Layout ensures that the text, padding, position, styling etc. are kept intact.

The next four GIF’s are an example of true time saving potential and how Strive partners with our clients to provide value.

Design Language Systems

Design Language Systems

Design Language SystemsDesign Language Systems

Design Language SystemsDesign Language Systems

If you work with data-heavy applications, you’re used to the extraneous work that revolves around creating or updating tables. Generally, this means resizing, measuring, and aligning every column, just to update a single table! Not to mention dealing with tables that are particularly long and take hours of your time. Instead, Strive has developed a component that allows designers to simply bring a table component out, edit a column to fit the styling using switches, and then copy & paste to create a table. In some of our even more advanced tables, we have developed columns where placeholders like currency, data, etc. has been prefilled.

It took us less than a minute to create… Can your DLS do that?

Interested in learning more?

Here at Strive, we take pride in our Technology Enablement practice, where we can assist you in your UX/UI needs. Our subject matter experts team up with you to understand your core business needs, while taking a deeper dive into your organization’s growth strategy. Click to learn more about our digital experience capabilities and how we can help.

Authored by Strive Technology Enablement Practice

Categories: blog, Digital, Technology Enablement, Thought Leadership
/chroot/home/striveco/striveconsulting.com/html/wp-content/themes/starting-point/resources/views/index.blade.php