Making Figma feel more at home on the Mac.
Like a growing number of designers out there, I recently started using Figma for some of my static app design work. After a few hours of using it, I came to the conclusion, the software was amazing, but the desktop experience on the Mac could use a little love.
Over the past 5 years I’ve designed and developed two of my own Mac apps, Blocs a visual website builder and Solis a browser for designers and developers. I always like to have a little side project in the summer, something I can tinker with in-between working on Blocs and Solis. Anyway, to cut a long story short, I decided to write my own Figma desktop app with the mission of making Figma feel, more at home on the Mac.
In a nutshell, I was essentially going to build a native Mac browser that would be dedicated to Figma. I would avoid doing anything that could potentially hinder the Figma experience, so tapping into the Figma API via JS or modifying the Figma UI with injected CSS was off the cards from the start.
The name
In the past I’ve spent months trying to come up with names for apps, so it was rather refreshing to come up with one that I liked, in the time it takes me to walk home from my office. I appreciate I didn’t really do much aside from adding an extra letter to the end of an already cool product name, but it just worked. Figmac was perfect for my little side project.
From the web to the desktop
Figma is, as we all know, a web based app. This means pulling it down into my own application window was fairly straight forward, thanks to the WKWebView (a native Mac Webkit component that is optimised for WebGL performance). Both Blocs and Solis take advantage of the WKWebView, so I was able to get the main Figma application running in its own window in less than 30 minutes, thanks to my past experiences of working with it. Because Figma also runs in the browser (very well, I might add), the app just worked as expected when loaded in a WKWebView, delivering the same user experience as using Figma in Safari.
MacOS Finder and .fig files
One of the first things I did when I started using Figma was download a few example projects from around the web so I could explore and learn. I immediately noticed double clicking on a .fig file via the MacOS finder did nothing, the official Figma desktop app didn’t recognise its own file format 😱. I appreciate Figma is geared towards online file management, but this just seemed crazy to me. So, one of the first things I added to Figmac was the ability to recognise the Figma file format and handle launching and auto importing .fig files when they are double clicked in the MacOS Finder.
Another thing I noticed regarding .fig files was the lack of file icon support. If I saved a Figma project to my Mac it didn’t have an easily identifiable Figma file icon. Adding support to Figmac for this took a few seconds, so now when I browse files on my Mac, I can visually identify which ones are Figma project files, at a glance.
Native Tabs
The official Figma desktop app supports tabbed windows, but they don’t feel very native on the Mac. For example, you can’t simply drag a tab out of the tab stack to create a new window. Since the release of MacOS Sierra, adding tabbed windows to native apps has been pretty trivial (as long as the apps architecture is designed to support multiple projects being opened). With a few checkboxes checked in the Xcode interface builder, Figmac supported native tabbed windows. I hooked up a few Objective-C methods to catch the open project in new tab event (WKWebview offers this out of the box) and I was good to go. Figmac had native tab support.
The TouchBar
The official Figma app doesn’t support the TouchBar. Love it or hate it, it’s one of the key product features that makes a Mac laptop, a Mac. Adding support was a little tricky as I couldn’t call functions in the Figma API via JS, but with a little creative thinking, I was able to bring TouchBar support to Figma via Figmac.
Offline Detection
Internet connectivity is critical for Figma, so I was surprised to find that when my wifi was switched off, the official Figma desktop app didn’t immediately notify me that I was no longer connected to Figma. It did alert me after about 3 or 4 minutes. Personally, if my connection drops while I’m making edits in Figma, I want to know immediately. With this in mind, I added a little warning token to Figmac, that is immediately displayed if the internet connection drops. It’s fairly un-intrusive and is displayed next to the help and resources question mark button.
Figmac is x88 smaller
The official Figma app uses Electron, a cross platform solution for building desktop apps with web technologies. There is a bit of a debate amongst Mac users regarding Electron, with some considering it to be a form of cancer that is destroying the Mac. This is partly due to its performance issues and the overall file size of the apps created with it.
I had no intention of using Electron and instead wrote Figmac entirely using Objective-C. There are many benefits to doing this, but probably the most eye catching is the apps file size.
The official Figma app weighs in at 132MB when installed on your Mac, this is mainly due to the fact it uses Electron. Figmac on the other hand is all native, which massively lowers the file size of the app to a jaw dropping 1.5MB. That makes Figmac around x88 smaller than the official Figma app 😬.
It’s 2019, who cares about an apps file size? Me 🤓, because it’s less unnecessary space used up on my laptops HD and it’s potentially less code that needs to be executed just to get an app up and running. Looking at it from a business perspective, making the size of your app x88 smaller is also going to shave a little off those server costs too. But above all, 1.5MB of used disk space on my Mac in exchange for an app that is as powerful as Figma feels like witchcraft.
Security
I wanted Figmac to be as secure as possible. So I developed the app to be sandboxed, this means it cannot access any data on a Mac outside of its own dedicated container. I also forced all connections to the app over HTTPS using app transport security, enabled hardened runtime and finally got the app’s source code checked by Apple directly with their notarization service. As far as security goes, Figmac takes advantage of all of the most modern security services made available to Mac developers.
The App Icon
The icing on the cake for any Mac app, is of course, its dock icon. I didn’t want the Figma marketing stormtroopers kicking my door in, so I avoided using the Figma logo. Since Figma primarily focuses on vector graphics, it made sense to use the pen tool symbol, but translating the Mac aspect into the app icon (without it looking cheap) was a challenge. I was hunting around the web for inspiration when I came across the old rainbow Mac logo from the 80s. It made me think of the unique multi user aspect of Figma and how they use colours to identify different users within a project, I almost immediately knew that was the nostalgic nod to the Mac I had been looking for. I added a little rainbow trail to the pen symbol and the Figmac app icon was born, I actually think the icon would make a pretty cool T-shirt too 😎.
Performance
Performance is obviously the biggest factor that is going to be considered by the end user, does Figmac deliver desktop standard performance and is it better or worse than the official Figma app? I haven’t had time to really test this, so I wouldn’t be able to answer that. However, I did discover a few things.
During my very basic testing, I did notice that Figmac was loading projects faster than the official Figma desktop app. Figma have some console logs that track project load speeds, so it made sense to compare the logs between the official Figma app and Figmac. I found most of the time Figmac was loading larger projects like the Google Material Design template, in around 0.7s, while the Figma official desktop app loaded them in around 1.10+ (according to the console logs). That being said, I also noticed Figmac was slower completing the [fullscreenIsReady] process compared to the official Figma app, so these loading data logs may just be trivial, as an outsider looking in, it’s hard to tell.
I should also add, I did notice the zoom frame rate is a touch smoother on the official Figma app, so it looks like Electron is squeezing a little more juice from the GPU somehow, Or Apple is limiting the WKWebView so it doesn't hog the system 🤷♂️.
Test Flight
I was pretty happy with Figmac and I figured other Mac users may be interested in using it too, so I made a little landing page to distribute it. As a real world test, it made sense to design this landing page using Figmac. During the process of mocking up the site, I never noticed any performance issues, Figma seemed to run nice and smooth via Figmac. Once I had the site designed, I quickly built it into a fully coded website using Blocs, my website builder Mac app. The project was complete 🥳.
Final Thoughts
Building Figmac was really fun, it was a great way to break out of my normal work routines and build something new just for the fun of it. I learnt a bunch of things and enjoyed seeing all the parts fall into place.
I hope the guys at Figma don’t mind me making Figmac and also making the comparisons, hopefully I’ve highlighted a few areas that the team at Figma will explore and consider in future for Mac users.
One thing is for sure, I love Figma, but now I have Figmac, I love it a little more! ✌️
Going Forward
If you would like to track the progress of Figmac going forward, you can follow the app on Twitter.
