Explore the Affinity Designer user interface. Artwork: Looking at Grass by Tiago Galo. Affinity Designer is a cross-platform vector design tool that's simple, streamlined, and easy to use for UX, UI, and responsive web design. You can create branding materials, websites, app interfaces, logos, and so much more. Learn how to incorporate Affinity Designer into your own UX design process.

Affinity Designer is a vector or raster app. It’s a competitor to Adobe’s Illustrator and allows you to design various elements for print or digital publication.

It’s part of the Affinity package of design tools made by Serif. Use it to do anything from making a business card to mock up an app. Affinity Designer is made for Mac iOS, Windows, and the iPad.

Here, we’ve collected some of the best for everyone from beginners to more seasoned pros, a mix of video and written tutorials. It’s a great place to start for upskilling with your first steps in Affinity Designer!

Affinity Designer UI Overview

If you are new to Affinity Designer or just want an overview of the tool and what it looks like before making a purchase, this UI overview is the place to start. The video lasts less than 5 minutes and walks through the user interface, highlighting a few key elements of the software.

Affinity Designer: The File Menu

Another beginner tutorial, this video takes you through the file menu and looks at each option and how to use it. Rory Townsend, who made the video, also has similar video tutorials with each of the other menu options to help you really get a good hold on all the things you can do with Affinity Designer and where each individual tool or option is located in the menu.

Affinity Designer: 10 Basics

This is the ultimate getting started video guide for Affinity Designer, with all the basics in one video. You’ll learn how to get started with a new document, use premade and custom shapes, work with colors, see how layers work, combine shapes, work with vectors and the vector brush and pen tools, add text to a file, and save and export. It’s all in an easy to follow video and you can get all this information in less than 20 minutes. Plus, the video host Jesse Showalter, has plenty of energy so this tutorial anything but boring.

Affinity Designer Basic Logo Design

Affinity Designer is a tool that allows you to work with vector or raster images. That means you can create logos that can be scaled for any use with the software. In this tutorial, you walk through all the steps to create a simple vector logo using tools in Affinity Designer.

How to Create a Flat Vector Illustration in Affinity Designer

Because of vector functionality, Affinity Designer can also be used to create illustrations. This tutorial takes you through the steps to create a flat illustration, such as the example above, that you can apply to full-scale illustrations, logo, or icon design. The tutorial includes step-by-step instructions and plenty of screenshots that you can use to follow along on your own.

Using the Layers Panel

Using layers and groups is a powerful function that can help keep files organized and a lot easier to manage. Using them in Affinity Designer is fairly easy. Learn everything you need to know about layers and groups in this short video from the makers of the software.

How to Create an Icon in Affinity Designer

Icon design is something almost everyone comes across at some point. Affinity Designer is the perfect tool for creating all manner of icons. This tutorial takes you through the process step-by-step, and even includes some bonus information such as how to choose the right size when designing an icon and how to use various tools. Every step includes screenshots to make understanding easy.

Symbols in Affinity Designer

Using symbols as linked objects allow you to edit one element and it impacts everything in the design. (This is an awesome feature.) This tutorial shows you how to use symbols as intelligent linked objects for great global editing capability. (Learn this pro trick in less than 5 minutes!)

Using Text Effects

Affinity Designer Ui

Text manipulations can be somewhat controversial. Purists say you should never mess with a typeface, but sometimes you have to use certain effects to make it work for your project. This Affinity Design tutorial shows you how to do just that. You’ll get an introduction to text effect manipulations in this easy to follow video.

How to Create Patterns in Affinity Designer

Patterns have a lot of practical use from website backgrounds to the main artwork for a poster or brochure. From subtle repeating shapes to something a little bolder, there are a few different ways to create a pattern in Affinity Designer. This tutorial explores three options. Note there are a lot of steps here, but the instructions and screenshots are easy to follow. Don’t let the depth of the lesson intimidate you.

Affinity Designer for iPad

The recording of a live session provides an overview of everything you need to use Affinity Designer effectively on an iPad. You’ll get an overview of tools and the software as well as creating specific things (a playing card, book cover, and poster) using tablet-based tools. The tutorial lasts over an hour and is comprehensive.

Pen Tool Masking in Affinity Designer

Use the Pen tool in Affinity Designer to create a dynamic mask of a selection of an image and apply modifications. This is a cool feature that can take some time to learn and this tutorial gives you a jumpstart.

Affinity Designer Reset Ui

Shapes Around a Curved Line in Affinity Designer

In less than 5 minutes, you can apply shapes to a curved line. You’ll learn how to create a brush from a shape and use that to apply to any shape or size of curved line. The tutorial explains this function clearly and shows how to apply this highly functional feature.

Advanced Color Features in Affinity Designer

You can create, save, and store colors and fills in Affinity Designer. This is great for palettes that will be reused so you don’t have to manually renter color mixes every time. Using these advanced color features is easy to learn if you know the tricks offered in this video tutorial.

Everything You Need to Know About Affinity Designer Brushes

Brushes can help speed workflows and allow you to create custom stroke styles. This tutorial shows you how to use the tool including basics of the brushes panel, how to set up vector or raster brushes, how to create your own brushes, how to install brush packs, and how to use brushes from Photoshop or Illustrator.

Affinity Designer Point Transform Tool

Use the point transform tool to change the look of a geometric shape in Affinity Designer. This tool lets you change shapes and alters the look of objects.

Advanced Axonometric Grid Setup

An axonometric grid shows a three-dimensional object at a skewed angle so you can see multiple sides in the illustration. Affinity Designer allows you to set up an axonometric grid for projects. This tutorial takes you through creating the custom setup.

