More and more, I find myself using tools outside of Adobe’s ecosystem. When designing for the web and applications, I like a tool that is inherently collaborative, that has an easy learning curve but can offer powerful features for design solutions. This is where Figma comes in.
I first learned about Figma from Designer News. I tend to be that type of person who jumps early into a product to try it out and see how it can help me in my process. If you have read any of my posts on Macaw or Bootstrap Studio, you’ll know that to be true. I watched the marketing video on it and honestly wasn’t all that impressed. The tone of the video didn’t really convey to me that I could or should be using it in a professional setting, but I signed up for it and waited until I received the email for early release and feedback. I got that email at the beginning of the week.
Now, Figma is touting that it’s a collaborative design tool mainly for web applications and user interfaces. By nature, it’s team based. So you can invite team members to work on projects at the same time. With built-in version control, Figma projects can be rolled back to various save points from different people who have worked on the project. It has a powerful vector drawing mode that allows you to create icons and the like while exporting out as .jpg, .png and .svg. The software is cloud-based, so you can work on designs from anywhere you have an Internet connection.
Once I received my early access email, I went in and setup a profile. During which I was given a guided tour of the UI and then deposited on the project screen. Four default items where there waiting for me.
1) Create a new project (either from scratch or drop elements from other sources like .jpg, .png, .sketch and other Figma projects saved out as the .fig file format).
2) A Chrome window for use in designing some web UI.
3) A Figma Keyboard Shortcut for OSX.
4) A Material Design UI Example. This is a well thought out and beautifully executed example of how powerful Figma is in creating UI.
Underneath each project is a gear icon with several options, from renaming a project, editing a project, deleting a project, reveal in a folder and most interesting a copy link function that will let you share your design with others in comment mode (similar to InVision App).
I started a new project to see what that process looks like. At first glance, I thought the minimal UI was going to be a problem. I’m used to Illustrator, Inkscape and Affinity Designer. The difference between those tools and Figma is that Figma is designed for dedicated UI work, it’s not meant to be an illustration program like other vector drawing software. The team at Figma did a very good job at mapping out the same key commands that I know and use in Illustrator though, and the cheat sheet was equally helpful.
Launching a project, I was greeted with a simple interface. Initially, I was in Feedback mode which doesn’t give you any tools save for the commenting pencil tool, which you double click on an area to create a note, very much like InVision or Marvel. Comments are saved in the right-hand panel for review. When I click on Edit in the top left, the UI shifts into edit mode.
Here’s where there are some interesting differences between other vector drawing programs. Tools are on the top left horizontal bar (similar to Adobe Edge Animate) but Element options are on the far right panel while layers are on the far left. You can rename your layers, play with layer order and group selected layers. This is something anyone familiar with vector drawing programs will come to expect. In the certain navigation area you have options like Edit Object, Use as Mask, Union Selection and Edit Image Crop. Above the elements option panel you have your standard zoom functions and you have a new option called Pixel Preview which will show you how your project should look saved out as a .jpg versus a .png. Lastly, you have an option to toggle and hide all of the panels and work solely on a clean screen.
The Element options panel comes up on the right side of the screen and gives you an array of settings to all you to edit any particular element. Standard options are strokes, fills, alignments, positioning, layer styles, preview, and export (which will let you export just the selected element instead of the whole composition). Figma will prompt you to download a font sync installer that you can you use your fonts in your projects. As far as text options are concerned, there isn’t much in the way of options for handling typography; no kerning, leading, line height, text-wraps, etc. Again, thinking about its purpose, it makes sense as to why there wouldn’t expansive options for handling type. Each type element is its own element and lives independent of each other.
The hamburger menu at the top left has your basic file setting features like file, edit, preferences, etc. Because this isn’t a bloated tool, I found each feature and its sub-features very easy to understand and use. The search function was very handy.
I started to create a project with Figma and found it be very intuitive. I started to use the frame tool to draw out several different artboards and began to draw elements on the screen and come up different UI elements. Using the layers panel, I could rearrange the order of elements, group them and duplicate those groups with ease. Layer styles (called Effects) are limited to four options (drop shadow, inner shadow, foreground and background blur) but applying multiple effects to an element is fairly straightforward.
I found the Pen tool and it options a little difficult at first, mostly due to my experience with other pen tools that offer a wide array of options. You can easily add points and create a polygon then add points to that polygon to create a 3D effect. Automatically, those points are joined together. The paintbrush tool allows you to add fills to inner areas of these stroke vector lines. Creating highly intricate icons with knocking out areas and turning strokes into fills are much easier than the Pathfinder tool in Illustrator.
When in Figma, I can select elements and hold down the option key to get measurements of elements and distances between them.
Exporting my work as several options. I can either export the whole project, a selection of the project or even one element in a project but it doesn’t stop there. I can then choose to export them as a .jpg, .png, or .svg either separately or export them all out. So my one group selection can be exported simultaneously as a .svg and .png at different sizes. This gives me a zip folder of my assets. Furthermore, I can name layers to export and give folder structure to my .zip file. The exporting features are very handy.
Figma is a pretty powerful UI tool that you can access from anywhere you can connect online. It’s dedicated to web and application work and cuts out the bloat of other vector drawing programs. It can help speed up your workflow when working with an integrated team of copywriters, designers, project managers, and developers.
What I like about Figma is that I can easily see myself using this for wireframes, mockups, and designing high fidelity comps that can be taken into production by developers. It’s a simple enough tool that developers can go in and be part of the design process either through collaborating on designs or commenting on layouts to help guide designers what can be possible in development.
For project managers, this is a pretty handy tool because they can jump in and see progress on design, commenting and feedback and asset generation so they can keep up on where a project is going.
For UI Designers, it’s very useful tool. I can already see the value in this tool in creating UI visuals for applications. This can be a tool that will definitely speed up my design process and let me focus on important decisions like interactions.
With that said, what I would like to see is the ability to preview my work natively on a device and be able to add interactions and animations through the use of code snippets or prebuilt animations. I think that running this software in the browser is a very strong point for collaboration, but maybe in the future, the versioning control system will improve and allow members on a team to create branches and even work offline, push your latest versions up to your branch and then pull them back into the main branch. I might be getting ahead of myself, but it’s a natural reaction to being excited by a useful tool.
All in all, Figma is a wonderful new addition to the toolset. As it develops and more people start using it and providing feedback, it’s going to improve. The number one thing I would have to say the folks at Figma to ensure success is to listen to your customers and follow through on the quality of your product in every detail. I already have a client project where this tool will be coming in very handy.