THE LIBRARY IS OPEN: BECAUSE COMPONENTS ARE FUNDAMENTAL

Craig Moore
May 29, 2018 · 10 min read

It’s not my intention to start a debate on which prototyping tool is best. There are a ton of tools and approaches to prototyping, and each has its pros and cons.

What I am looking to do is explore if I can take an existing tool and push it a little further than its been pushed before — Six Million Dollar Man-style.

Better, stronger, faster.

Before you write this off as an unsolicited redesign full of “what-ifs” — I promise you this is very much not that.

I’ll begin by posing the following question:

Is it possible to create comprehensive, high-fidelity prototypes as fast as paper prototyping?

Buckle up.

RESEARCH

Before I really got into the exercise, I wanted to poke around with the definition of high-fidelity. I have my own habits when I build prototypes, but this exercise isn’t just about me.

I jumped on /r/userexperience, Discord and my personal network to get feedback.

I received a range of responses, from “Enough to get the job done” to “As much realism as I can get finished in a day.”

The one that stuck out for me was the following:

“I want to be able to produce something indistinguishable from the real thing. I want working text fields. I want complex interactions. I want the prototype to be as close to the real thing as it can be, without having to sink the time into actually coding it. I don’t really care how, I just know I want it. And I want to do it fast.”

The feedback revealed this is going to be a bit use case dependant, but to be safe, I’m shooting for the high-end. As much realism as I can muster — while keeping it fast.

Moving on!

THE PLAN

We’ll need to pick a design system.

Seeing as we’re coming off the heels of I/O 2018 where Google dropped a fresh new look and feel for Material Design, let’s go with that. If you haven’t had a chance to check out the updates yet, head on over to material.io and fill your boots.

I’m already pretty familiar with the principles of Material Design, but I have a feeling I’m about to get a whole lot more knowledgeable.

For tooling, I picked Axure. I use it on the regular, and if this experiment goes sideways on me, at least I’ve learned something. As well, while gathering feedback a good chunk of the designers expressed having a love/hate relationship with it.

They loved the complexity you could pull off… and hated just about everything else. Major pain points were listed as:

· Fidelity

· Slow AF

· Really painful to edit or iterate

I’ll do my best to address the concerns listed above as I go along.

DRAW SOME CIRCLES

If I’m going to address the “make it as real as you can” feedback, I’m going to have to really dig into this a bit.

A hallmark of Material Design is the ripple. It’s great, it’s fun, and it also gives you that nice immediate feedback that a tap event has been registered. Material Design uses ripples in a ton of different places, and it really adds a lot to the playfulness of the elements.

So, how do you get ripples into Axure?

Ripples are basically circles that originate at the (x,y) of a tap event, get bigger and then fade out. They’re also bound to the size and shape of their parent container, which creates a cool effect when a round object collides with the boundaries of something… less round.

Axure can do all of the above, if you get a little creative. You can use a function to return the current cursor position in an Axure prototype, which takes care of the first hurdle. Great. But, we need something to contain our ripple effect. I’ll drop it in a dynamic panel, and… shit, that doesn’t quite work. The coordinate system in Axure resets (x,y) within each dynamic panel, so I’ll have to account for that too. Make the circle show, get big, then fade and:

Wicked.

Print up the “Mission Accomplished” banner.

Kidding.

So, what next?

THE REST OF THE OWL

Ripples are great, but it’s just a ripple. If we want to make some serious headway, we’ll need quite a bit more.

So… I went ahead and created the rest of the refreshed Material Design system. Chips, lists, switches. It’s all there. I did this by taking the new Sketch Material plugin, exported the assets into Axure using this plug-in and followed the behaviour guidelines on material.io to jam in the component behaviour.

I won’t bore you will all the details, but here’s a list of what’s included:

App Bars

A bunch of them, including the new cut-out version.

Backdrop

Get your Shrine on.

Banners

7 Banners with working text buttons.

Buttons

Raised, Text, Outlined, FAB and FAB-mini with appropriate elevation changes and ripples.

Cards

19 common card layouts with working buttons.

Chips

Input, Choice, Filter and Action.

Dialogs

Simple, Alert and Confirmation with working buttons.

Icon Buttons

Icon buttons with ripple. One that toggles a color change and one that doesn’t.

Image Lists

Standard, Masonry, Quilted and Woven.

Lists

24 List items.

Loading

Circular and Linear.

Menus

Dropdown and Exposed dropdown.

Navigation

Bottom and Side.

Selection Controls

Checkbox, Radio, Switch and Slider.

Tabs

Yep.

Text Inputs

Filled and Outlined.

Tooltip

There… is one. It has rounded corners.

GOING FAST

Now, let’s talk about going fast.

When you couple our shiny new Material Design components with the drag/drop layout creation and simplified transitions of Axure, it feels like we’re actually making a bit of headway on the original goal.

