Web Design 2016: Attack of the Chromes!

As we’ve just closed out 2016, I think it’s always interesting to look back on how your workflow might have evolved over the previous 12 months. It’s often surprising how many of your tools and techniques change over the course of a year.

For me, the stand-out theme of 2016 Design & UX has been the arrival of the Chrome app as a fully-fledged web design option. In fact, I’ve written about three of them in 2016 in this very newsletter.

The BoxySVG UI
The BoxySVG UI

Back in April, we talked about Jarek Foksa’s BoxySVG – an excellent little SVG editor . Though the app can run in the Chrome browser, it works best as a downloaded ChromeOS app.

In September, I covered Pingendo, a prototyping tool that delivers Bootstrap-powered prototypes – and another Chrome app. I’ve built two prototypes with this app since then.

Enter Figma

However, arguably the biggest change to my own workflow in 2016 only happened in November when I edited Adam Rasheed’s Is Figma a Serious Option for Sketch Designers? – yet another ChromeOS app.

Now, Adam will tell you he’s an unabashed Sketch fanboy – I mean, he teaches courses on Sketch – yet he came to me excited to write about a web-based competitor to Sketch. At the time, I knew nothing about Figma but became intrigued as I read his first draft.

Figma
Figma

Six weeks later I now use Figma every day. I didn’t mean to – it just kinda happened. I have Sketch, Adobe XD, Photoshop and even Fireworks, yet I find I spend more time in a (currently) free web app.

So, Why Figma?

It’s not the UI. If Sketch invented what a modern UI Design tool should look like, Figma hasn’t strayed far from that. Layers on the left – properties on the right. If you’re familiar with Sketch, you won’t feel lost in Figma (or XD for that matter).

Also, Sketch files generally import cleanly into Figma with minimal issues.

But obviously, none these aren’t reasons for switching to Figma.

Is it because it’s free? No. Don’t get wrong – I like free, but I’ve already paid for the other apps so I’m technically losing money by not using them.

No, there’s a more surprising reason (to me anyway).

Figma’s Multi-user Collaboration is a Game Changer

Multi-user collaboration is Figma’s ‘special sauce’ – the only thing that makes it significantly different to use than Sketch, Photoshop or even Adobe XD.

Figma's Multiuser UI
Figma’s Multiuser UI

Figma lets you share design via either URL or username directly from the app. There’s no upload or syncing to secondary cloud service. Figma designs live online – not unlike Google Docs.

This means when two or more users are viewing the same Figma design, you can see the other user’s cursor live – again similar to Google Docs.

And I have to say, when I first saw this, I though ‘Hmm… that’s… cute’.

But over time, it gradually it became clear how incredibly useful this live sharing feature is. Here’s why.

1) Figma Docs are Living Style Guides

When you share a Figma document with a developer (view only access), they then have the ability to click on ANY page element and view its properties in the right panel. That includes:

  • font-family, size, weight
  • width & height
  • line-height & margins
  • colors
  • shadows & effects

Continue reading %Web Design 2016: Attack of the Chromes!%

Leave a Reply