[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?

[Axure Trick] Lock Pages in Axure 8 with a Unicode Character

I’m currently in the middle of a UX contract that is for a moderately large redesign.  As is somewhat common, the wireframe phase has been cut into smaller phases in order to stagger some of the design work in.  One of the issues working like this is making sure the client has a clear understanding of what pages have already been approved (and locked) and which pages are still open to revisions.

If Axure has a native solution to this I’m unaware of it. I know I can edit the sitemap to have certain pages not show up in the generated prototype.  But this seems like an inferior solution, as the client might still want to see some of the approved pages in order to make more informed decisions about pages that are still in the approval process.

Enter unicode characters!

🔒

You can copy paste the above unicode character directly into your page names in Axure!

Internally it will look like this.
locked pages

Clients and stakeholders viewing the AxShare prototype will get a nicely colored lock that appears in the sitemap, as well as within the page title and URL.

locked axshare

Voila!

Your pages are now “locked” and your coworkers will think you’re a genius (even though you aren’t).

[Axure Tutorial] Fake an iOS 10 Blur Background Effect

A short video tutorial on how to recreate an iOS 10 blurred background effect on a widget.

Quickly Create Color Shades in Axure

color shading

If you design in Axure it’s good to know how to quickly create accent colors without having to spend time in other software or browsing the web for color schemes.

And it’s pretty easy.

1) First create a rectangle with a solid fill color of your choice.

2) Duplicate the rectangle several times, based on how many shades you want.

3) Use the Opacity function in Axure’s color picker to give each rectangle less opacity than the previous rectangle.  In my example I’m using a 100,80,60,40,20 scheme.

color shading 2

If you are well versed in Axure you probably have already done something along these lines before.  However there is one more step you should take in order to remove the transparency %’s while keeping the colors.  Otherwise any elements with transparency that overlap another element will end up looking bizarre.

4) Select one of the rectangles that has some transparency.  Go back to Axure’s color palette and select the color picker.  Hover over the semi transparent element and click. This won’t change the color you see, but the color value will go from something with transparency to a completely solid color.

For example, when you hover over a rectangle with #008000 and 80% opacity you will see that this is the equivalent color of #339933 (assuming a white background).  And now the element can be used normally without worrying that it might overlap another element.

This technique can also be used to darken colors.  Simply add a black rectangle behind the elements and apply the same color picking to find darker shades of a color.

color shading 2

And that’s it.  Hope this helps you use Axure more efficiently in your designs.

A User Friendly Way to Add Cursor Pointer to Axure Prototypes

cursor-pointer

If you are like me it probably bothers you when an element in Axure has a hover state but the cursor doesn’t change to a pointer.  The interaction feels wrong.  As a solution to this, many users will add a blank link to the element.

OnClick – Open Link – Hyperlink “#”

This is the solution I frequently see on forums and in other users prototypes that I play around with.  But I think it’s a bad solution.

hyperlinkl-#

The reason it’s a bad solution is that it trains the user not to click on things.  A “#” hyperlink will instantly refresh the page and put the user back to the top…which can be somewhat irritating.  So instead of being able to explore the prototype freely users will get click-shy, afraid that clicking an element will send them to the top of the page again.

A better way to get the cursor to change to a pointer is to add an empty interaction to the element.  My personal favorite is to add a 1ms wait time to the OnClick event.  This ensures that the cursor changes, while still allowing the user to click elements without disrupting their experience. This is especially important if your prototype includes elements with an active state.

wait-1ms

So consider using this method in your future prototypes.

Update: Had a comment pointing out that there is an even easier way to do this! You can simply add a blank OnCase event and it will change the cursor. (Thank you to Chuck for the help.)


Questions or comments?  Hit me up on Twitter.

https://twitter.com/axurethemes