Figma App UI Builder

Flashback

It's the year 2015, we want to make interface-building a little easier for beginners.

Atomic Design is trending right now, everybody talks about Molecules, Atoms and Elements. We like the idea and decide to turn the Atomic Element Concept into a useful UI design tool.

Why not simply use a ready-made UI Kit? Problem solved.

The challenge with UI Kits

UI Kits are popular and helpful, but all they do is give you a collection of different buttons, page layouts and content placeholders. Basically a vast amount of elements, but no guidance or wizard on how to piece them together from scratch.

Like Lego bricks, you get a lot of freedom but this makes it even harder to get started (especially as a Junior UI designer).

If you start with a blank page, you have no idea what to do next...

The idea: Semantic UI Wizard

By classifying different UI components and controls we tried to reduce the complexity of choice, e.g.

  • Content blocks depend on the screen size (desktop or mobile)
  • a button can only fit inside a content block
  • A button can't be put inside another button
  • Depending on your layout choice options will be limited
A wizard should guide the user through the process of creating a User Interface or page layout.

Our first ideas
Classifying UI layouts
UI Wizard Click Dummy in Figma

And then...nothing happened.

The UI Wizard idea was interesting, but we couldn't find a simple way to incorporate these concepts and findings into any existing UI tool. Building a standalone app was out of scope.

So we had to put it on hold until (in 2020) the Figma plugin ecosystem got announced.

Wait...we can now create our own Figma plugins? What a time to be alive!

2021 - Time to revive the wizard idea

Some years have passed and there was still no tool available - so we decided to put luck into our own hands and started to build a Figma plugin with the following goals in mind:

  • Make UI building more playful for beginners
  • Get something done within minutes
  • Provide a library of prebuilt layouts
  • Directly integrated into Figma editing tools
  • Reuse existing Material UI Kit components

It was a nice opportunity to find out how complicated easy it is to build plugins with Figmas very own Plugin API.

Nice side effect: People getting familiar with UI-Kits might end up buying the Material UI Kit we built and sell through Gumroad.

User Testing

After finishing the MVP, we started doing User Tests with real people.

Turns out we need to improve the onboarding...a lot. The users got confused instead of engaged to start building App UIs.

So we went through another iteration of improvements:

  1. Clear copy in the header (what is this plugin for)
  2. Primary CTA
  3. Quick Start Tutorial for first time users
  4. Assistance and hints in the footer (in case you're still lost)
App UI Builder Figma Plugin - Empty State

Release - Done. ✅

Finally releasing it into the Figma Community feels great and means several things to us:

  • A long-hibernating idea got revived and delivered (always keep your notes archived)
  • We turned our ideas and vision into something feasible you can tinker with and reason about
  • We released it to other people - now THEY can tell us whether it's useful
And most important: The thing got out of our head, a free slot for new project ideas to come.

6k installs - it's...something.

TODO: Business Case

Besides being a nice marketing tool for our own Material Design UI Kit there's still a true business case missing (so far). We're well aware of it. If you have a good idea on how to allocate funding, just let us know.

The end.