AxShare Interactive Redline Plugin


#1

Greetings!

Within my organization, we overly rely on the use of Axure; beyond rapid prototyping and into the realm of pixel-perfect mockups. One of the issues I faced was the difficulty of providing redlines to developers. Of course, much can be inferred from a robust style guide, but many features and functions we implement are new or we’re working on completely new, non-related products where a detailed redline is valuable to developers.

I’m sure many of you have used the plugin Measure for Sketch or have some familiarity with it. For me, I found it to be invaluable and I wanted to replicate some of that functionality for Axure. I found it quite simple to build a plugin for AxShare projects and inject the code directly into the project as a plugin. This plugin offers significant value within my organization and I wanted to take some time and share my initial V1.0 release here to the Axure community in the hopes of helping others. This is of course the first official release, so I’m sure there are bugs to come, but I’m happy to work diligently to resolve those bugs and build a valuable tool.

Feel free to take a look at the demo or documentation and if you have any questions, improvement opportunities, or feature requests, I’ll be happy to accept them all!

Demo

Documentation


Axure & dev hand-over
Inspect Mode in Axure
Style Guide from a Protoype
Measurement between objects
Chrome Page Ruler doesn't work with Axure 9 Beta
#2

Impressive plugin. I don’t have a use for this but it’s making me think of other features similar plugins could provide to enhance Axshare.


#3

This is really good. I think a great enhancement to it would be measurements between objects, so developers know how much margin to implement.


#4

@ophiliuim, perhaps we’re thinking of two different things, but I believe the application already does that for which you are asking. If you check out the demo page, you can see if I’m talking about the same thing. Click on an element and then hover the mouse over another element on the page. The spacing measurements between the two objects will be displayed.

Is this what you were talking about? If not, I’d love to hear more about your request!


#5

Ah, I see. Yep, that’s what I was thinking. Great job. One thing I notice is the negative space (black grid) that surrounds the pages it’s enabled on. I’m guessing it’s not intentional but a consequence of the code. It makes moving within the page slightly difficult. It also moves screen comments off their intended targets. Either way, thanks for making this.


#6

Thanks for the feedback! The black grid is purposefully placed. I wanted to give users the idea of working with an artboard. Most of this tool takes inspiration (i.e. styling is copied) from the Measure plugin for Sketch. I found that when demoing many screens, I had to manually zoom out on the browser because the screen was too big for whatever projector/display device I was using. To counter this, I introduced the idea of an artboard so that you could simply zoom in and out on your project instead of the whole browser. The way that Axure creates HTML though is very awful and it causes a lot of issues with the program determining the outer bounds of the artboard. Much of my initial work was focused on this aspect. If you’re facing a specific issue with the artboard, I’d love to see it! I tried to come up with scenarios on my own, but of course there will always be something else.

As far as comments go - they were another very difficult aspect. As you probably noticed, comments can only be read when the tool is turned off. This keeps the tool from interacting with the comment icon (because it’s technically just another HTML element). On this note, button clicks are also disabled when the tool is on, otherwise when you clicked on a button to measure it, you’d get some action instead. Anyways, back to the comments. I don’t know if it was my version of Axure, but it seemed like Axure sort of just tossed comments on the page in one location, and that they did not align with the comment icon. When comments are displayed within this tool, the comment text box should be left-aligned with the comment icon and padded around 10px below the icon. If you’re seeing something else then it is a bug and please let me know!


#7

I see. I think the artboard was unexpected, so it threw me off some. One thing you could consider is removing the top horizontal bar and putting zoom on the right vertical bar and pull the enabled button out - saves a little space, quicker enable button. Like below.

https://gwouuc.axshare.com/home.html


#8

I couldn’t place my finger on my reservation with the artboard and zoom, but I think I have a better idea now. If your intention was to mimic a program like sketch, then the artboard and zoom comes in handy - there are typically many designs within a sketch file that you go to and from. In Axure tho, designs typically mimic an actual page, single page, where most all you need to do is scroll up/down. So, I guess the down side to the board, is that the page looses some of the feel of a web page.


#9

@ophiliuim, I do like the idea of moving the buttons around. Perhaps it’s just because I’ve been working with a lot of MD right now, but I have been toying with the idea of floating action buttons. That would remove the header where the zoom buttons are housed and it would make the enable/disabled more obvious.

Just to be clear, when I say Sketch, I mean just the plugin Measure. There’s an example here: http://utom.design/news/. Here in that Sketch plugin I feel that it’s similar to what Axshare offers. Maybe I’m still just not understanding you though.

What are your thoughts on floating buttons for zoom and for the enable/disable? I picture something similar to Google Maps with all of their floating buttons - only less overwhelming haha.


#10

srm985,

Your redline tool is working pretty well for me. Thanks!

Is there any way to report the colors in hex instead of, or in addition to rgb(x, x, x) ?


#11

Ok. I wasn’t aware of the Measure tool for sketch. Is your tool able to adapt to 100% widths and fixed items? If not, guess it’s a tradeoff. I like the idea of floating buttons. The zoom control takes a lot of space for one control and the enable/disable, I would think, should be most accessible on the outside.


#12

@mbc66, providing hex colors is definitely something I’d like to support. I actually have an open issue tracking this. I just opened this issue but I remember that I started to work on this a while ago. Something about it was difficult. Obviously the conversion isn’t difficult at all, but there was some issue with how the GUI was structured. I can’t remember what the issue was, but I’d like to finish this one up pretty soon, The open issue can be found here: https://github.com/srm985/axure-redline-tool/issues/12

