Get in touch

Let us know your requirements and we'll get back to you as soon as possible.
Drop files here or click to upload

We care about your privacy and automatically agree to the following NDA. This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Thank you, !

Thank you very much for submitting your inquiry to Xfive! We'll be in touch with you soon.
Gopika Setlur
Gopika Setlur Elefint Designs, Inc.
Xfive is an extremely reliable and professional development partner. They have helped us improve our process and offerings. We really appreciate their flexibility, quality, and attention to detail.
Home Blog UI Design on Windows: Adobe XD, Figma, Affinity Designer

UI Design on Windows: Adobe XD, Figma, Affinity Designer

The better, brighter future for UI designers on Windows is here.

If you are a UI designer on Windows, until recently your only options were Photoshop, Illustrator, or online tools like Webflow. Well, things have changed and now there are three new tools you can use for UI design: Adobe Experience Design (XD), Figma and Affinity Designer.

To get you up to speed, here is what has happened over the last few months:

Why are these tools better for UI design than Photoshop or Illustrator?

Some people say that tools cannot make you a better UI designer, saying  “the tool is just a tool,” like a pen is to a writer. However, I believe it’s much more than just that.

A better tool will make you a better UI designer.

Why is that?

  • A tool that makes common UI design tasks easier and faster allows you to try more iterations of design.The time you previously spent on fighting the tool, you can now spend on elaborating your design.
  • Limited set of visual effects in modern UI tools allows you to focus on basic design principles instead of decoration effects.
  • Modern UI tools emphasize usage of components, which help you to be more consistent in your designs.
  • The tools make collaboration and getting feedback easy, which is crucial for good UI design.
  • Last but not least, these tools better support modern UI workflows.

Modern UI design workflow

Traditionally, user interfaces were designed as high-fidelity mockups in Photoshop. They were then delivered to stakeholders for approval. With the expansion of mobile apps and websites becoming more and more complex, such approach isn’t sustainable anymore.


  1. We start with low fidelity mockups so we can quickly move to the prototyping and testing phase.
  2. As individual components emerge in our mockups, we start to build a pattern library  (also called design system or style guide). A library allows easy reuse of components across the project.
  3. We try to design for constraints to which our components are exposed instead of designing for endless screen resolutions.
  4. We design new features by composing existing components. If features require new components, we can design them in the context of the new feature and add back to our library.

Common characteristics of modern UI design tools

Modern UI tools like Figma or Adobe XD try to keep up with this speed of the modern workflow. Here are some common characteristics of them:

  • They are lightweight and fast
  • They have limited functionality with focus on UI design (sometimes too limited, as they are often beta versions)
  • They are vector based
  • They have an advanced and easy to use artboards functionality to allow many design versions. Figma takes this even further with frames (more on them below)
  • They implement components (Figma) or symbols (Adobe XD, Affinity Designer) which allow the reuse and easy update of common visual elements across the project
  • They use constraints (Figma, Affinity Designer) to control behaviour of child elements
  • They allow sharing designs for online viewing and feedback
  • They implement prototyping (Adobe XD, Figma) or integrate with 3rd party prototyping tools

Let’s get to designing

Let’s compare Adobe XD, Figma, and Affinity Designer on a small design project. Our goal is to create a team page that would display team members and allow a new team member to apply.

This is what I created in Adobe XD:


Team List designed in Adobe XD

Thank you page designed in Adobe XD

…and for comparison, this is the same design made in Figma:

Team List in Figma

Figma – the most noticeable difference in is background blur on the images. Adobe XD does them more nicely

Let’s break down how we got to these designs and describe some differences in the process of particular tools.

Getting to know the tools

We will start by exploring the tools’ user interfaces.

Adobe XD

You can install Adobe XD from the list of apps in the Creative Cloud application. If you don’t have a Creative Cloud subscription, you should still be able to download Adobe XD beta for free, you just need to sign in.

Once you open XD you will be welcome by a minimalist, modern interface:

Adobe XD interface (click on the image for large version)

The hamburger menu on the top left hides menu for the files operations. Right from it there are two tabs for switching between the Design and Prototype mode.

Below, starting from left, there is a tool box with common tools like Select, Rectangle, Ellipse, Line, Pen, Text, and Artboard. On the bottom there are icons for Layers and Symbols.

In the middle, there is a canvas to which you can add an unlimited number of artboards. Once you select the artboard tool you can choose from predefined artboard sizes, like ‘iPhone 7’, etc.

On the right, there is a property inspector, which displays all options of the currently selected item. The property inspector cannot be hidden for now.

A small disadvantage is that XD doesn’t use tabs for different files, so if you have more files opened they will be grouped under the application icon in the taskbar.

