Callout or thought balloon plugin

Adobe XD UXP Plugin API
1

Has anyone made a callout or thought balloon plugin? Or wants to make one?

2

like onboarding guides?

3

Yes. For me, for personal use I need something simple like this.

image
image.jpg2400×2303 154 KB

But I’ve seen programs that have annotations gallerys:

image
image.png570×712 52.1 KB

4

I know color ranger built some onboarding materials like that (built by @Ali)

5

You can build a control that works in this manner pretty easily – just use some SVG:

<style>
    i { font-style: italic; }
    code { font-family: Menlo; }
    .coachmark {
        background-color: #108AEB; 
        border-radius: 4px; 
        position: relative;
        max-width: 300px;
    }
    .coachmark .pointer {
        position: absolute;
        top: -6px;
        left: 16px;
        width: 16px;
        height: 8px;
        fill: #108AEB; 
    }
    .coachmark p {
        margin: 16px;
        font-size: 12px;
        color: white;
    }
    .coachmark h3 {
        color: white;
        margin: 16px;
        font-weight: bold;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }
    .right .pointer {
        left: initial;
        right: 16px;
    }
</style>

<div class="coachmark at-tab right">
<svg class="pointer" xmlns="http://www.w3.org/2000/svg" width="16" height="8" viewBox="0 0 16 8">
  <path id="Polygon_1" data-name="Polygon 1" d="M7.293.707a1,1,0,0,1,1.414,0l5.586,5.586A1,1,0,0,1,13.586,8H2.414a1,1,0,0,1-.707-1.707Z" fill="#107fe8"/>
</svg>
<h3>Title</h3>
<p>Content</p>
</div>

And it looks like this:

image

3 Likes
6

@kerrishotts, could the above example work for a menu like XD filters?

23
Screenshot 2019-10-09 at 10.15.23.png420×656 51.6 KB

02

7

Yes, minus the shadow (we don’t support box-shadow yet).

8

ok, but how can we get the chevron’s x and y to display the menu accordingly?