New Feature: "Panels" UI


#1

Gone is the annoying flying property inspector.

Now you have mockups on the left, and properties on the right. Simple, predictable and quick.

What do you think of the new UI?

We know that some people liked being able to see both the UI Library and the Property Inspector at the same time…but if you think about it, you always either need one or the other. Putting them as “toggable tabs” saves screen real-estate.


#2

I can see, that I have to live with either lib or properties(*). But it would be nice to be able to swap left and right panels.

(*) I don’t like it, as no algorithm knows what’s going on in my brain and knows, if I want to see one or the other.


#3

Hi Andi!

We are thinking of changing (i.e. “removing”) the algorithm today, and instead make the switch be manual. I also would like to find an easier shortcut for it than CTRL+SHIFT+I.
It’s more predictable that way.

Re: swapping left and right, never say never, we’re keeping it simple for this release. Let’s see if many others feel the same way!


#4

Thanks Peldi

For me, the two icons in the toolbar are not obvious (smiley and information). And the indication of the selected panel by color coding is not obvious as well. In our tools, we use some “underline” indication. This would look good as well in Mockups.


#5

Build 887, out now, turns off the algorithm completely and changes the shortcut for the info panel to CTRL+; - try it out!


#6

I think I’d like the swapping left and right option too - I’ve already been annoyed a few times that I keep having to switch back and forth between them as I’m working.

Another alternative would be to allow a top/bottom placement for the library and info, with an adjustable horizontal bar between them allowing me to choose whether they each take up an equal amount of space or one panel get’s more height than the other.


#7

Interesting! I am surprised you still use the UI Library Jenni, I thought you had switched to Quick Add long ago. :smile:

Have you tried using the CTRL+L and CTRL+; keyboard shortcuts to toggle the UI Library and Inspector? They are really fast for me…

We chose to make the Library and the Inspector take up the same screen real-estate because, in theory, when you use one you don’t need the other: you cannot customize a control you’re adding, nor you can add a control while changing the properties of another.

At least that was our thinking. Having both visible at the same time saves a click (or a keyboard shortcut), but requires a big mouse movement, and eats a lot of real estate…


#8

I use both the Quick Add and the UI Library. Quick Add for things I use all the time, UI Library when I decide to use a control or a symbol I haven’t used in a while and am not quite sure of it’s name.

Since I’m using the mouse to move things around in between modifying controls and adding new controls it probably takes me as much time to switch to the keyboard to make the command as it does to move the mouse pointer to the tiny buttons you have for the two options. The “eats lots of real estate” is one reason I suggested the top/bottom option for the two panels.

Another suggestion would be to keep them as is but instead of small buttons make nice, wide tabs above the category buttons.

Examples:


#9

Great new look guys well done.

My personal opinion is that when I click an object, the object properties tab should be selected by default! When I de-select an object, it should go to the library tab. This would feel much more user friendly as the tabs will display when relevant.


#10

So if I click an object, I expect to be able to edit it because I’ve made the conscious effort to click it and my attention is on the object and its properties, therefore the properties tab should be selected at this point.

If i click away from an object, my attention is on the mockup in general and here I might want to add a new object so at this time, the library tab is appropriate.


#11

Hi Jason, thanks for the kind words.

We had implemented the behaviour you describe in a previous build, but removed it because it was jarring and it didn’t fit with all use-cases: a lot of people want to use the UI library to add a bunch of controls first, then switch to laying things out and customizing them later.

The manual switch is a bit of work (CTRL+L and CTRL+; are your friends), but it’s very predictable.


#12

Can’t you add it as a toggle to use my method or the new one? I don’t think it’s fair to give preference to those that put all of their controls on first and then edit. I would argue that a lot of people (certainly where I work) customise the controls as they drop them on… Look at Microsoft Office as an example, the ribbon changes depending on what you are working with.


#13

Great job on the new property panel, especially in the build 904 with the align buttons.

I use keyboard shortcuts all the time and know my controls by heart, therefore I don’t need the UI library.

The only time I need the UI panel is to change basic stuff, like position, size and colors. This is where I would ask you guys to help up become even more productive my simplifying those controls.

Size and Position

I’m still wondering why left/top and width/height are still using a combined text fields. All paint/illustration/design tools I have ever worked with use distinct separate fields. Editing one property at the time, combined with the tab key to navigate has been the method of choice for ages to quickly edit values. Currently, I have to be very careful when changing those values, as I need to make sure I don’t erase the ‘x’ or the ‘,’

For example, if I want to edit the height of a control, I need to:

  1. Click inside the Size field. (the entire text gets selected)
  2. Either select the height or play with the left/right/backspace keys to position the caret to the desired position
  3. Enter the new value

Having 4 distinct text fields would make editing so much faster:

  1. Click inside the Height field. (the entire text gets selected)
  2. Enter the new value

Let’s hope for distinct controls, and no more errors typing ‘x’ and ‘,’ :pray:


#14

To continue with my quest for better efficiency working with the new property panel, which I love by the way, I want to ask you guys to offer expanded color pickers.

Our products use a dark theme. Therefore, we have to modify colors for most of the controls inside our mockups.

Now that we have enough room in the property panel, it would be helpful to select colors in a single-click. Even controls with two colors (fill and border) can accommodate two expanded colors pickers. I don’t mind if you offer to pin it expanded or collapsed, for those who work on small real estate like laptops. But for large desktop users, we would benefit from a single-click color selection.

A lot of illustration/design tools, like Photoshop, offer an open color picker inside their property panels. This makes colors manipulation very fast.

Again, this would be another step towards greater efficiency.

You guys rock! :fist:


#15

Very good suggestions by Mathieu. I would even go further and show the separate fields as so-called spinner controls (with up & down buttons on the right side) in order to quickly increase/decrease values (without the need of typing new values).

Sketch has nailed it – shows spinner buttons only when hovering (look at the first field):
CloudApp

…and a regular text field when the focus is inside the field:
CloudApp

Plus, users should be able to tab through position & size fields and easily change the needed values.

+1 on single-click color picking.


#16

@Mathieu_Brault @Taimar we are planning on splitting pos and size into 4 fields, hang tight!


#17

Thanks a lot, you made my day!


#19

@peldi - will this be possible?


#20

That is not planned at the moment. Like I said, we tried the behaviour you described for weeks, I was the main proponent of it and fought hard for it…until I used the app for a whole day on a real project. Although it sounded perfect on paper, It was annoying and unpredictable. Never say never, but I want to give the current design (stupid but predictable) a chance for a while.


#21

@Mathieu_Brault @Taimar please check out the latest build, it has the position and size inspector split up in 4.