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.
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 the fastest, smoothest, most precise vector graphic design software around. Built from the ground up over a five-year period, every feature, tool, panel and function has been developed with the needs of creative professionals at its core. Mobile App Design in Affinity Designer: UX & UI from Scratch. Design a Modern, Clean, Real World To-Do App from Scratch and Learn the Fundamentals &. This time i made a PhotoLytics Dashboard UI Web design using Affinity Designeroriginal artwork by: https://dribbble.com/shots/1549923-PhotoLytics-Dashboard-U.
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:
What Is Affinity Designer
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:
- 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.
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
Affinity Designer Ui Kit
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:
They contain good guidelines to adhere to and will also cover adding symbols into your UI design programmatically.
Latest Version:
Affinity Designer 1.9.2.1035 LATEST
Requirements:
Windows 10 (32-bit) / Windows 10 (64-bit)
Author / Product:
Serif / Affinity Designer
Old Versions:
Filename:
Affinity Designer Windows Trial.exe
Details:
Affinity Designer 2021 full offline installer setup for PC 32bit/64bit
Affinity Designer Ui Design Tutorial
Features and Highlights
Design tools redefined
All the tools you need in a professional vector design app, from an incredible precise pen tool to a super smooth gradient tool. All carefully considered and meticulously developed, they just work—in precisely the way you want them to.
Built for your workflow
With core principles of performance, stability, and lack of bloat, the software has been meticulously crafted for a professional workflow.
Pixel perfect control
With real-time pixel preview in standard or retina resolution available with a single click, you can always see what you’re going to get. Can’t achieve the perfect result purely in vector? Just edit the pixels — the app has a full suite of raster tools too.
Non-destructive effects and adjustments
With a huge library of adjustment layers, effects and blend modes—combined with full support for masks and clipping layers—the app offers the most advanced layer controls available in any vector-based app.
Flexible workspaces… and workflows
With a focused, fully customizable workspace, including docked and floating UI modes, the app lets you work how you want. Add regular and custom 2D and isometric grids for flexible layouts, work on multiple designs at once and use Windows features like Split Screen and Full Screen. Plus, with savable history, unlimited undo and non-destructive filters, and adjustments you can always go back and change your mind.
Natural brushwork
Use Force Touch, stylus pressure, tilt, and other controls for natural-looking artwork. Edit vector brush strokes as cleanly and easily as regular curves, and add raster brushwork—on its own or with vector art—to add depth and high-quality organic textures. Rotate the canvas, blend colors, edit brush parameters, create your own brushes and nozzles, and import .abr brushes for complete control over your work.
Throw some shapes
The software delivers a comprehensive set of shape primitives with easy controls for adjusting geometry with corner settings and smart snapping indicators. A full set of Boolean geometry operations, non-destructive compound shapes, and full node editing mean you can create beautiful complex geometry in no time.
Just your type
Add artistic text for headlines, text frames of any shape, or text that follows any vector path. Apply sophisticated styling and ligatures, previewing all your available fonts and style sets in on-screen panels. All the controls you need are built-in, including leading, kerning, baseline shift, tab stops – and now in the new version, you can create text styles across your document.
New professional print controls
This program features full professional print output. Pantone® support, end-to-end CMYK, and ICC color management are just part of it. You can also open, edit and output PDF/X files, set overprint controls, use spot colors, and add bleed area, trim, and crop marks.
Powerful export
In export mode, you get a complete workspace dedicated to image export. Select areas, layers, or objects to export, controlling each item’s output settings independently. For efficient web and UI design, you can automatically create new files whenever your design changes, in whatever resolution, file format, and folder structure you wish.
Common Affinity file format
The app’s shared file format makes mixed discipline design as smooth and simple as it should be. Open any native Affinity file in any Affinity app on any platform and just keep working – with a shared history, unlimited undo, and seamless switching. And for export, Affinity Designer for PC download takes all major file types in its stride.
Incredibly powerful artboards
In AffinityDesigner you can create an unlimited number of different design variants, sizes, and screens – laying them out in one document to see them all at once. When you come to export you get full control over what artboards to output and with what settings, dramatically simplifying your workflow for responsive and app design.
Note: 10 days trial version.
Also Available: Download Affinity Designer for Mac