/ Forums

Balsamiq Community Discussion

Balsamiq vs Figma, Marvel etc

UX Help
#1

Hi, Could anyone please help me understand what needs to be done before handing over a Balsamiq wireframe to a developer?

I hear developers asking for a ‘Figma’. Some recommend importing Balsamiq files in ‘Marvel’ and making a prototype out of it. But I have been wondering why can’t a developer pick up straight from Balsamiq, if it’s just about building a MVP?

Please let me know.

Thanks

#2

Hi @shubham1985,
From my experience, it’s absolutely possible to use Balsamiq as a hand off for developers both for a MVP and a mature project.

You need to understand, what exactly developers need to do their job. And they need at least two things, besides the wireframes: these are a hi-fi design (they want Figma for this) and interaction flow (they want Marvel for this).

For MVP you’d probably use some framework (Bootstrap, Foundation, …), so your wireframes give an idea for developers of which controls to use (no Figma needed).

As for interaction flow, you can create it in Balsamiq using links. Also I’d recommend to include some notes to describe details for developers (no Marvel needed).

For simple project, it could be as pictured:

image
image833×849 107 KB

1 Like
#3

Hi @Alexey_Kolchenko: Many thanks for your reply. Two questions (could be really basic at your level but would much appreciate your patience):

  1. When you say framework for MVP, does it mean knowing if I am using Swift for making an iOS app?
  2. For the interaction flow, is it equally good to have flowcharts using Miro? I can maybe use Balsamiq screen names in the chart to better indicate which screen I am referring to exactly.

Thanks Again.

#4

@shubham1985 ,

  1. A framework defines and implements a set of components, so you need no to design these from scratch. For iOS you just need to include a link to Apple’s HIG for developers. For Android use Material Design guidelines. But be aware of the components’ recommended usage and their limitations
  2. Any tools which speed up your process. I use Balsamiq for this (was inspired by the A shorthand for designing UI flows article), as a single tool, as pictured:
    image
    image972×434 9.04 KB
1 Like
#5

Thanks a lot, @Alexey_Kolchenko. This helps a lot.

1 Like
#6

Hi @shubham1985,
Excellent question. And thanks to @Alexey_Kolchenko for the great reply.
I’ll add a few quick ideas too.

  1. We recently wrote an article on creating “Wireflows”, which are essentially what @Alexey_Kolchenko showed. This might help you create something for your project: Wireframing User Flow with Wireflows | Wireframing Academy | Balsamiq.
  2. If your team is already using a design system or development framework (like Bootstrap, etc.) this article might help: How to Use Wireframes with Design Systems | Wireframing Academy | Balsamiq.
  3. Rather than simply giving the developers what they’re asking for, it can be useful to try to understand why they’re asking for it that way. Learn what information they need to help them build it. That’s why Communication is one of the 5 key steps in wireframing.

Lastly, if you want a bit of background on how Balsamiq compares to the other tools you mentioned, this is a good overview: How Does Balsamiq Compare to Other UI/UX Tools? | Balsamiq.

Hope this helps!
Leon