Affinity Designer Templates

We're covering the basics of Affinity Designer, helpful tutorials, comparisons with other apps, and the best templates and assets to use.

If you’re an app developer, you may be familiar with Apple’s SF Symbols—a huge array of vector iconography that can be easily implemented into your app’s user interface design. It’s compatible with iOS 13, watchOS 6 and tvOS 13 or later. The icons are designed to integrate with Apple’s San Francisco system font, which ensures optical alignment with neighbouring text and allows you to use line weight variations for each icon.

For more general information on SF Symbols, see Apple’s Human Interface Guidelines article.

Designing your own symbols

This is where things get interesting—you also have the ability to design and import your own symbol designs, using Apple’s SF Symbols template layout as a starting point. This template can be imported directly into Affinity Designer and used to create your own symbols, then brought into Xcode as a resource, allowing you to use it within your app design.

Exporting an existing symbol template

For starters, you will need to download the SF Symbols app directly from Apple’s Developer website. Once it’s installed, you can begin exploring the symbol categories within the app.

It’s a good idea to pick a symbol that roughly resembles the design you have planned for your own symbol. In this example, Matt Searston (our resident Affinity Designer Product Expert) has elected to design a cassette icon, so we might look for an existing symbol that is rectangular in shape, and so has a similar aspect ratio.

Once we’ve found a similar design, we can export a template to adapt our design to—go to File>Export Custom Symbol Template, then navigate to a suitable directory and click Export. This will create an .SVG file which we can then load into Affinity Designer.

Creating your symbol design

With the SVG loaded into Affinity Designer, you can begin creating your own design. Here are a few pointers regarding layer structure and layout:

It’s important to retain the layer structure that you see when importing the template SVG file. All of the symbol designs are located in a parent layer called Symbols.

Each line weight and size variant of the symbol is stored as a separate group with a logical naming convention. You have the line weight, then a hyphen followed by the size, for example:

• Ultralight-S for ultra light line weight in small.
• Regular-M for regular line weight in medium.
• Heavy-L for heavy line weight in large.

All vector layer content must converted to outlined curves with no line width. To achieve this, you can select the layers in question and from the top menu go to Layer>Expand Stroke.

Note that you don’t actually have to store each symbol variation as a group like in the original templates: for our cassette design, we simply flattened the layers using the Add boolean operation and outlined them, then named them correctly according to the convention. These imported into Xcode without any issues.

Using groups will however allow you to have multiple child layers for each symbol rather than flattening them all into one layer. You may prefer this approach for flexibility.

Underneath the parent Symbols layer, you will find the Guides and Notes layers. You should generally leave the layers in Guides alone, as they will help you ensure that your new design has correct optical alignment when neighboured with text. There are two layers named left-margin and right-margin which allow you to define leading and trailing margins—you can select the Move Tool V and drag the left or right nodes on the bounding box to change the horizontal scaling of these.

You don’t have to alter these if you don’t need to, however. To keep things simple, we recommend creating your new symbol design without repositioning the two margins, then only rescaling them horizontally if you require more padding between the symbol and text either side.

Whilst getting to grips with the template layout and designing his own cassette symbol, Matt developed an approach that may help when it comes to producing line weight variants for your design. He started by creating the Regular line weight in Medium size, which is recommended as that’s where the two margin guides are located.

He then duplicated the layers in his symbol design and created a Black line weight in Large size variant—this is the thickest line weight and largest font size. He then did the same for an Ultralight and Small variant. By creating variants of the design at each extreme, this will quickly highlight if any of your design choices are going to be problematic when the line weight is scaled. Lots of shapes or curves next to each other may result in a design becoming less distinguishable or more cluttered, for example. By tackling these visual issues early on, you can save yourself a lot of time, then go on to produce the variants in-between these extremes.

Here are some general design pointers when creating your custom symbols:

Affinity Designer For Ux Design

• Only use vector content: curve paths with the Pen Tool P and shapes are fine. Bitmap images and text are not.
• Grouping content or flattening: you don’t have to flatten your design using a boolean operation, but you must outline any content using Expand Stroke. You can either have a flattened layer with the variant name (e.g. Ultralight-S), or you can name a group which contains multiple vector layers.
• It’s not a steadfast requirement to provide all 27 variants of your design, but it’s a good idea to include as many as possible for accessibility features.

Affinity Or Illustrator Reddit

Exporting your symbol

Exporting your symbol design is nice and straightforward: once you have checked that your layer structure adheres to that of the original template, go to File>Export, then on the export dialog choose SVG as the export format. Leave the export preset as its default of SVG (for export), then click Export and choose a suitable resources directory (e.g. one set up within your Xcode project).

Once you have your exported SVG file, you can verify it within the SF Symbols app before importing it into Xcode in case there are any issues with layer structure or alignment. To do this, launch the SF Symbols app, then go to File>Validate Custom Symbols and locate your SVG file.

Finally, you’ll need to bring your symbol into your app’s .xcassets resources as an Image Symbol Set. To do this within Xcode, select your .xcassets resource (a default Assets.xcassets is provided by default whenever you create a new project), then from the top menu choose Editor>Add Assets>New Symbol Image Set.

This will switch the active window pane to a drag-drop area where you can drag your SVG file in. If everything is present and correct, your symbol variants will appear—you can now go ahead and use these in your user interface design!

Footnotes

For more information, you may like to refer to these Apple Developer articles which will help you further when it comes to adding custom symbols to your user interface design:

Affinity Designer Ui Mockup

They contain good guidelines to adhere to and will also cover adding symbols into your UI design programmatically.