Interactive combobox

Hi there,

I’ve made a combobox, but I would like it to show the selection options when clicking the arrow.

Is this possible?

If I set it to “Normal” in the state option, it will show all the selections which is taking up too much space in my wireframe. I only want it to show the drop-down menu when clicking the arrow.

Thank you.

1 Like

Hey again, @DragonXD.

You can totally do this by duplicating your mockups. Here is a small demo project showing what I mean. Let me know if you have any questions, my friend.

Demo for Dragon.bmpr (27 KB)

Is this the only way? That will become a lot of mockups as I use combobox quite often…

Indeed it is, @DragonXD. We designed our apps to mimic pencil and paper, so interactivity is limited. We leave that to the more prototyping friendly apps.

So after I have designed a good wireframing, what prototyping apps do you guys recommend as the next step?

We tend to recommend Invision or Axure for folks who ask about prototyping apps.

We usually go from our Wireframes to Sketch to a rough version of the site/app, when working on a project internally.

Alright, so Wireframe -> Sketch -> rough version of site/app.

Is Sketch used to convert low-fidelity wireframes into high-fidelity wireframes?

What is used for the “rough version of the site/app”?

Whatever framework we are going to build it in.

So, for instance, with the Balsamiq Wireframes Editor, we wireframed the basic look of the editor in Mockups. Then we had Mike take that structure and finalize the actual look and feel of the design in Sketch. We took those designs and started building the actual app.

The first version of the Wireframes editor was literally just the canvas and the spaces where things would live. Over time, the team added components, menus, controls, and eventually built out the whole app. That’s how we built Cloud, and that is how we are building the desktop apps. We aren’t convinced that going to a prototype and then to code makes sense as you are kind of doing things twice.

However, if that is what makes sense to other folks, we totally understand. For me, design is figuring out the process that makes the most sense to you, and then finding the tools that are best suited to that process.

Thanks for your answer Brendan.

I did some research and I see Balsamiq has a skin called Sketch.

Is it this skin you are reffering to or is it the actual program also called Sketch?

Just to be clear.

Hi @DragonXD and sorry for the confusion.

We meant the actual Sketch app indeed. You may find this page useful for more resources. :slight_smile:

Thanks.

But can you please explain me the purpose of having both Sketch and Wireframe skin in Balsimiq? To me, the sketch skin is just an ugly version of wireframe skin, so why use sketch skin the first place? Surely clients will rather see the pretty version with wireframe skin?

Hey @DragonXD!

Please have a look at this page which describes the advantages of both. :slight_smile:

Is it possible to import balsamiq wireframes into Sketch? If yes, how? :slight_smile:

While we don’t have a direct option for moving files from our tool to Sketch, you can easily export PNGs or a PDF out of your project.

Hope this helps!

Interactive combo boxes and menus when in presentation mode would help keep the number of mockups to a minimum.

Early in the design process you can iterate faster without having many “interim” screens for combo box or menu content. (But you still need these items to allow the flow of the application to be captured for walkthroughs.)

Thanks, but if I want to work on it in Sketch, I need to import it, not export as PDF or PNG.

Sorry if I missed your point @DragonXD, I thought you were looking for a way to move your work from our tool to Sketch. Again no dedicated option but I know images can be imported in Sketch, which is why I suggested this option. :slight_smile:

I suggest a solution as i also face that problem ,i m using for drop down listing shown in the design view.
go to the more controls
type moodle components in the search box
clcik on the moodle components
see in the list " course setting block "
imort in the project.
this will add in your project .
hope so it will help you
thank you

1 Like