Feature Request: Rotate any shape by any degree


#22

Because buttons rotated like that would be hard to design for, and implement, we don’t know of a great use case for them - that’s why we don’t offer rotation like that.

That being said, there are a couple of ways you could accomplish this, @Sylvermyst!

You could import that image into your mockup and use it as a button.

Or, if you’d like something a bit more interactive, you could construct a button out of 4 line controls. Here is one I whipped up quickly:

{"mockup":{"controls":{"control":[{"ID":"6","children":{"controls":{"control":[{"ID":"0","h":"61","measuredH":"66","measuredW":"100","properties":{"curvature":"0","direction":"top","leftArrow":"false","p0":{"y":0,"x":0,"length":0},"p1":{"y":0,"x":0.5,"length":0.5},"p2":{"y":60.089552238805965,"x":89.10891089108911,"length":107.47628709839324},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"90","x":"15","y":"0","zOrder":"0"},{"ID":"1","h":"61","measuredH":"66","measuredW":"100","properties":{"curvature":"0","direction":"top","leftArrow":"false","p0":{"y":0,"x":0,"length":0},"p1":{"y":0,"x":0.5,"length":0.5},"p2":{"y":60.089552238805965,"x":89.10891089108911,"length":107.47628709839324},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"90","x":"0","y":"26","zOrder":"1"},{"ID":"2","h":"27","measuredH":"28","measuredW":"16","properties":{"curvature":"0","direction":"bottom","leftArrow":"false","p0":{"y":26.068965517241377,"x":0,"length":26.068965517241377},"p1":{"y":0,"x":0.5,"length":0.5},"p2":{"y":0,"x":15.058823529411764,"length":15.058823529411764},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"16","x":"0","y":"0","zOrder":"2"},{"ID":"3","h":"27","measuredH":"28","measuredW":"16","properties":{"curvature":"0","direction":"bottom","leftArrow":"false","p0":{"y":26.068965517241377,"x":0,"length":26.068965517241377},"p1":{"y":0,"x":0.5,"length":0.5},"p2":{"y":0,"x":15.058823529411764,"length":15.058823529411764},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"16","x":"90","y":"61","zOrder":"3"}]}},"h":"88","measuredH":"88","measuredW":"106","typeID":"__group__","w":"106","x":"362","y":"189","zOrder":"0"}]},"measuredH":"277","measuredW":"468","mockupH":"88","mockupW":"106","version":"1.0"}}


#23

Hello! I would like to endorse the request to add rotation functionality to any object. For me that’s such a basic feature that it is incredible that something as awesome and flexible as Balsamiq does not have it. It makes my life much harder, having to create my own rotated controls.

we don’t know of a great use case for them - that’s why we don’t offer rotation like that.

What if my company uses a very flexible UI toolset that makes implementing rotated buttons as easy as pie?

If you want this to be true [from https://balsamiq.com/products/mockups/]:

Mockups offers the same speed and rough feel as sketching with pencil

Then you should let me create my controls in whichever orientation I want :slight_smile:


#24

Totally hear you, @augusto_medeiros, and it’s something we will continue to discuss!


#25

I’m also missing the rotate possibility, or at least edit possibilities for the charts. I am currently testing visuals for a stacked bar chart, as an example. Chart component is not editable. I wanted to quickly visualize stacked bar charts, in vertical and horizontal. I created an horizontal one with rectangles and lines. From this one, I expected to simply rotate the whole thing to 90 degrees to create a vertical version, but I had to draw a vertical one from scratch. Quite annoying.


#26

By the way, I work quite a lot with data visualization and this is not the first time I had to jump to Illustrator because of rotation restrictions. The last time I wanted to rotate and duplicate an object several times, defining angle and axis and repeating the operation around that axis, multiplying the objects in angle and creating an arc of them. From Balsamiq, that was just frustrating. No chance. From Illustrator it worked, but… Wasn’t Balsamiq supposed to support me on my work with sketches of ideas before jumping to detailed visuals?


#27

I agree with the OP on this one. I am currently doing mockup of an industrial controller, where a part is layout design. So need to illustrate concept of “rotating fields”.

Have to resort to JPGs to do this, it’s possible but a bit of a pain. Would be much nicer to rotate things freely simply by dragging a small handle in the object.

Hope this can be implemented at some point.


#28

+1 for this enhancement request. See the diagram below, which works OK done with dashed arrows. However, I would have preferred to do this with the dashed rectangles rotated around the switch.


#29

I just noticed that this is not possible in Balsamiq, except for importing the graphic file

The triangle can only be rotated by 90 degress and the label only has some mild rotation.
Any suggestions?


#30

Hey @ArcticMe,

You’re right, there no easy way to make this one in Balsamiq right now, but I’m adding your vote for it since we have received some requests about making a right angle triangle and ease the label rotation.

In the meantime, you can (at least) create a similar triangle by using two Shape controls, as shown below:

Thanks for sharing your need Dom. Hope you’re having a great summer! :sunny: :slight_smile:


#31

Hey Virgin,
thanks for the quick reply!
Having a good summer indeed, gonna be off for soccer with a few colleagues in an hour and working in balsamiq until then.

My workaround is different and works not as good as yours. I created a triangle, grouped it and cropped a half.
Geometry is so much fun :slight_smile:


#32

" I get that it could be suggested that the other shapes don’t need the ability to rotate."

With the absence of a custom line tool the ability to rotate the rectangle becomes very necessary.
Also, rotating the triangle to specific degrees is important if you want/need to make a custom arrow that doesn’t just point horizontally or vertically.


#33

I’m surprised this hasn’t been added to be honest. Can we have a basic rotate function at least?

Even Microsoft Paint has a basic rotate feature for all elements…


#34

We definitely don’t want to leave rotation out for controls that make sense, @stevebauman.

Where would you like to see it? :slight_smile:


#35

I would like to see it available on every element, just like paint. It is a mock up tool after all.

Thanks for the quick response.


#36

The problem with putting rotation on everything is that it could make wireframing (as well as implementation) more difficult for you and your team. Since Mockups is a starter tool, we don’t want to add complication to the beginning of the design process, you know?

That being said, adding rotation to a control is one good discussion away from implementation. If you have a use case for a control that requires rotation, tell us about it! This is the type of stuff we love! :slight_smile:


#37

Since Mockups is a starter tool, we don’t want to add complication to the beginning of the design process, you know?

Why would it add complication to the design process? If anything it’s hindering my design process. Rotation of objects is on a per user basis. If a user wants to rotate and object, why limit their design abilities and creativity?

What if my design includes certain rotated elements? At this point I either need to create an image and insert it manually, or use another product which supports rotation.

From the previous responses here, it seems like there’s always a 'bandaid ’ answer, but at this point I’m assuming the reasoning against the implemenation is one of the following:

  • The application just can’t support having other rotatable elements / objects

Or:

  • It’s too much work to code (probably due to rotational options needing to be coded on a per object type basis)

The whole feature request here is having a global rotation control for all object types. Not adding it in on a per object type basis. I’m sure you can agree this would be a nice feature to have.


#38

I’m sorry if it’s coming off like a band-aid answer, Steve. That’s not how we want it to feel. The reason we keep repeating it is because it’s genuinely how we feel (it’s even in our documentation).

If there are places where you need rotation, we want to hear about them because we want to add them. We only push back against the idea of adding it to every control because we worry that it will cause more problems than it solves.

But we want to add it where it makes sense, and we will be the first to admit that there are almost certainly places it makes sense that we have missed. That’s where we need your help. Tell us what we missed, and we will get it fixed.

The implementation isn’t the hard part - the discussion is.

Edit: I feel like I should expound a bit on the problems it can cause. Rotated elements are not standard in UIs and really only used in special cases. Allowing folks to add them will make their apps harder to use (and may even be impossible to code).


#39

As both a designer and coder I totally see this from both sides of the fence. But if we’re honest it’s often the designer who has the final word, so I’d err on the side of adding rotation globally and either prompt/warn the user that using this might make their creation “impossible” to code or leave it as an internal discussion.

Just as a bit of fun, Steve, the frustration you feel having to use Paint to rotate, save, and import an image into Balsamiq is pretty much the same as what a developer would feel when they see that rotated object in your specifications - they’d probably be doing the same thing (making an image) to get it into the app/website. :wink:


#40

I would request this especially for images, any graphic shapes (square, circle, triangle), and of course text. Not so much things like input boxes etc. But labels for sure.

The process of designing part of GUI in Mockups3 then go to PaintShopPro to do the rest is a pain.

If you think it’s complicating things too much for some users - make it options. You know, so users can be warned about graphic content :wink:


#41

I think that rotation is not necessary for all elements, but I just had the use case that I wanted to put the location arrow on the map. The problem is to align it with the street direction to make it look realistic. There it would be great to have a free rotation angle to set the position correctly.
rotation_example