Adobe XD doesn’t have guides or rulers at the moment.


To start working with Figma, sign up on their website. Figma has just introduced a new pricing model, but notice you can still use it for free if you don’t need the team features.

While Figma is a web based tool,  I strongly recommend getting a desktop app. Not only does it allow  the use of keyboard shortcuts more consistently, but working with the desktop app gives you a somewhat more realistic feeling. Even though Figma is fast as a web app, it feels even faster as a desktop app.

Figma desktop app displayed (click on the image for large version)

On the top we have the application menu, which is a duplicate of the hamburger menu used in the web app. Below there is a row with the clock icon linking to the dashboard with your files, then the tabs with opened files.

Next to the hamburger menu there is a toolbox with Move tools (Move, Scale), Shape Tools (Rectangle, Line, Arrow, Ellipse, Polygon, Star and Place image), a Pen tool, Text tool, Team Library, and Comments. In the middle you can rename a file, and on the right there is a Share button, View settings, Zoom level, and Export functionality.

Below is the Objects panel, with frames, groups, and layers, followed by the canvas and Properties Panel.

Figma has rulers and guides.

Affinity Designer

Sign up to get a 10 day trial version of Affinity Designer. If you’d like to continue using Affinity Designer it will cost you $40 USD; however, this is a one time fee.

Affinity Designer interface

