How you can design end to end on a Chromebook

Why I moved my entire workflow to the web

Zach Grosser
Figma Design
5 min readMay 24, 2018

--

When Chromebooks first came out, it would’ve been a pipe dream to believe they could replace Macs for designers. They were limited by power, software, and screen quality. Even today, few would think to trade out their Apple computer for a Chrome device.

I’m here to tell you it’s possible, and I’ll even share the tips that made it so. For the past year I’ve been working as a professional, paid (yes, paid!) designer using a Chromebook as my primary computer.

Why, you ask?

Well, Square, my previous company, persuaded me to make the move. They decided to transition some people over for a range of reasons — from the security of Chromebooks (they’re way safe) to their affordability to the fact that files are always backed up and synced.

As a designer, I could’ve chosen to stick with Macs, but because I worked with people inside the company on internal presentations, I decided I needed the true Chromebook experience to empathize with my “customers.”

I was wary at first…of course. Would this Chrome computer sit on my desk, collecting dust after a day of usage due to my preference for macOS? I’ve been designing with Figma for the previous three years (I was lucky enough to get an alpha invite), so my primary design software was already in the cloud. But I had no idea how Chromebooks would handle performance, or how I’d go about meeting my other design needs.

It’s been an adjustment, but overall, I’ve gone Chromebook and I’ll never go back. Below is what you need to know if you’re thinking of making the switch as a designer.

Image on left courtesy of Google.

Six things to know about designing on Chrome OS

  1. The design tool Figma is the only one I know of that runs in the cloud, so it’s necessary for designing on Chromebooks. I had been using it for the previous 3 years before I switched to Chromebook, so I was in good shape when I made the jump. (Disclaimer: I work at Figma now.)
  2. The Control key is the Command key equivalent, and yes your finger will get used to its location. The Search key (in place of the caps lock key) can be used as a modifier, such as Search + drag duplicates an object. In Figma, opening the Shortcuts menu will show you keyboard shortcuts for whichever operating system you are currently using, including Chrome OS. (Ctrl + Shift + /)
  3. Performance has never been an issue. Figma is super fast everywhere I’ve used it, and works great across the three different Chromebooks I’ve tried.
  4. There are always other tools you need for design: Slack, Grammarly, accessibility testing tool Funkify, and G Suite are all web-based, so I didn’t have issues there either.
  5. Some things to watch out for: Currently, there is no ability to install custom typefaces, but Google Fonts offers a ton of great options and you have access to all of them. Additionally, sometimes you are limited by your access to the internet, however the Chromebook still has some functionality when you are offline.
  6. The touchscreen computer has been surprisingly nice to have for scrolling through long documents and Slack conversations or even navigating around a canvas.

There are a bunch of Chrome OS devices, what should I use to design?

There’s a ton of options for Chrome hardware, and I’ve looked at all of them. I first tried an HP Chromebook, then I experimented with the stylus and touchscreen of the Samsung Pro. Now, I have the Google Pixelbook, which is my favorite so far. The Pixelbook starts at $999, a premium price-point for Chrome devices, but it’s still less than a third of the cost of my previous MacBook Pro. I’m even eager to try some of the lower cost Chrome devices — even a Chromebit, the $85 computer in an HDMI stick. For now, I’m sticking with the Pixelbook because of the quality of the keyboard and trackpad.

Speaking of tools…

As a designer, I’m always trying out new tools and workflows to get work done. Here are some of the tools that I’ve found for getting almost all my work done in the cloud:

Creating:

Organizing:

Messaging:

Listening:

For video and audio editing, I keep a Mac around with Final Cut Pro and Logic Pro. I’m confident that I’ll turn to web-based alternatives for video and audio editing in the future, and if it wasn’t part of my design work, then I would rely solely on Chrome.

Software has moved to the web

As a designer, not having to worry about backing up files or even saving is a relief. Losing work never feels good, and having access to your files from any browser makes working in multiple places or with multiple devices easier. You’re able to let go of the idea of files tied to a device.

As web technologies continue to advance, so much is possible on the web. Figma started after co-founder Evan Wallace used WebGL to make an interactive swimming pool and sphere with real-time rendering and realistic physics.

Screen recording from madebyevan.com/webgl-water

This demonstration proved that browsers were ready to support virtually any type of software — especially professional design tools.

The web as a platform is unrivaled for accessibility. For the most part, the web is open; anyone can build for it, and there isn’t corporate ownership nor app store evaluation processes as a gateway to your customers. More individuals and teams have access to building and publishing to the web than any operating system platform could, further distributing the access to building products.

Which browser-based productivity tools do you swear by? Let us know in the comments!

--

--