Using XD for VCV Panel design

Development
1

@aetrion-music also uses XD to design VCV panels, and asked if I had any tips or clever workflows. No, I don’t, but here’s what I do.

TL;DR Adobe XD comes in two version, free and paid. The free one has all you need. XD is a “screen design” program. As such it competes against programs like Sketch and Figma. Screen design programs are made for doing this kind of thing, so they tend to be easier to use than vector drawing programs like Inkscape or Illustrator. They also are designed for multi-screen applicatations, and transitioning from scree to screen, which is not relevant at all to making a single panel.

Anyway, my panels are very basic, so I don’t need/use a lot of fancy features.

The thing that saves me a ton of time is that I long ago made a library of all the “components” I use in my panels. I have all the knobs, jacks, colors, and fonts that I use in a shared library.

To start a new project, I make a new document, and make a new folder to save it into. Then I load my component library. Lastly, I make a single artboard that’s the size of may panel. I fill it with my standard background color. Oh, by the way, I do everything in pixels because that’s what XD uses. Search this forum for more on pixels vs mm if you are interested.

Then I drag components out of the library panel, and onto my artboard. Most of the work is positioning the components so they look ok and line up. Maybe I will draw some simple things on the panel.

Then I take a screen capture and send it to testers for feedback. Once we agree I turn it into a VCV panel. To do that I:

  • Save a copy of my project so I can mess it up for export.
  • Make sure the artboard is named what I want the final svg to be named.
  • Using the layers panel, hide all controls that will be later inserted programmatically.
  • Keep visible only the panel decorations, and text.
  • Convert all the text to paths, as XD does not have an option to do this on export.
  • Export an SVG. I usually accept the defaults, and select “all artboards”, as that auto names my one artboard.
  • Go into my source code and position every control. I do this the dumb way – read the x/y position from XD’s property pane and type it into my source code. Luckily XD uses upper/left as the anchor point, and that the most natural thing to do in VCV, too.

That’s about it. The thing I like about using XD for this, aside from the shared component library, it that there are not a bunch of palettes or property panes. The right side always shows you properties for the currently selected thing – you never need to go hunting or open multiples panes (get it – “pains”?).

Here’s what it looks like:

image
image2089×1657 277 KB

6 Likes
2

Thanks for describing your workflow so detailed! I also stumbled upon the mm vs. pixels issue and the text to path conversion.

Two things I would add is that Adobe XD makes it easy to

  1. create color variations of your module (shared library or copy artboard + color replacement plugin)
  2. create „marketing“ material, documentation etc in the same document as you can just place one artboard as an object on to a second artboard. it auto-updates whenever you change the module design. That is so much more convenient than pasting screenshots into PowerPoint or keynote.

XD really is meant to improve the design workflow and does that very well.

If only I had more coding skills than basic webdev. My module ideas could be both visually pleasing and actually be real :slight_smile:

1 Like
3

For this application, I wish the support for arrows was better. I don’t know how they are in power point, but a real diagraming package like Visio has much richer support for arrows.

4

Yeah I feel what you mean. For this to become flexible in XD you would have to setup a couple of basic arrow types yourself and be very specific about the scaling of the ie. arrowhead using the constraints feature (used for responsive Webdesign but can be repurposed).

Other than that, my hack is to use apple keynote, (which also has nicer arrow options). If you copy and paste vector elements it does this as a sort of embedded pdf so it’s still vector based and can be scaled as you wish.

1 Like