Figma: A solid UI Design app that’s finally improved the Pen Tool.
Vector Networks and four other features that make Figma stand out.
Note: I’m in no way affiliated with Figma.
Figma?
Figma is a new interface design tool that is in many ways, similar to Sketch. Unlike Sketch, Figma is an entirely cloud-based web app.
If you already know Sketch, you practically know Figma.
What makes it special?
A unique feature of the app is the ability for multiple people to simultaneously work and comment on a design. Think Google Docs for design.
Big Challenges
Figma faces stiff competition from the UX/UI design community’s new favorite app: Sketch. It was hard enough for us to be convinced (and then convince everyone in the office) to switch from Adobe CC to Sketch, so asking designers to switch again could be a huge blocker for success. However, if you already know Sketch, you practically know Figma.
The Pen & Vector Tools
I love the vector tools in Sketch, but Figma has gone one step further by creating their own vector paradigm called vector networks. You can read up on the technical side of vector networks on Figma’s blog, but for the visual learners, I’m going to show you what makes them better.
More Drawing, Less Merging
The pen tool in Figma allows you to connect paths to closed shapes in order to construct 3D forms in the same way you would if you were drawing on paper. For instance, you can draw a cube in Figma with the pen tool alone, no need to merge or group 2D shapes together.
I didn’t immediately understand why this was special. It felt obvious. Then I tried to do the same thing in Sketch and Illustrator and remembered that there is no ability to add paths that branch off of a closed shape. Weirdly, this makes so much sense that you forget that other programs don’t do it.
I love the vector tools in Sketch, but Figma takes them one step further.
Toggling Segment Fills
By using the bucket tool, you can toggle each segment’s fill on and off. This is great for making detailed edits to combined shapes.
Converting To Outlines
Figma is much better at this task; especially compared to Sketch which in instances, like the example below, does something really strange.
Merge Shapes By Pasting One Inside The Other
Sketch has this feature too, but Figma has mastered it. Want to merge two shapes together? Copy and paste one inside of the other.
Other Promising Features
Slack Integration (Teams)
Figma integrates with Slack teams and gives the Team its own section in your file browser. You can set up automatic Slack notifications when a teammate comments on a file inside of Figma, and this can be changed on a file-to-file basis.
Importing Sketch Files
I was surprised to learn you could import your Sketch files into Figma. To test this, I imported a simple, one-page, one-artboard Sketch file (definitely not common for my Sketch files). Figma quickly uploaded and converted the file into their .fig file-type. Though this feature is great, I’ve had some problems with layers shifting in the imported file. Hoping they nail this one.
Menu Search
It can be difficult to get accustomed to a new program. So I find it super handy that Figma includes a quick way to search for features and tools. Using the keyboard shortcut CMD + / drops a search bar down from the menu. It’s the little things, right?
Anchors
Anchors allows you to assign rules to elements so that they flex by moving or resizing when you adjust your artboard (frame) size. This is a handy time-saver when you are adapting a design to a different screen size.
— —
I’m curious to see where the future takes Figma. Especially as Sketch evolves and new competitors like Adobe XD and Subform arise. I hope whichever application the UI Design community adopts will utilize vector networks and integrate other features that Figma has brought to the table.
