[Axure Tutorial] Use SVGs in Axure with Custom Shapes

svg to custom shapes in Axure

In their last major update, Axure quietly introduced a phenomenal new feature giving Axure users the ability to use SVGs in a robust way directly in Axure.  Use this quick tutorial to find out how to incorporate SVGs into your next Axure project.

First you’ll need an SVG file.  There are many great sites to find svg icons, such as Flaticon.com.  Or you can create your own SVG in a program like Adobe Illustrator.  The icon needs to be simple however.  Axure still can’t support complex SVG that have multiple colors.  I tested some logo SVG’s, and was unable to get an editable shape.

Once you have an SVG, drag it onto your canvas.

Then select the SVG and right click.  You should get a menu that looks like the image below.
convert svg to shapes in axure

If you have an SVG that is editable in Axure, you will see the option to “Convert SVG to Shapes”.  If your SVG is too complex however, that option will be greyed out.

Once you select this option the SVG will be converted into an Axure shape, and you will be able to customize the shape in all of the ways Axure shapes can normally be customized: colors, gradients, backgrounds, shadowing, stroke, and even changing the points and paths to create new shapes.

Voila!  Edit SVG’s directly in Axure.  What could be better?


The Best Way to Add Font Awesome to Axure Prototypes


I use Font Awesome quite a bit in my design work.  It’s lightweight, easy to implement, and opens up a lot of styling options.  But if you search the forums on Axure there are some discrepant accounts on how to add Font Awesome to your prototype.  So in this post I’ll show you 1) how to use Font Awesome in your Axure prototypes, and 2) how to embed Font Awesome into your .rp file for projects that will be uploaded to AxShare.

1) Download the latest version of Font Awesome


2) Install

If you are unfamiliar with installing fonts, the zip will include various font formats.  You can just install the OpenType version and leave the rest alone.

font awesome install

3) Copy Paste from the Font Awesome Cheat Sheet


This is the easiest way to add font awesome icons to your prototype.  Just copy from the cheat sheet, and paste into any text element in Axure.

Note: make sure you copy the actual icon and not the icon description.  (See image below with the Amazon icon selected.)

copy image

4) Change the font family to Font Awesome in Axure.

When you paste in the icon you’ll usually get a small square rather than the icon you pasted.  So you need to change the font family over to Font Awesome to actually see the icon in your prototype.  (See image below.)

font awesome selection

5) Customize the Icon!

This is the funnest part obviously.  You can control size, color, shadowing, and with a little cleverness, you can even add gradients.

Note: Change the size of the icons through the font sizing, not the height and width attributes.

s.example twitter icon

This is all well and good for playing with Font Awesome locally, but if you upload your prototype to AxShare and someone else views it they won’t see the icons unless they happen to have Font Awesome installed on their computer.  Unlikely.

So it’s good practice to always embed fonts into your prototype.  Here’s how you do that for Font Awesome.

1) Copy the latest Font Awesome stylesheet href from the link below.


Make sure to only copy the actual link without quotation marks, like this: https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.cssfont awesome href example

2) Paste this link into the Web Fonts screen in Axure.

Publish -> Generate HTML Files -> Web Fonts

font awesome web fonts axure

You don’t have to click Generate.  You can just close this screen out, save your project, and you’re all ready to upload to AxShare and show other people your awesome designs.

Happy Prototyping.

Edit: Font Awesome has changed how they display the current public styelsheet to reference.  It’s actually annoying how they do it now.  But here is the most up to date link.