@ophiliuim, could you give me an example of how you would use 100% as the value for a dimension? I haven’t used Axure in a while and don’t have any memory of this. Let me give a scenario and you tell me if it’s what you mean. I thought Axure only supported fixed dimensions - or are you writing custom CSS after Axure exports its components? I’m not sure I understand this. As far as fixed items, could you give an example here too? With these, what do you mean by “adapt”? Do you mean, will the artboard display correctly or do you mean will it give the correct measurements?

I’ll explain a little bit about how the tool works - in hopes that I might answer some of your questions. To create the artboard dimensions, the tool scans all of the elements that Axure has placed on the page. It then determines what the furthest elements are from “center”. It then sizes the artboard based on these elements. So, if you were to draw a square that was 100px x 100px your artboard should be displayed as 100px x 100px. If you then added a square directly to the right of the first square, that had dimensions of 10px x 10px, your new artboard should now be 110px wide and still 100px high. The tool has to do some tricky stuff to determine element measurements, but in the end, it is pretty much just measuring the size of the element. So if you have a square that is 10px x 10px, the tool will just measure its outer bounds and report a square of 10px x 10px. Some things are impossible to measure correctly though because of how Axure renders certain components in HTML. For example, if you create a circle in your Axure file, Axure doesn’t export this as a square with border radius of 50% - instead they export an image. Of course, we can’t accurately measure an in or easily extract attributes. Maybe Axure has since changed this though.

As far as the floating buttons go, I have opened an issue to track this and it can be found here: https://github.com/srm985/axure-redline-tool/issues/10


#13

Sure. I uploaded an example with 2 pages (link below). The “Home Page” has a 100% width fixed header bar, fixed profile menu (top right) with clickable menu, and 100% width footer. The “Home Page w/ Redline”, has the tool implemented. The 100% width, fixed menu, and interactivity (clickable menu) breaks. It kinda has to since redline breaks it into a page on the artboard.

So, I guess that was my original reservation. I can see the artboard work well when designing as one would in Sketch. I can only speak for myself, but when I design in Axure, my intention is to have it behave/look like a website, in which case the artboard detracts from. I think when I use the tool, I will duplicate pages specifically for dev to use with the tool.

https://gwouuc.axshare.com/#g=1&p=home_page


#14

Ahhh, I now see what you mean. Yes, that’s definitely a tricky situation for the tool. How do you specify 100% width for an element? Is that done directly in Axure or are you using CSS in AxShare? If I can replicate this, I might be able to resolve it. And you’re exactly right about the differences between Sketch and Axure! I originally created this tool because my organization was trying to use Axure like Sketch, so the tool made sense. For your situation, you are using Axure correctly and the tool might not be as applicable.

@mbc66, I just released a new version of the plugin which supports HEX/RGB(A) toggling. I simply mirrored the Sketch Measure functionality. To toggle color formats, just click the color swatch. The code is updated and you can also check out the demo here: https://71gjur.axshare.com/#g=1&p=test


#15

Thanks a lot, srm985!

Color swatch for hex works well. That will help a lot.

This plugin fails for any page with a repeater list or “animation” in which widgets are moved. Not sure what if anything could be done about that.


#16

Hmm… I will have to see if I can recreate the problem. I suspect I might be able to resolve this, but I’ll just have to see how Axure is rendering this content. Do you happen to have a quick sample of where this occurs?


#17

Thanks, srm985!

Try this: https://6lbzcz.axshare.com/

Here is the source, nothing special, just a repeater list in a dynamic panel:
Redline and Repeaters.rp (228.6 KB)


#18

@mbc66, I really appreciate the quick reference! It helps me quickly track things down. I just released a new version of the tool which should resolve your issue. You can take a look here: https://c6wuzd.axshare.com/#g=1&p=home_with_redline

I suspect I have a bigger issue to solve though. I’m wondering what happens if you have hidden page elements. I suspect the tool will expose them, which may not be what you wanted. If anyone runs into this issue, please let me know!


#19

Wow! Your last update is a great improvement. It is behaving nicely with most of my repeater lists, and that is a lifesaver for me now :smile: :+1:

I updated my project above with a fairly complex repeater list. It has several dynamic panels and is nested within a dynamic panel, so that the list can be scrolled up/down and each item can be swiped left/right (similar to the iPhone Mail app. --man, that was a headache to get right with Axure code!) Lots of hidden stuff that gets exposed here and there. It actually works pretty well with Redline Tool, but when I change the height of the repeater row (by changing dynamic panel state from “normal” to “error”) then that row doesn’t display properly. In this case, it still kind of works for developers, as it shows the “slid left” state opened up.

Now, if I mix all this with dynamic panels moving to front and back (error dialogs, etc.) then the z-order sometimes gets messed up with Redline as well. (But in example above, it still works!) Honestly, at that point, a page either needs to be for interaction demo/testing or for developer specification details, but not both.

Thanks again! Super stoked about this tool!


#20

Hi Sean

Super impressive - have you had any feedback from Axure?

I’ve inserted this into a couple of current projects. The main shortcoming for me is that it appears to suspend / override OnPageLoad scripts which I use to ‘setup’ a prototype. These scripts usually hide components (such as modal dialogs); run FireEvents on widgets which trigger other setup activities etc.

I’ll be sure to keep an eye on this - it may revolutionise my workflow.

Great work.

MG