Published on | Prototyping: From UX to Front End — Medium kylejohnston

I recently dove headfirst into Figma, a browser-based(!) design tool made for modern UI and web design. After 2-ish weeks of steady usage, I’m ready to call it: it’s easily the best design tool I’ve used.

Why now

When Figma rolled out in late 2015, it looked impressive. But at the time, I had too many excuses holding me back from giving it a shot. My team’s workload and deadlines didn’t lend themselves to learning new tools. The tools I was already using were good enough. The list goes on.

Today, I’m running my own design studio and I’m taking time to reevaluate the tools I rely on. Sketch is impressive — it runs circles around the Adobe tools I use most — but I’m hesitant to spring for a license. I’ve already paid for an annual Adobe Creative Cloud subscription, and it’s good enough for my day-to-day design needs.

But when a Figma-authored post on John Maeda’s Design in Tech report floated through my stream, I decided to give it another look. They’d recently released some pretty interesting new features. Reading comparisons of Figma and Sketch, even somewhat dated posts comparing their merits put Figma on top. Plus, the price is right for a longer-term test — it’s free for up to 2 editors.

Getting started

After a quick and easy sign up process, I was happy to find Figma provides a handful of starter files. Reviewing their sample file was a great way to learn the UI, tools, and basic tips and tricks. It’s a great onboarding experience— they’ve eliminated the dreaded blank page effect and made it super-easy to get started and get comfortable with the tools.

Figma’s starter files

Once I was comfortable with the basics, I created my first screens. I keep a Spark File — a running list of hunches, ideas, and inspiration — for just this sort of thing. I chose a simple app idea — it’s dedicated to displaying the day of the year. I have a long-running 365 photography project, so I’m a frequent visitor to poorly-designed online DoTY calendars. I’ve always thought a simple app would make my life easier.

After a few quick sketches, I jumped over to Figma and started designing. Later that day, I had screens ready to share. By the following day, I had basic interactions prototyped and was able to try them on my phone thanks to Figma’s impressively easy-to-use mirroring app.

From sketch to screen

Since my first starter exercise, I’ve used Figma to make:

Page mockups for a website I’m working on — thanks to Figma’s components, I should be able to easily create simple style guide and pattern library for my clients.
A library of regularly used logos.
A ‘scratchpad’ for random ideas, which I’ve used to quickly try new responsive layouts, test grids, generate patterns, and more.

Simply put: Figma is a powerful design tool. It’s easy to get started: you can use it in its native environment, the browser (which is crazy impressive). They also offer a slick desktop app. And compared to Adobe’s software, it’s much easier on my battery and CPU.

For the curious minds

So if you’re a designer who’s been on the fence about trying Figma, use a little time during a lunch break, evening, or a bit of time on the weekend to give it a shot. There’s a good chance you’ll get hooked.

For the curious, here are a few of the articles and resources I found most helpful as I was getting started:

The aforementioned Figma vs Sketch comparison. A little dated, but the points have aged well.
For wrapping your head around the potential of Figma: How to streamline your UI/UX workflow with Figma — Prototypr and Component architecture in Figma — Figma Design
For tips and tricks, Figma regularly shares roundups — #FigmaTip Roundup 2.0 and #FigmaTip Roundup 6.0 were especially helpful.
Getting more advanced: Figma: A Fluid and Modular Design Approach to Typography with Components and Waiting for a sign to start building your design team’s component library?

Useful follows: Figma (Medium), Figma (Twitter) , @mirkosantangelo, and @FigmaFinder

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

The best design tool I’ve used. was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

The best design tool I’ve used.

Cool stuff, every week

More Articles