View stunning SlideShares in full-screen with the new iOS app!Introducing SlideShare for AndroidExplore all your favorite topics in the SlideShare appGet the SlideShare app to Save for Later — even offline
View stunning SlideShares in full-screen with the new Android app!View stunning SlideShares in full-screen with the new iOS app!
• One stop shop that Wireframes and makes
• Instead of using hotspots & images like InVision or
Flinto, it uses widgets, which allows for painless
rearrangement and rapid iteration.
Changing Colors/ Gradients
Dynamic Panels and “States”
How to use AxShare
How to set up shared .rp ﬁles using Dropbox
The dangers of the shared ﬁle
So here are some of the important areas:
Sharing and Generation
Making & Manipulating Shapes
Go to the widget library
area then click and
drag a rectangle into
Now go over to the style
area and ﬁnd the options to
alter the borders
Select the thickest with your
Go to the “Fill” option and
Your rectangle should look
like this now
Change the color to a color
of your choosing
Your beautiful ﬂower of a
rectangle look like this now.
Filled with color!
The ﬁrst set of (x, y) are your
Let’s change those to (20, 20).
The second set alter the height and
width in px of your rectangle
Let’s change those to 150px, 150px.
Text & Styling
With the square selected,
which should now look like
this, double click to add text
Mess around with the font, style
Make sure it contrasts with the
color you’ve chosen
Step 1. Masters
Go to the widget library area and
drag a rectangle into the workspace.
change its coordinates to (20,180)
and make it a 75px, 75px square.
copy & paste it then drag it so that it
aligns like in the sample picture.
Step 2. Masters
Right click on the left black square
and select “Convert to Master”
Name the master something
interesting then hit continue
Step 3. Masters
Double click on your “Page 1” and drag
your master out into your fresh work
Notice that it snaps to the same location
as the square on the “Home” page.
Double click the “Home” page to return
to our “interesting” square arrangement.
OR - HOW TO ADD
INTERACTIVITY AND USE
DYNAMIC PANELS AS WELL
So we have our
arrangement of squares
Right click the lower right
black one and convert it to
a dynamic panel
The right square is now a
state of the dynamic panel
Right click and duplicate
Alternating Between States
Double click the Dynamic Panel in the
Rename the panel “Right Square”
Use the “Edit” button to rename “State 1”
“Black Square” and “State 2” “Red Square”
Double click on “Red Square” and change
the square’s color to red.
Now to give our dynamic panel some
Double click “OnClick”
Go down the list of options on the left
menu until you ﬁnd “Set Panel State”
under “Dynamic Panels”
Click on that and it should show up
underneath “Case 1” with a lightning
Specifying the Interaction
Check the only available option
Under “Select the state” choose
Then the option “Wrap from last to
ﬁrst” will appear, check the box
Then click “OK”
Generating Prototypes Locally
Click “Preview”, which will generate
a local prototype in your browser
Click the large box and it will loop
between states for each click.
Alternating between black and red.
HOW TO MAKE YOUR WEB
Step. 1 AxShare in Axure
Click on Axshare, this loads
the options which you will
use to upload your
Enter AxShare email and
Check “Save password”
Step. 2 Account Info
If this is the ﬁrst upload of this ﬁle or if
you want to keep separate iterations
of the prototype, check “Create a new
Name the project.
“Replace an existing project” wipes
the currently uploaded prototype, but
keeps the same url
Click “Publish” and it will start the
Step. 3 Publish
This is the link that can be accessed online. Share it with
the world, yay!
Step. 4 Conﬁrmation!
The AxShare Overview
Log in to axshare.com (or make a login)
Shows an overview of what you’ve uploaded as
well as the url
Uploaded ﬁle management (delete old uploads)
HOW TO SHARE YOUR
Step 1. Mobile Conﬁguration
Start the mobile conﬁguration
steps after the “Account Info” slide
Click on “Edit”
Click on “Mobile/Device”
Step 2. Mobile Conﬁguration
Keep the default conﬁgurations
Check the “Prevent vertical
page scrolling (blocks elastic
Step 3. Dimensions
Upload an icon - it’s relevant
later on and take into account
the 114x114 px when
Step 4. Icons!
Supposedly you can make a
splash screen, which displays
while the “app” is loading, but
it hasn’t worked for me, so
leave it blank.
Step 5. Splash Screens
To make your mobile prototype
look like a native application,
make sure that you check the
“Hide browser nav” box.
Step 7. Hiding the Nav
Click “OK” and proceed to
“Step 3. Publish” to ﬁnish
Step 8. OK!
Be conscious of your target screen’s pixel
dimensions - it matters.
iPhone 5 ratios vs. iPhone 4 etc vs. iPad vs.
the various ﬂavors of Android etc.
Within the Axure ﬁle, make sure the
dimensions start from the 0,0 coordinates
Make use of the guides within your Axure ﬁle
to make sure that the prototype stays within
MOBILE PT. 2
MAKING YOUR PROTOTYPE
LOOK LIKE A NATIVE APP
Native App Wizard
So you’ve uploaded your .rp ﬁle with the
mobile dimensions and all of the settings
from the last set of mobile slides…
Linking to the Project
Well, remember that link you generated?
Copy it and email it to yourself so that you
don’t have to type it in on your mobile
Part 1. Setup
You should have this
sitemap sitting next to
Go ahead and tap on
the highlighted button
Part 2. Setup
Tap “without sitemap” and
copy the link
Paste that link into your
browser and load it
Linking to Home Screen
Tap the options menu
The tap the “Add to
Home Screen” button
Now it’s a Native “App”
Now you have a link to
prototype with the icon
Tap it and it will open while
hiding the Safari menus and
disabling the scrolling. It
now looks and feels native!
The good news is that once the prototype
is uploaded to AxShare and you’ve
created the link, you can push changes
and open the “app” with those changes
without going through this process again.
You just need to overwrite the same ﬁle.
Multiple people can do this and see what
you’ve done as you iterate and push the
changes, very cool.
Click on “New shared folder” in the upper
Step. 2 Make a Shared Folder
Since it’s a new folder, make
a new folder to share then
Step. 3 Create & Name
Name the folder, click “Next
Type in the email of the person you want to share with then click
which should then give you a conﬁrmation and email the person
you shared with
We’re done with the Dropbox website now and are moving on to
sharing the ﬁle on the Axure side!
Step. 4 Share
Open our beautiful Axure ﬁle,
the awesome part is
highlighted in red…
Step. 5 Open Axure
Click “Team (PRO)”
Select “Create Team Project
from Current File”
Step. 6.1 Sharing the File
Name the project then
Step. 6.2 Sharing the File
Click the “…” and ﬁnd the
directory or, as we know
it, the dropbox shared ﬁle
Step. 6.3 Sharing the File
Click “Finish” and…
Step. 6.7 Sharing the File
You should now have a shared project on Axure
through Dropbox’s cloud service
Step. 7 We’re Finished
Step. 1 Opening the Project
Select “Get and Open
Team Project” under “File”
Step. 2 Opening the Project
Select “…” to ﬁnd the
Step. 3 Locating the Directory
Select the shared ﬁle then ﬁnd the ﬁle that your friend
shared with you then ﬁnd the name of the .rp ﬁle and press
This will then open the ﬁle after another conﬁrmation screen
You only need to locate the ﬁle once
It will show up as a pink ﬁle instead of
a blue one meaning that it’s shared
Be careful about checking in/