axure-redline-tool
Advanced tools
An interactive redline tool plugin for Axure remotely-hosted projects.
This plugin intends to mimic some of the functionality of the plugin Measure for Sketch or InVision Inspect. This application is meant for those who rely on Axure in their organizations and would like to provide developers with always-up-to-date design specifications. As Axure does not support plugins within the application itself, this code resides within and is applied to your AxShare projects.
Latest Version
<script src="https://cdn.jsdelivr.net/npm/axure-redline-tool@latest/web/axure-redline-plugin.js"></script>
Current Version
<script src="https://cdn.jsdelivr.net/npm/axure-redline-tool@3.1.1/web/axure-redline-plugin.js"></script>
There are several ways to use this "install" this plugin. The easiest option is to copy the script link above into your AxShare project as a plugin. Copy the script of the version you'd like to use, or simply use the script marked "latest" to ensure you're always subscribed to the latest application updates. The code in the scripts above is served from a CDN to ensure a fast response, no matter your location. If you prefer to house the code directly in your AxShare project, you'll need to copy and paste the code found within /axure-redline-tool/web/plugin.txt into your AxShare project as a plugin. The code combination is derived from the markup framework, CDN links, the pertinent CSS, and the supporting JavaScript / jQuery code base.
To apply this code to one of your AxShare hosted projects, navigate to www.share.axure.com and log into your account. Once logged in, you will see an inline gear icon to the far right of each Axure project. Hovering over this icon provides a list of options, including PLUGINS which you should select. Once on the plugin page, select NEW PLUGIN. Name your plugin whatever you deem appropriate and select End of the Head as the insertion location. Paste your plugin.min.htm code into the content area and save the plugin. Select all desired pages within which you'd like to have the interactive redline tool. If you would like to have the plugin appended to any new pages, you may select Add to new pages by default. Once saved, your plugin should be activated. To modify the plugin, simply select edit and paste in any replacement code.
Install Node.js
Update npm to the latest version:
$ npm install npm@latest -g
To launch a demo instance of the plugin in your browser, issue the following commands:
$ cd axure-redline-tool
$ npm install
$ gulp develop
This project was built and tested on jQuery 3.2 and Axure RP.
If you've made changes and would like to build an updated version of the plugin, run the following commands to generate plugin.txt and plugin.js. Copy the contents of plugin.txt into your AxShare project as shown above.
If you would like to modify the plugin, two build scripts are available to aid in this.
To quickly build your changes for production issue the following commands:
$ cd axure-redline-tool
$ npm install
$ gulp build-prod
Because this is a compiled plugin i.e. HTML, CSS, and JS are merged into one file, you can also keep the plugin continuously watching for source changes. This will then automatically rebuild the plugin.txt file and you may then copy the plugin code directly into AxShare. This will not open an instance of the plugin in your browser. For this, issue the following commands:
$ cd axure-redline-tool
$ npm install
$ gulp build-watch
As this code is embedded within Axure projects, it does not have direct control of how assets are exported from within Axure. Additionally, Axure projects allow much more functionality and interactivity than those generated in Sketch and it's difficult to intercept and interact with these. The code makes every attempt to handle the various nested elements exported from Axure, but if you do encounter an issue, please let me know and I'll promptly resolve it.
You may find the generated artboard sizing odd during initial use. This tool scans all page elements and sizes the artboard based on the most-extreme elements. If you would like a specific size artboard, I would suggest using a background rectangle within Axure to define this. Alternatively, you may use a combination of vertical and horizontal lines to define your artboard border. For example, if you would like an artboard of 1000px x 1000px, place a rectangle as the backmost element in your Axure project with a X and Y location of 0 and dimensions of 1000px x 1000px.
*Axure chooses to export some common elements such as circles and lines as images instead of using CSS. As such, you may find it difficult to find accurate dimensions on some items. A workaround for circles is to place a square in Axure and set the border radius greater than or equal to 50% of the square's dimensions. This will then export as an HTML element. Axure also has difficulties in exporting elements with lots of border attributes and box shadows. It typically exports these as images and you will be unable to retrieve any CSS attributes.
We use SemVer for versioning.
See also the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE file for details.
bored, a red color swatch was applied.position: fixed;.border-color, without a border style being defined. There is no reason to display this attribute without a border-style defined.text-shadow to the list.<span> elements to display: inline-block;. This was done so we could accurately measure their height, width, and position. Now for these elements, we won't show a height, width, or position because it conveys no information. We instead select the parent container which is typically a <p> tag.letter-spacing and text-transformFAQs
An interactive redline tool plugin for Axure remotely-hosted projects.
We found that axure-redline-tool demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.