Ability to connect shapes to draw a flowchart
I would like to be able to connect different shapes (rectangles, rhombuses/diamonds, ellipses, but potentially everything). The connector line should either be solid, dashed or dotted and end in an arrow. If I move a shape, both of the connected shapes stay connected (the line expands/contracts as necessary). The line should be able to carry a text label, either in the middle, at the beginning or the end (supercool would be if you could add an offset from/to beginning/end of the line).
In other words: I would like to be able to draw a flowchart.
For me as a UX designer (not doing visual design at all!), this is a very important feature to think about interactions on a high-level (which screens/states are there, how are they connected, how does a user move through these screens). Right now, I still have to use Axure for that job, or a dedicated diagramming software like OmniGraffle or (in the old ages) Visio.
This feature could be supported in Design Mode. It's not meant to span several artboards. In fact, for such a feature I would only need one (large artboard), or even better an infinite canvas. As an alternative, it could get a dedicated mode, like a "Flowchart Mode".
Also, in large projects I had to draw more than one flow chart. As an example, last year I had to draw a really large one (needed to be plotted on A1 paper to discuss with clients), but in addition to that, I drew ten sub-flowcharts (the large one was the high-level, the smaller sub-diagrams showed what happened when a user entered a specific screen). All those flow charts were printed into one PDF file with eleven pages. With Axure no big deal – with XD impossible. :-(
Thus, it would be cool to be able to draw one flow chart. Then, add more features like the support of more than one flowchart and the abbility to export only a selected one or all of them into one PDF file. Add more features over time to further improve that, like the different positions of the text label on connecting lines.
Stefan Freimark
shared this idea
-
Jeremy Pace commented
I totally agree with you! Being able to create flowcharts with connected shapes, adjustable lines, and text labels would be such a game-changer for high-level interaction design. Right now, I also have to switch between different tools like dedicated diagramming software, and it’s frustrating.
Having features like exporting multiple flowcharts into a single PDF or managing sub-flowcharts would make life so much easier, especially for bigger projects. By the way, I recently came across https://splinecloud.com/features/plot-digitizing/ —it’s not a flowchart tool, but it might help organize and work with visual data in the meantime.
Hoping they implement something like this soon!
-
JudyT
commented
Everything you've mentioned here I've been wanting to see in XD: infinite canvas (like Sketch); ability to make lines/rules with arrows or other ends (like the rules palette in Illustrator); and have multiple ready shapes to be able to easily create user flows (like what is available on Mural or Miro). Perhaps an additional "section" to a document where a user flow can be created?
-
John Henry
commented
Making flowcharts in XD is at this point a torture, regardless, using outside modules, as partner different shapes in a self-loader way is practically unfathomable.
Curiously, in the Prototype mode, this is apparently incredibly basic. We can connect parts with a few snaps and takes in an obviously satisfying manner. Would it be plausible to include a comparative engine in Design mode to convey those magnificent connectors among shapes and have the choice to change them? https://cpm.guru/about-us/
-
Ian
commented
For a complete UX design tool, this drawing flow connector object is missing.
-
John jolly
commented
Making flowcharts in XD is as yet a torment, in any event, utilizing outside modules, as associating various shapes in a self-loader way is almost unthinkable.
Inquisitively, in the Prototype mode, this is by all accounts extremely simple. We can associate components with a couple of snaps and hauls in an outwardly fulfilling way. Would it be feasible to involve a similar motor in Design mode to deliver those delightful connectors among shapes and have the option to tweak them? https://dirtbikehelmetshub.com/
-
Miguel Ferreira
commented
Creating flowcharts in XD is still a pain, even using external plugins, as connecting different shapes in a semi-automatic way is nearly impossible.
Curiously, in the Prototype mode, this seems to be very easy. We can connect elements with a few clicks and drags in a visually satisfying way. Would it be possible to use the same engine in Design mode to render those beautiful connectors between shapes and be able to customise them?
-
Mr. D
commented
Figma just release this feature, it's a big punch in the face.
Such a set of feature would allow me to stop using MIRO and also do my flow charts in XD.
Please consider this XD team.
https://www.figma.com/figjam/ -
Anonymous
commented
XD has become my primary tool. 25years in UX/I/UI
I want a very-light feature where i can create boxes, with text inside and connect them with arrows. this is a workflow/entity relationship/mind map like tool. I create these as a self-organization tool and to describe IA workflows. i put them next to my wireframes and want to place these in an artboard and share, prototype link like any other wireframe.
new boxes with text, ability to change corner radius, auto scale font size, connect with lines
-
Steinco Industrial Solutions, Inc.
commented
Steinco Industrial Solutions, Inc. is a wholesale supplier of metal framing products from Unistrut and a leading supplier of industrial products. Formerly Ron-San Products, Inc., Steinco has over 30 years of experience in the industrial market. Steinco can take projects from design thru installation and offers complete turn-key installations.
https://www.steincoindustrial.com/ -
Anonymous
commented
Maybe improving just a little bit the current Flow view in Developer View Setting, could be possible.
For example, when in Prototype mode in XD, introduce optional Label for each interaction.
In web Flow view, when user clicks the artboard, make the artboard selected and show it's lines with optional labels. If user selects more artboards, more lines will show up.Even grater options in Prototype mode for Interactions would be:
- hide in Flow view
- Line color/style/weightOther options in Flow view
- show extra artboard content (text that is present in XD outside of boards)
- enable contextual commenting
- Print in PDF -
Lakshya Nimesh
commented
Just like Miro!
-
Anonymous
commented
Im Totally agree with you
-
Anthony
commented
How is this not integrated into XD yet? This is a core method for designers, why wouldn't designers use XD if this was there?
Seems like this needs to happen.
-
Jackson Beale
commented
+1 I don't want to use userflow, just want to connect shapes with curved or angled lines (other apps give 2 choices only) so can build rapid flows or journeys. Currently use draw.io or mural, which I will continue to do for other things, but for quick diagrams/maps, this would be a VERY useful feature.
-
Frankie Loscavio commented
+1
-
Aimilia Tzanavari
commented
Hey 👋🏻! Overflow https://overflow.io/ is designed to do exactly what you described. It also integrates with Adobe XD.
-
RoMascia
commented
I would love to create my flowchart and once I'm done with it get all the artboards automatically generated with the correct name.
-
NF
commented
For MAC check this out! https://overflow.io/
It's great for user flow diagrams. -
Patrick Groover
commented
+1
-
Radu Ghitulescu
commented
+1
that would be really really helpful> I now use two software to build the UX experience.
One is adobe Xd for wireframing and proto and another one (and I hate that) for flows