My last post in the Gutenberg Diaries was about how JointsWP has been my starter theme of choice, and how I’m attempting to Gutenberg-ize it, but I also mentioned that I want to create a design system with Figma at the same time.
Right I’m trying to:
- Get my own projects going
- Start freelancing and get some WordPress clients
- Build out a co-op studio
Even getting my own projects going is proving to be overwhelming. But the more I break things into systems, the more those systems aid me in moving forward. And I’ve had to break down…everything. From setting up my Google Docs in a coherent system, to mapping out possible content ideas long(er) term, I’ve spent most of this year breaking down every process in making websites and learning about them.
But now I’m jumping into the system to end all systems…My design system… and I thought I’d write a post about what makes Figma the perfect tool for me.
How Did I End Up Using Figma?
Macs sucked in 2017
My MacBook Pro died in August 2017. I was bummed – I was a Mac-only guy for 18 years. I had never even seen Windows 7 or XP or 8 or 10 in action!
But, I couldn’t bring myself to actually spend money on the trash Macs that were out at the time.me
The MacBook Pros – The touchbar was a negative in my eyes, and the buttefly keyboards are clearly defective and not a good input device when they do work. (best trackpads in the game tho). And I just did a quick search, and people in 2018 were still recommending people find and buy 2015 MacBook Pros instead of these terrible machines.
The iMacs – All were 1 generation behind on specs, but were still selling at a premium price (however now these are rocking great specs in early 2019).
Beyond that, I had a bunch of firewire stuff – like a $600 Mac-only Apogee Duet – and Apple stopped supporting firewire, leaving me with a doorstop if I ever upgraded my OS. It was clear to me that Apple has changed their priorities, leaving professionals behind (and finding ways to milk more profits out of users to boost their stock prices).
So – I bought a bunch of pc parts and built a cheap pc – and later as my laptop, got a Chromebook.
Very quickly I hated Windows 10, but I tried Manjaro Linux, and LOVED IT.
From Mac…to trying WIndows, to having a Chromebook, and then switching to Linux. I had to find software that would work for me.
Figma is Platform Agnostic (basically)
What I mainly lost by switching from Mac was a bunch of software licenses that I couldn’t use anymore. Some of my favorites: Final Cut Pro X, Logic Pro (which I had been using since version 4.5 when Emagic owned them. I spent a few thousand on upgrades of those two over the years), Acorn, Pixelmator, Codekit… there were many more.
Sketch was one of the Mac-only apps I relied on back then. It’s an interface design app that really helped ios app designers a few years ago. Unlike photoshop or illustrator, it was made to do a few things really well, simply and efficiently.
So when my MacBook died in 2017, I was psyched to learn there was a Sketch competitor that not only covered most of their feature set, but it extended way past what Sketch does and included the functionality of many of its plugins and extension add-ons.
And the big kicker – it works in the browser! Yes, an app that was more robust and full featured than Sketch and worked on basically everything!
Figma gave me the freedom to work on any computer – I didn’t need to overpay anymore for a machine that was not best for my needs.
So I could be on Windows, Mac, Linux, a Chromebook – heck, even logged into someone else’s computer, and I could log in and do some work with Figma. Absolutely liberating.
It’s better than Sketch!
This is objective, of course. But compare the features! Yes, Sketch has plugins that extend the features far past what the original sofware offers, but Figma covers a lot of that ground and brings some key innovation to the table.
Quickly: Figma Components are basically Sketch Symbols but don’t have to live on a special page. The way you edit vectors in Figma is called “vector network”, and you can basically connect points from anywhere instead of connecting to the next path in order like in other vector programs – super intuitive and helps so much with icon and logo creation. Figma’s killer feature is real time collaboration and easy sharing, because it’s on the web! Share a link to your design instead of emailing or syncing files! Prototyping is also a major feature, something you would need another service connected to Sketch to accomplish.
For me, it’s the perfect tool for coming up with a design system, especially something with componentized building blocks like the Gutenberg block editor.
“BASICALLY” platform agnostic? Other thoughts…
I said “basically”, because…well, if you use Figma on Linux and ChromeOS, like I tend to, you are pretty much limited to designing with Google Fonts only.
There is an electron based Figma Desktop app and a Figma Font Helper app if you are running Mac or Windows which allows you access your local fonts in Figma.
For the rest of us?
However, I’m ok with Google Fonts for now. The rest of the package makes up for this, and I’ve taken to Roboto lately because it is super readable at small sizes on interfaces compared to fonts I’ve used in the past.
I really do hope they come up with another solution to this for Linux users at some point. (btw, there are some projects in the works for Linux to bring a native ui/ux development app to the platform, since we’re feeling the neglect. (Akira is one example – but it only received pledges of $18,466 out of the $48,658 goal on kickstarter to build it.)
Keep any eye on this as well – Figma just got another $40 million in funding which also leaves me curious about its future, as well. Are they trying to build a sustainable business or trying to flip to another buyer at some point? Just things to watch and keep in mind as I build my work on their platform…
TIP: I LOVED using it on a touchscreen Chromebook. Moving around the canvas by touching the screen was fast and responsive, as was zooming – amazing for a browser app! Figma + a touch screen laptop = good
Anyway…a big list of design system resources is coming up soon.