Affinity Designer interface (click on the image for large version

The slightly more complex interface of Affinity Designer is reminiscent of Photoshop or Illustrator. We can see this is a multipurpose tool oriented on illustrators too.

Contrary to Figma and Adobe XD, it allows you to reorganize panels. It also has advanced grid and guides managers.


Grid and guides manager in Affinity Designer

Grid and guides manager in Affinity Designer

Framing your design – artboards

When you create a new file in one of the tools, you will start with an empty canvas. On the canvas, you can create an unlimited number of artboards. An artboard is like a frame for your design.

You can choose from predefined artboard sizes – like Desktop/Web, iPhone, iPad, Android/Google phone and tables – or create a custom one.

Figma takes the concept of artboards even further – instead of artboards, it uses frames, and you can nest one frame within another.

Frames in Figma is one of its most powerful features.

A frame creates a new context for its child elements – you can align them to the frame bounds and also set constraints in that respect. For example, if the parent frame expands, the child element can stick to one side of it, scale with it, etc.

This is very much like front-end development, where child elements are nested in parent elements in the DOM tree. Designing in Figma is a lot about creating frames to group elements or components.

As you can see in the following image, you can manipulate the frame in many ways and also set constraints.

Frames in Figma

In Figma, everything can be framed

Contrary to that of Figma, in Adobe XD you can only group related elements, as group options are quite limited. You cannot align child elements within a group, and Adobe XD doesn’t implement constraints. However, it’s quite likely it will come with them or with a similar system quite soon.

Adobe XD groups

Adobe XD only has groups

Affinity Designer is somewhere between Figma and Adobe XD. It uses group and also implements constraints. The groups create bounds for the child elements.

Connecting the dots – prototyping

When someone submits our contact form, they get to the ‘Thank you’ page. In Adobe XD we can describe this relation in the Prototype mode. In the design mode we can duplicate the ‘Team list’ artboard and change it to the ‘Thanks’ artboard; then we can set connection from one artboard to another.

Adobe XD Prototype mode

This allows us to think about the flow on our website or in our application from the beginning of the design process, because it helps us think of questions, like “How does the user gets back from the thank you page?” This way we can often remember missing UI parts or tweak the UI in a way that working with static screens wouldn’t allow us.

Figma has recently introduced prototyping mode, too. Affinity Designer doesn’t have prototyping at the moment.

Designing effectively – symbols and components

In the previous section we have duplicated the ‘Team’ artboard to make the new ‘Thank you’ page. Notice how  both the Team and Thanks page share some parts, like header and footer; we will make these parts reusable so later we can update them easily.

In Adobe XD we can achieve this by using symbols. For now, the symbols implementation in Adobe XD is pretty basic, it means you can only override texts and bitmaps in symbol’s instances. When you update any other property of any instance, like color, all symbols update as well.

Adobe XD Symbols panel

Adobe XD Symbols panel

Symbols cannot be shared across different files, but this is a feature Adobe has already started to work on.

Figma not only calls the reusable parts differently (‘components) but also implements them in other ways, which allows for much more customization of them. The main difference is that when you convert an element to a component in Figma, it becomes a master component. Instances are true instances, and any overrides to them do not automatically update the master component.

Components in Figma

Components in Figma are more advanced

Figma also has a special feature called Team Library, which allows the sharing of components across the files. If you add a component to the Library, it becomes available in other files and you can update your components from the libraries.

Updating components from Team Library in Figma

This is a great feature to build a components library or a design system. Note, that since July 1st, this feature is only available in the paid plans. If you’d like to use components on the free plan, you will have to store them in the same file when they are used.

Symbols in Affinity Designer work similarly to those in Adobe XD, but you can override more properties of the instance. Components cannot be shared across more files either.

Designing effectively, pt. 2 – repeat grid and layout grid

Adobe XD implements Repeat Grid for easy replication of elements. Check out a small demonstration that shows how easily we can update and repeat elements:

Adobe XD Repeat Grid

Adobe XD repeat grid is easy to work with; we can update content by dropping images and a text file on them

Figma doesn’t have a functionality for repeating elements, but it has Layout Grids, which allow you to define a custom grid and allows control alignment and behaviour of the elements on the grid.

Figma’s Layout Grids

Figma’s Layout Grids

Designing for constraints

Figma’s constraints allow you to resize the master frame and control position, scale, etc. of the child elements. Always try to think about and set constraints of the child elements right away to save you time later.

Constraints demonstration in Figma

Constraints demonstration in Figma

Constraints can be partially used with a layout grid, but the grid itself doesn’t change when the parent element is resized (unlike, say, how Flexbox would do it). To change the position of elements on the layout grid, you need change the number of rows and reposition the elements.

Adobe XD doesn’t have constraints implemented, at the moment. When you resize artboards, elements on it don’t resize. When you resize groups, their content resizes, but sometimes in a way you don’t intend them to.

When you resize groups in Adobe XD, some child elements may resize in a weird way

Luckily, resizing a repeat grid is very easy and intuitive.

Resizing Repeat Grids in Adobe XD works well

Affinity Designer implements constraints in similar way as Figma.

High-fidelity design

Once you have the basics of your design done, you may want to give it a few bells and whistles here and there.

All three tools can accomplish most of the task you may need for UI, but of course, they cannot fully compete with Photoshop or Illustrator. On the other hand, however, using colors, gradients, effects like shadows or background blur, or masking is often easier and more intuitive in these tools.

If there is some feature lacking that is easier work with the text styles. Currently only Affinity Designer allows you to define text styles, although their usage is a bit cumbersome.

If you want to reuse text in Adobe XD, you have to use symbols. In Figma you can use text components, and use them inside other components.

Cooperation, exports, and hands off to developers

Figma allows for the easy sharing of files, multi editing, and commenting. You can export frames as PNG, JPG, SVG. Figma allows to you copy CSS styles from elements.

Adobe XD has advanced sharing abilities, too. You can export specific assets or artboards as PNG, SVG and PDF files for web, iOS and Android. However, Adobe XD currently doesn’t have a way to copy CSS styles from layers.

Affinity Designer falls short here as it doesn’t allow online sharing files or getting feedback for them.

Conclusion – the ideal tool

For me, the ideal tool would be a Figma with two features added from Adobe XD – repeat grids and a prototyping functionality. Figma’s frames/constraints system is superior to anything I’ve seen in UI design tools so far. Once you get used to it, it’s hard going back to anything less advanced. It shouldn’t be difficult to add basic prototyping to Figma, or at least an integration with more prototyping tools, and I expect we will see it this year.

Updated 7/28/2017: Figma added prototyping and developer handoff.

Because Figma is web based, it was immediately available on all operating systems. Adobe XD “lost” over the last few months trying to catch up on the Mac version; during this time, new features were rarely added. Hopefully, the next months will bring more new features, especially constraints or a system similar to them.

Affinity Designer is a bit on its own – it’s a powerful tool and its focus is not solely on UI design. This can be both an advantage or a disadvantage for someone. Together with Affinity Photo it can be a great combo for a designer who doesn’t work very often with other designers. For many people, the one time fee can also be attractive.

About the author

Lubos Kmetko

Lubos Kmetko LinkedIn

Lubos Kmetko started to work for Xfive as a front-end developer in 2006. He currently helps with business operations and writes for the Xfive blog.

More from Lubos
More from Lubos

Comments (13)

Write a comment

Viet Nguyen

Adobe XD is not usable at all for design. At least in the beta status. It sounds very promising but due to the lack of features like symbols, guides it does not support you at all...

Jul 05, 2017


All of your screenshots show Symbols already in Adobe XD. Right above the layers button is the symbols button. And at least XD does have smart guides in the absence of persistent guides right now.

Jul 05, 2017

Lubos Kmetko

@viet Adobe XD already has Symbols in the Windows version too. It's been added in the June's release as mentioned in the article.

Jul 06, 2017

Jake Wilson

There is also this little tool called Sketch. Maybe you have heard of it since Adobe essentially copied it when making XD. I would check it out.

Jul 06, 2017

Lubos Kmetko

@jake that little tool called Sketch isn't available on Windows. This article is a comparison of UI design tools on Windows.

Jul 07, 2017

Tony Kim

In terms of Hi-Fi prototyping, I would recommend using ProtoPie ( You can compose brand-new interactions without codes and run on the smartphones immediately.

Jul 08, 2017

Julien Jolly

I agree with you. We tested figma and XD for a month. Figma was the winner

Jan 15, 2018

Lubos Kmetko

@Julien thanks, good to see, other people came to the same conclusion.

Jan 15, 2018

Ján Trgina

Great comparison. I am currently considering if I should use Figma and get to know it better or Affinity Designer. The thing is Affinity is more similar to Photoshop in terms of layer effects etc. In Figma I miss the Color overlay which is sometimes very usefol, like for example when you need to use it on transparent PNGs.. In figma you can only change the color adjustments like Hue, saturation and brightness (if I remember correctly). Also when I try to paste / drag n drop an SVG file into figma, it shows as a black box. Not to mention the ability to drag and drop PSD files into Affinity and edit it. It is not a big deal but it is nice to have.
But then there is the dealbreaker of Figma's export options .. I don't understand why Affinity does not export CSS, android XML etc when they try to position themselves as UI/UX design tool.
Fortunately Figma is quite easy to use and therefore I can use both.. but it is not ideal..

Jan 25, 2018

Christian Porri

Great article ! The facts are it's sometimes hard to decide which of these tools we should use starting a project. I've used both, one by project, of course, and arrived to the same conclusion about Figma.
That's also considering you can use Figma for free where XD need a more expensive subscription to Adobe CC. If you only need UI design and not all the print or video, photo chain based pro activities, that can makes a point... As these apps are offering very similar features.

In other hand, XD has the all Adobe team support, and all its knowledge in software suiting, and software UI... That's mean it could get great features in the future...
But here too, Figma showed a really devoted team, and a quick development pace.
It will be hard for both to stay focused on a constant improvement to more and more useful features and avoid getting an heavy all featured, and expensive, tool. Adobe already have this combo light+heavy, with XD and Illustrator but need to remarket it as specific UI pro chain and still expensive regarding to Figma.
Figma has to keep in mind its light approach, app UI, including webdesign UI. I recommend them to keep developing desktop version app. It makes difference for me with other web tools. It's not I don't appreciate web tools, but not for too long focused tasks. How to say, designing UI, for me, even if it has to be quicker nowadays, needs some "thinking", and private even maybe something like disconnected time... Iterating from draw to, and in, app. So this specific timework window stay better out the browser.

So, last but not least, it's great to see a Windows platform support... Or a support for designers who prefers to work on Windows and PCs for many reasons, and are not committed or tied to Apple.
I know designers are "traditionally" using Mac, but that was right in 1980s and 1990s... Apple is not the only one or need to be saved anymore. It's now a very powerful company, with (maybe too much) big influence on our techs and life.
So as we fought for web standards (and a more opened Windows and Microsoft), I agree to keep wanting a more platform free web and technologies, letting user choose Windows, Mac or Linux. So I find designers, design industry, school and teacher, then students, too focused, tied and committed on a just Apple (and Adobe) way and vision. It's sad.
So even if a large (and ostensibly visible) designers part works on Macs and iOS, an other (large too) part works (and love to do) on Windows, (with iOS too but also Android (and even Linux)). Figma was smart to understand that before Adobe, Sketch (and a few others).

Mar 10, 2018

Lubos Kmetko

@Ján thanks!

@Christian thanks, good points. It will be interesting to see how Figma does in long term, especially now that there is a new competition like inVision Studio or when Sketch added prototyping.

Mar 16, 2018


Thanks for an informative article.
Will point only that Affinity Designer supports some kind of symbols sharing. You can use Assets to create custom library, for example UI kit. But they do not remains connected between files.

Jun 06, 2018


I mostly do stuff for web design, which often includes logo work and modding and touching up various images. I have a XP-Pen Artist 13.3 Pro Display drawing tablet and Affinity Designer . Works for me . After Adobe moved to a subscription model, I looked around and tried a few different apps trying to find a replacement for Illustrator. I was so happy when I found Designer. For me, Designer is way easier to draw with and manipulate drawings than Illustrator.

Jun 30, 2020

Would you like to add something?

All fields are required. Your email address will not be published.


Related blog posts