Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

medium bookmark / Raindrop.io |
If you are a UI designer at Windows, until recently, your only options were Photoshop, Illustrator or online tools like Webflow. The situation has changed and now there three new tools we can use for UI design – Adobe Experience Design (XD), Figma and Affinity Designer.
Let’s sum up what happened in the last few months:
Some people say that tools cannot make you a better UI designer. A tool is just a tool, like a typewriter or a pen for a writer. I believe it’s more than just that.
A better tool will make you a better UI designer.
Why is that?
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.
Instead:
Modern UI tools like Figma or Adobe XD try to keep up with this speed of modern workflow. Here are some common characteristics of them:
Let’s compare Adobe XD, Figma and Affinity Designer on a small design project. Our goal is to create team page which 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:
Figma – the most noticeable difference in is background blur on the images. Adobe XD does them nicer
Let’s break down how we got to these design and describe some differences in the process in particular tools.
We will start by exploring the tools’ user interfaces.
You can install Adobe XD from the list of apps in the Creative Cloud application. If you don’t have 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:
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, Artboard tool. On the bottom, there are icons for Layers and Symbols.
In the middle there is a canvas to which you can add a 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, neither rulers at the moment.
To start working with Figma, sign up on their website. Figma has just introduced new pricing model, but notice you can still use it for free if you don’t need the team features.
Figma is a web-based tool, but I strongly recommend getting a desktop app. Not only it allows to use keyboard shortcuts more consistently but working with the desktop app gives you somewhat more realistic feeling. Even Figma is fast as a web app; it feels even faster as a desktop app.
On the top, we have 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 hamburger menu, there is a toolbox with Move tools (Move, Scale), Shape Tools (Rectangle, Line, Arrow, Ellipse, Polygon, Star and Place image), Pen tool, Text tool, Team Library and Comments. In the middle you can rename the file and on the right there is Share button, View settings, Zoom level and Export functionality.
Below is the Objects panel with frames, groups, and layers, then canvas and Properties Panel.
Figma has just implemented guides.
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 one-time fee.
A slightly more complex interface of Affinity Designer reminds 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 an advanced grid and guides managers.
Grid and guides manager in Affinity Designer
When you create a new file in one of our tools, you will start with an empty canvas. On the canvas, you can create an unlimited number of artboards. Artboard is like a frame for your design.
You can choose from predefined artboard sizes, for example, Desktop/Web, iPhone, iPad, Android/Google phone, and tables, or create a custom one.
Figma takes concept of artboards even further – instead of artboards it uses frames, and you can nest one frame in 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. So designing in Figma is a lot about creating frames to group elements or components.
As you can see on the following image you can manipulate with frame in many ways and also set constraints on it.
In Figma, everything can be framed
Contrary to that in Adobe XD you can only group related elements and 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 soon.
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.
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 Team list artboard and change it to the Thanks artboard. Then we can set connection from one artboard to another.
This allows us to think about the flow on our website or in our application since the beginning of design process. For example, how the user gets back from the thank you page? This way we can often remember about missing UI parts or tweak the UI in a way which working with static screens wouldn’t allow us.
Neither Figma nor Affinity Designer implements prototyping. Figma integrates with Framer however it isn’t available on Windows.
In the previous section, we have duplicated Team artboard to make the new Thank you page. We could notice that the both Team and Thanks pages 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.
Symbols cannot be shared across different files, but this is a feature Adobe already started to work on.
Adobe XD Symbols panel
Figma not only calls the reusable parts differently – components – but also implements them in other way and allows much more customization to 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, any overrides to them do not automatically update the master component.
Components in Figma are more advanced
Figma also has a special feature called Team Library which allows sharing 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 library.
Updating components from Team Library in Figma
This is a great feature to build components library or a design system. Note, that since July 1 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 Adobe XD, but you can override more properties of the instance. Components cannot be shared across more files either.
Adobe XD implements Repeat Grid for easy replication of elements. Check out a small demonstration how easily we can update and repeat elements.
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 functionality for repeating elements, but it has Layout Grids which allows you to define a custom grid and allows control alignment and behavior of the elements on the grid.
Figma’s Layout Grids
Figma constraints allows you to resize 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 can be partially used with layout grid but the grid itself doesn’t change when the parent element is resized (say how Flexbox would do). To change the position of elements on the layout grid, you need change number of rows and reposition elements.
Adobe XD doesn’t implement constraints at the moment. When you resize artboards, elements on it don’t resize. When you resize group, their content resizes, however sometimes in a way you don’t intend to.
When you resize group in Adobe XD, some child elements might resize in a weird way
Luckily, resizing repeat grid is very easy and intuitive:
Resizing Repeat Grid in Adobe XD works great
Affinity Designer implements constraints similarly as Figma.
Once you have the basics of your design done, you might want to give it a few bells and whistles here and there.
All three tools can accomplish most of the task you might need for UI, but of course, they cannot fully compete with Photoshop or Illustrator. On the other hand 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 reusable text in Adobe XD, you’d have to use symbols. In Figma you could use text components and use them inside other components.
Figma allows 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 the 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 and getting feedback for them.
For me, the ideal tool would be a Figma with two features added from Adobe XD – repeat grids and prototyping functionality. Figma 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, and I expect we will see it this year. Or at least integration with more prototyping tools.
Because Figma is web based, it was immediately available on all operating systems. Adobe XD “lost” 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 is the focus is not solely on UI design. This can be both advantage and 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 one time fee can be also attractive.
AI-driven updates, curated by humans and hand-edited for the Prototypr community