Those of you who have used Axure before are thinking “Ha! These components are fine and all, but any time you have to change anything it’s all going to break. Axure requires explicit sizing and location of things, and this is all just not going to work!”

Well, sort of. Granted, Axure is a bit clunky in this regard but it certainly is possible. There are some tricks you can use to make customizing and reusing these components fast and easy(ish).

Resizing

The key here is to use relative positioning of child objects. Basically, most things in Material Design are 8dp from this, or 16dp from that, and you can use that to make your components easily resizable.

So, if you’ve got something like a dropdown that has some text and icons, you set the position of these child elements during OnLoad events relative to a parent container.

I’ve got a few examples in the library of resizable elements, most of which are tied directly to their parent dynamic panel. Some standouts are text fields, dropdowns and the slider.

Still, I feel like we’re not fast enough. Let’s take it to 11.

Repeaters

Think of repeaters like a dom-repeat. Or that crazy machine from The Prestige. Whichever has more meaning for you.

You put in your stuff, tell it how many times you want something and just let it happen.

Let’s take a look at you can use a repeater to quickly populate a dropdown menu.

Inside the repeater we define the style and behaviour of a list item. For each row that you add to the repeater, it’s going to create a new copy of that item and you can do fun things like assign labels or links based on a value you specify in a different column of the repeater. When you combine that with the resizing strategy outlined above, you get this:

The value here is being able to create, populate and edit components quickly. I’ve found navigation menu items/links are a snap, anything with a list in it is a no-brainer (I’m including cards here), and anything complex like a table is now as easy as typing in a spreadsheet.

PUTTING IT ALL TOGETHER

At this point, we’ve got all the components that you can drag out onto the canvas, a way to resize them and the ability to quickly add, remove or edit list-based components.

While some of this may seem a bit daunting, I’ve included a few advanced examples in the library to get you going. It stops short of a full app prototype, but there is enough there give you a really good head start.

In no particular order:

A navigation menu populated by a repeater, which uses repeater values to link to unique pages.

App bar scroll behavior with corrected button ripple position in a scrolling container.

A list item transition to detail view (and back).

And a couple others I cooked up along the way, such as a working image list and a hero animation example.

DID WE DO IT?

Some initial tests with myself and others cut prototyping time substantially. Like, in half. By rolling the behavior and logic of the Material components into a reusable library and marrying it to some of the advanced features of Axure, you can spend less time worrying about how the base components should behave and more time actually building out the prototype.

As this is more of a proof of concept, I’d expect to see even greater returns if a team of designers created and maintained a set of components and common user flows from their application. Really, there is nothing stopping you from componentizing anything you think you’ll reuse. For a benchmark, once I figured out how to bend Axure into doing what I wanted for this project, a new component took anywhere between a couple minutes to a couple hours depending on complexity.

Are we rivalling paper prototyping for speed? Yes and no. For some things, like lists and dropdowns, yea, I’d say so. For others, I’ll have to wait and see as I continue to play with this.

For the astute, yes, I left out data tables. I got really into this side project and decided to start applying it to my 9–5. Once I figured out you could repeater the shit out of everything, I created a table on paid time which is why I can’t include it here. Never having to edit another table mock in Sketch makes me happy in ways I simply can’t put into words. Would recommend.

I do feel the need to throw out a couple of caveats:

· Although I tried to match Material spec as much as possible, I know I’ve missed a few things. I put this together in my free time over about a week, and it’s certainly not perfect by any means. You may want to double check a component before you start using it.

· I’ve briefly tested this on desktop and it works well, but mobile is… weird. In theory you should be able to clean this up and use it for testing on mobile devices as well, but Axure is known for being a bit meh for mobile.

· Documentation. There is some, but it’s pretty rushed. If you’re interested in seeing how any of the components were created, I’d recommend just poking around in the library to see what’s going on. If you’re really, really, REALLY stuck, shoot me a message and I’ll do my best to break it down. But, before you reach out:

o Your ripple isn’t working because you forgot to bubble up its location through all the nested dynamic panels. Or you put it in a scrollable panel and didn’t correct the Y-offset. Check out App Bar/ Scroll / Elevation / Working Buttons in the Example folder if you need some help.

o Your drop shadow might not be working because you’ve zoomed in or out in your browser. Set it to 100%.

· Not everything is resizable at the moment. Notable exceptions are Buttons and Chips. I’m sure it can be done, but I honestly just ran out of steam.

And now is where I give you my sales pitch. For the low, low price of…

Kidding.

Library is free. Download it here.

I did say the library was open, didn’t I?

Try it out. Let me know what you think.

Craig Moore

Written by

UX Designer based out of Ontario, Canada. Background in enterprise, data viz and prototyping all the things.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade