Axure Windows 10 Widget Library for UWP Apps

Axure Windows 10 Widget Library

Axure Windows 10 Widget Library for UWP apps. Based on the Fluent Design System. Hundreds of pixel perfect widgets in both light and dark themes.

Live Preview

Download Includes

Axure windows 10 widget library – light theme (.rplib)
Axure windows 10 widget library – dark theme (.rplib)
Windows 10 icon library (SVG/vector) (.rplib)
Demo file for copy pasting (.rp)

Advertisements

Huge Update for Bootstrap 4 Axure Widget Library

gumroad-banner---2017-update.jpg

Live Preview      Download

The guys over at Bootstrap made some rather large changes in their last few alpha updates of Bootstrap 4.  So I went ahead and implemented a lot of those changes in my Axure library.

Changes included:

  • New typeface Segoe UI takes the place of Arial
  • New component styling for many of the widgets; new accordions, tables and cards.
  • Added widget styles for the more common elements
  • Simplified the builds of some of the widgets, taking advantage of Axure 8’s increased functionality (rounded corners, selective border treatment, etc)
  • Simplified form inputs.  Placeholders are now Axure native, rather than separate elements.
  • Added in more disabled states.  All of which can be toggled on and off directly in Axure.  (Right click element, select “disabled”.)

The library feels really strong at this point.  Probably will be very close to the final Bootstrap 4 release, if I had to guess.

Axure Mobile Wireframes Kit

gumroad_20banner

Live Preview    Download   Free Trial Version

A brilliant new mobile wireframe kit for Axure RP.  Includes 56 well crafted screens to jump start your next project.  Easily modify to create new wireframes, or fill out the design for high fidelity mobile design work.

gumroad_20banner_20-_2056_20screensgumroad_20banner_20-_20stylish_20but_20simplegumroad_20banner_20all_20screens

Live Preview    Download    Free Trial Version

Auto Sizing Images in Axure 8

auto-sizing-images-in-Axure-8

If you’ve begun working in Axure 8, you’ve no doubt realized that importing images into your prototypes is different. In 7, upon swapping out an image, you would get a dialog box asking if you’d like to auto size the image.

autosize dialog

If you spend any time on the Axure forums you’ll notice a fair amount of complaining about this feature. Since users would have to make a selection each and every time they import an image. In response, Axure 8 has done away with the dialog box. And instead your images are either auto sized or not auto sized based on something that could be quite easy to miss if you aren’t looking carefully. Let me elaborate.

Images have anchor points, just like they did in 7. But now those anchor points can be either yellow or white. See below.


The image on the left has anchor points that are yellow, and the image on the right has anchor points that are white.  And you can toggle back and forth by double clicking on an anchor point. (Easy to miss, given how small they are.)

If the anchor points are white, an image will NOT auto resize.  The image will instead take the shape of whatever image H and W you have defined the image element to be.

If the anchor points are yellow, an image WILL auto resize.

Pretty easy right?

Let’s say you make a mistake and load in an image with white anchors, but you wanted the image to resize.  No problem.  You can double click the anchor points, which will turn them yellow, and also instantly auto resize the image to its initial dimensions.

If you don’t want to mess around with the anchor points, you can also click a new button located in the Inspector called “Fit to Image.”  This will take an image and resize it back to its original dimensions.  But I personally find it easiest to simply click the anchor points to change the image around.

Hope that clears this issue up, as it’s something I struggled with out of the box.

Happy prototyping!

 

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.

Axure Foundation 6 UI Kit

blog-coverThe best Foundation UI kit ever created for Axure.  Based on the new Foundation 6 release from Zurb, this widget library features 109 meticulously crafted widgets and 6 amazing starter templates ready to go for your next prototype.

Download      Live Preview

Built with Axure users in mind, and utilizing best practices, the Foundation 6 library is one of the easiest to use libraries ever created. Build beautiful and functional prototypes faster than ever.

Download Includes

  • Axure Foundation 6 Library (.rplib file)
  • 6 Starter Templates (.rp file)
  • Quick start guide, so you can hit the ground running.

Features You’ll Love

  • Common widgets section – similar to Axure’s own native library
  • Hover, active, focus and disabled states.
  • Elements built using global styles for ultra fast customization
  • Extremely organized
  • Well labelled elements

Library Includes

  • Buttons
  • Button Groups
  • Headers
  • Badges
  • Labels
  • All Typography
  • Switches
  • Callouts
  • Breadcrumbs
  • Pagination
  • Navbars
  • Dropdowns
  • Tooltips
  • Modals
  • Tabs
  • Thumbnails
  • Tables
  • Progress Bars
  • Forms and Inputs
  • Orbit (Carousel)
  • Accordion
  • Building Blocks (with more on the way.)

Templates Included

  • Real Estate or Travel
  • Ecommerce
  • Agency
  • Blog with Sidebar
  • Blog Single Column
  • Product Page

Screenshots

Download      Live Preview

Introducing Project Comet: a new tool for designing and prototyping user experiences | Creative Cloud blog by Adobe

As if we didn’t have enough evidence that UI and UX tools were melding together, this is Adobe’s attempt to integrate user experience and visual design. This is the future. Wake up Axure.

We’re at Adobe MAX 2015 with some exciting news for UX Designers. We unveiled the progress we’ve made on a new design tool, code-named Project Comet, that combines wireframing, visual design, prototyping, and previewing all in one.  Built specifically for today’s UX design challenges, Comet is fast and fluid so it can scale with large and complex projects.

Over the years, we’ve learned a lot about what you need and have created tools so you can deliver your best design work. As technology has changed, so has the way that you approach your work.  Instead of one screen, you now have to think about multiple screens and how the experiences you’re creating relate to each other.

via Introducing Project Comet: a new tool for designing and prototyping user experiences | Creative Cloud blog by Adobe.