Introduction

As CEO of a VC-backed design tool SaaS startup, Glorify, we were struggling to get a strong UI/UX culture in-house. We knew the benefits of it and we wanted to be able to design and ship features much faster with confidence. I already knew my way around Figma's classic features, but Figma had already been evolving extremely fast in the last 2 years and most UI/UX designers didn't keep up. Features such as dynamic variables and interactive components would allow you to build and prototype products 100x faster… literally.

I took on the challenge to learn all of Figma's latest features and become better at both design systems and interactive prototypes so I can bring the process internally and take lead from there.

Concept

During my learning curve, I had to build a concept application, so I decided to create a productivity tool which is my second passion after design tools.

Inspiration

There is a particular productivity tool called Slash. I adore it. It is basically a simple task creator that comes with set status columns: Later, This Week, Today and Done.

You simply arrange your tasks and HIT SLASH to start slashing each task one by one. During "Slashing" a task becomes active and starts a little floating timer on your screen that sits on top of any window you open. You can move it where ever you like so you can stay focussed on your task sprint.

It has a whole lot of other cool and satisfying features such as a task success screen with a a fun gif, a satisfying task completion sound, pomodoros, one time and recurring schedules, basic integrations and much more.

Overall it's a very simple app that you can install both on desktop and mobile

My concept

I love Slash, but there are few features and design changes I wished I had. I think personal to-do apps are powerful and are much more fun than opening bloated huge project management tools like Clickup and Asana. At the end of the day, the basics of productivity is simply having a task list.

I know tonnes of Freelancers both in my company and in my network, that are forced to bounce between so many of these huge project management platforms depending on their client. What would be super cool is to transfer, organize and prioritize all their tasks between all their projects into one simple yet powerful to-do app.

I wanted mine to have all the cool features Slash had but also add a unique spin of my own. Something Slash was missing was a simple way to instantly see all your tasks in your todays list in a tucked away vertical column that doesn't take too much space n your screen. It would be cool to summon this task list anytime while working. I also felt the onboarding and preference was too complicated and not always clear, so I wanted to simplify it. And finally I wanted to add a simple dashboard where users could create and manage multiple lists.

I called the app Blitzit.

Wireframe: Low fidelity concept design

The first step was to mockup the concept. I created a tower of today's tasks that slides out from the left of your desktop and could simply be hidden with a click of a button or keyboard shortcut. During the process I was already drafting the typography approach, color system and other interface elements. I was extremely happy with the user experience.

Design Systems

Once I was confident in my concepts, I started creating a basic foundational design system with colors, typography, spacing etc… I also started creating a basic components library such as fields, buttons, labels etc…

I was then able to use my design system to create a high fidelity version of my application from the ground up within a few days.

As I was building my screens, a new component would emerge out of necessity, so I would save that as a component and bring it to my design system at each step to use it at scale.

Interactive Components & Variants

The most powerful recent features of Figma are interactive components and variants.

Interactive components, for the first time ever, allows users to create basic interactions on the components so that you don't have to prototype those interactions on every screen. This could be opening up of menus, button interactions, interface animations and so much more.

Variants allows you to create one component with multiple variations. For example a button would have up to 3 or more variations for their states, example: default, hover and clicked. You can then switch them easily during the design process. This is also how you create interactive components; you simple prototype the variants within a component.

Prototype & Development

By the time I was done with my training I had built and entire fresh design system and extremely high fidelity and tactile prototype! The feedback I received was so good I actually partnered with developers to build it.

Because the app was built in such high fidelity and the prototype worked almost like the real thing, the development process was insanely fast (most of the app built in 3 months). Robust design systems and high fidelity prototypes skips hours of documentation and handoff calls with dev teams.

Website for marketing

In the end this concept project became an actual little bootstrapped SaaS startup! I was so excited to get it out to the world. I used the design system to create a basic landing page with a blog to start attracting potential early adopters. We're super excited to give people a new way of staying focussed.

Conclusion

Design systems and high fidelity prototypes can help you build 100x faster. It's more important than ever for founders and teams of startups to educate themselves about Figma's latest workflows so that they can build better and quicker than their competitors.

That's why we created Collabify.Design, the only platform providing vetted UI/UX designers that actually understands this process and is ready to collaborate with you inside your Figma file. You can skip hours searching and onboarding through traditional hiring, and get started with a simple subscription.

Best part is that you get a 7 day free trial. Sign up for a free trial today!