Creating a Responsive Design System: Sketch, Figma and Adobe XD Compared

Paul Boag

There have been significant improvements in support of responsive features in all the popular UI design tools. However, there is a clear winner as things currently stand, and it might just surprise you.

I found myself in a somewhat unique position recently. I was asked to create a design system for a client (nothing unusual in that). However, because they had no real UI experience, they had no preference over which tool I used to do the job.

My job was to create the design system in a graphics package, not to generate the code. It is important to stress that as the best place to create a responsive design system is in HTML, CSS and Javascript, as that will behave just like the final website, unlike a graphics tool. However, that was not the right fit here.

They had a team of graphic designers who needed to be able to quickly mockup pages. They knew these people had little experience with UI design and none with coding. They would need a design system that helped them make the right decisions and gave them a realistic sense of how the final site would behave.

Any design system I built would need responsiveness baked in, as this is an area print designers often struggle with.

That left me with a question. Which tool would be best for building a responsive design system?

To answer this question; I carried out a short review of the three primary UI design tools:

The Three Characteristics of Responsiveness

To ascertain the capability of these three tools for building responsive interfaces, I decided to look at whether these tools could replicate three responsive browser behaviours. These where:

The scaling of elements to fit the available area.
The way a browser pushes content down the page as text flows onto additional lines.
The ability to adapt layout positioning based on breakpoints.

I began by looking at Sketch, as this was the tool I was most familiar with.

How Sketch Handles Responsive Design Systems

Sketch has supported a degree of responsiveness for some time. Like all of its competitors, you can pin content to the left or right edge and fix the width or height of elements. That makes it relatively straightforward to add a considerable degree of responsiveness.

Responsive design system toolkit in Sketch
Sketch has supported basic responsiveness for some time.

Beyond that, things start to break down. For example, if you have a long heading that wraps onto a second or third line, it will overlap items lower on the page.

Sketch showing a long heading text box overlapping with other elements.
Adding a longer headline has always lead to elements overlapping each other in the past.

Of course, that can be fixed by resizing elements manually. However, you cannot do that if the elements are held within a symbol, which will be required when building a design system.

The workaround to this problem until recently was to use a plugin called Anima. The problem is that although a superb plugin, it could sometimes be buggy and didn’t always respond predictably.

Anima plugin within sketch helping with responsive design system
Anima is a powerful plugin that will accommodate elements expanding, by pushing elements below it down the page.

I, therefore, had high hopes when Sketch released version 58 a few days ago. At first glance, Sketch did successfully overcome this problem with the content being pushed down the page as text expanded. Unfortunately, it does have some limitations, the biggest of which is that it seems to stop working once you have symbols nested.

That said, it is a huge step forward, and it’s great to see native support.

What ultimately let Sketch down was the limitation of symbols and its lack of support for breakpoints. Other than a few overrides, there are many limitations of what you can do within a symbol. The biggest of which is the fact that you cannot adapt the layout of a symbol for different screen widths.

The only way around this was to detach the symbol and create a new layout. Of course, the downside of this is the fact that global updates you make to the symbol will not be reflected across the detached element. In effect, it breaks the power of a design system.

Sketch was so nearly there, but in the end, I decided to look elsewhere, and so I turned my attention to Figma.

Building a Responsive Design System in Figma

Unfortunately, Figma seemed even more limited than Sketch in many ways. It did have simple responsiveness. However, I couldn’t find a way to make wrapping text force content below it further down the page.

Also, like Sketch, it didn’t allow me to adapt the layout of a component (Figma’s equivalent of a symbol).

Don’t get me wrong. There was a lot I like about Figma. However, from a responsive design system perspective, it felt like a step back from Sketch 58.

There is a lot to like about Figma, but for creating a responsive design system, it just wasn’t the right tool.

That said, I didn’t spend long looking at Figma. I kept feeling like I must be missing something as other aspects of its feature set are impressive. Perhaps I did, in fact, not see how to do what I needed to.

Of course, that in itself is not a good sign. If I couldn’t work out how to use the tool, then it probably wasn’t a good fit for my inexperienced client.

With both Sketch and Figma not providing what I wanted, I turned my attention to Adobe XD.

Can You Build a Responsive Design System in Adobe XD?

I wasn’t expecting much from Adobe XD. I had all but dismissed the company since its move to a subscription model. I had looked at XD when Adobe released it in beta, and it struck me as a somewhat desperate attempt to compete with Sketch.

At first glance, it appeared XD was going to be inferior for responsive design systems when compared to Sketch.

Although its responsive featured work in precisely the same way as Sketch, it didn’t have the more powerful features introduced in Sketch 58.

However, it turned out that it didn’t need to because it had something much better — the ability to edit instances of a component.

Adobe XD allows you to heavily customise instances of components, while still enabling you to make global changes.

While Sketch adopted an override system for editing its symbols, XD allowed you to modify any aspect of an instance. What is more, you could do so without losing the ability to make global changes by editing the master component.

For example, I could move elements within an instance around without detaching it from the master component. That allowed me to still update an instance by editing the master component, while keeping the changes I made to the instance.

That allows you to move or resize elements to accommodate text wrapping. It also lets you completely change the layout of an instance dependant on the available screen space, all while maintaining the ability to edit globally.

The final thing I loved about Adobe XD is it somehow seemed more predictable and intuitive. With both Figma and Sketch, I found myself using trial and error to replicate the effect I wanted, while in XD, it seemed obvious and just worked. However, I freely admit that it may be down to my mental model.

The Verdict

For my purposes at least, Adobe XD offers the best solution for replicating the responsive nature of the web in a design package. However, it isn’t perfect, and I don’t think any graphics package will ever be.

For example, I would love it if Adobe XD would support automatically pushing content down in the same way Sketch does. I would also like to be able to set breakpoints where the layout of an instance automatically changes. However, how technically possible these things are, I could not tell you.

What I can say is that all of the graphic packages have made considerable strides in improving their support for responsive interfaces and that bodes well for the future.

Stock Photos from Syda Productions/Shutterstock

Boagworks

Boagworld