Why use Adobe or Sketch when Inkscape can do mockups too?
Designing mockups for user interfaces is something I only do occasionally and therefore I’d rather not invest my time, money, and disk space in the industry standard tools such as Adobe XD or Sketch. Instead I’d like to use Inkscape which is my prefered open source tool for editing vectors.
Turns out that Inkscape is capable of making interactive mockups allowing you to simulate a real app with working buttons etc. I discovered this after finding some guy’s tutorial video where he uses the “Interactive Mockup” extension, the only problem is that my version of Inkscape doesn’t have such an extension and I can’t find it on the Offical Inkspace Extensions Page.
I figured out how to get it working but it took a whole load of searching the web because it’s not particularly well documented and most of the info I could find on the technique were over a decade old. The missing piece of the puzzle was found on page 28 of an Independent Linux magazine called Full Circle.
The technique is to add Javascript into the SVG which can listen for button clicks and react by making the relevant part of the SVG visible. You don’t need any plugins or extensions to do this, stock Inkscape is all you need.
To apply a Javascript event onto part of your SVG you must:
Object Properties menuInteractivity menuonClick optionMy man IT Memo’s video uses the moveViewbox
method but I couldn’t get this to work, possibly because I have a
different version of Inkscape to what he uses?
// This doesn't work
InkWeb.moveViewbox({fromthis, to: 'id-of-target-screen-here'})
// Error message when using the moveViewbox method
Uncaught ReferenceError: InkWeb is not defined
onclick file:///home/planetroast/Desktop/mockup.svg:1
As described in Full Circle
Magazine on page 28 of issue
186 (PDF available here),
the technique I used was to create a custom script which is added to the
document then called using the interactivity menu as mentioned above.
function showLayer(id) {
const layers = document.querySelectorAll("svg > g[*|groupmode=layer]");
layers.forEach(layer => layer.style.display = "none");
const layerToShow = document.querySelector("#" + id);
layerToShow.style.display = "inline";
}
You’ll now be able to use the script on any object by opening the object
properties -> interactivity menu and adding it to the onClick setting.
showLayer("layer2")
Now you can save your SVG, open it up in your browser, and you’ve got interactive mockups.
Layer names might be different to what you see in Inkscape GUI: Layer names in Inscape default to “Layer 1”, “Layer 2” etc, but you’ll notice above I had to use “layer2” as the ID of the layer, this is because when the SVG is rendered it has it’s own ideas about how to ID each object. If you’re seeing an error in the console about the layer not being valid best check naming conventions used on the SVG.
Keep all your ‘pages’ inside the Inkscape canvas:
Unlike what is shown in the moveViewbox method you’ll need to keep all your
‘pages’ inside of the main Inkscape canvas, otherwise they won’t appear on the
screen.
Why is Inkscape mockups better than using Adobe XD, Sketch, Figma, Invision, Fluid UI, or any of the other UI designer tools?