Awesome things in Figma
It’s been a really long time since I can remember being so excited about the state of design tools. Since Adobe’s migration to the Creative Cloud, there seemed to be a comparatively [to now] stagnant timeframe where tackling the expanding range of viewport sizes and pixel densities was becoming increasingly frustrating. Fortunately there are smaller more agile software companies that are building fantastic products that deliver completely new approaches and workflows to design tools in the UI/UX genre.
Sketch has gained a deservedly noteworthy user-base and while Adobe has attempted to respond with XD (is it too early to say I’m not impressed?), I am most excited about the potential for Figma.
If you are new to Figma, it will feel very familiar if you’ve ever used Sketch. The window configuration is nearly identical: tools at the top, layers on the left, inspector on the right and the canvas in the middle — the UI however is different: flat (in its style) and minimal compared to the OSX GUI in Sketch. Artboards are called frames, and symbols are called components in Figma. Editing components takes place inline (not on a separate page as it does in Sketch) and even fill and stroke colors and other attributes can be overridden in addition to changing text. One of Figma’s most impressive and unique features is its multiplayer mode which enables users to collaborate in real time — you get to see your collaborators cursors working on the same canvas interacting with the design. Because it is browser based (don’t let that scare you — it’s fast and responsive), anyone with a browser can use it, regardless of OS. That means no proprietary software is required resulting in an even easier hand-off to developers.
While multiplayer mode may not fit into everyones present-day workflow, I suspect that this will change. I’ve already found it really useful for working remotely with colleagues even as a virtual whiteboard to flush out rough wireframes and flows in the early phases of a project. Seeing your collaborators cursor build the design alongside your own is confidence inspiring — it eliminates the feeling of uncertainty that you often get about version control and overwriting that occurs when using some cloud applications.
Random aside: After years of using Illustrator, I totally love that I can just press ‘I’ to access the eyedropper tool!
While Figma (at this point in time) is missing some of features that Sketch has (particularly around style definitions, and an accessible API for plugin development), there are a lot of really smart features that I am excited about. Their rapid release schedule leaves me confident that many of the missing features and functions that users are suggesting aren’t too far down the road. The purpose of this post is not to go into great detail about many of Figma’s hallmark features that have been documented elsewhere (here, here, here and here); instead I wanted to highlight a few of my favorite “little big details” that I applaud the team at Figma for implementing. These details cumulatively make a huge difference.
Selecting foreground objects
When you have a variety of objects stacked on top of a background object (like a card UI, or containing background), you can easily select objects on top without having to shift + click on them individually or locking the background layer in order to make a selection marquee. This will even work to select objects within components or groups. Simply hold CMD and drag a selection marquee around the objects you want to select. Before you drag, while pressing CMD, hover your mouse over the containing object — it will highlight it with an outline — once you click and start dragging to select it will ignore that object and allow you to select objects in the foreground. Smart!
Text box sizing and alignment
Figma allows you to set both widths and heights of text boxes, and in addition to the vertical alignment of the text. This is a really basic feature, but its missing from Sketch. Take the use-case above. In Sketch I would need to either create two symbols: one for single line button labels, and one for two line configurations — or — I would need to create three symbols; two to house each text box configuration and interchange them as overrides on a third master symbol. The workaround while possible is cumbersome and results in additional symbols, and the added hassle of having to swap out overrides when I discover that a particular text string is too long. In Figma I can accomplish this with a single symbol. When the text string is too long for the one line, it wraps into two lines and stays vertically centered within the fixed height text box.
Grids
The grid (layout) settings in Sketch work…but there is something about it that never felt right to me. Grid creation in Figma feels a lot simpler and versatile. You can add as many grids to a frame as you want, and you can even add grids inside your components. You can style each grid individually for identification. For instance, you could have a 3 column grid and a 6 column grid and color them uniquely. Figma also has a setting which will stretch the grid and scale it to the dimensions of your frame. The ability to specify fixed and liquid (stretch) grids is really handy when building out a system to work across a range of viewport sizes. Adding rows to the grid works the exact same way but is controlled independently from columns as an additional grid layer. Each grid can be independently controlled and toggled from the inspector. CTRL + G will quickly toggle grids across all frames.
Align to grid
When creating components in Figma, you can snap objects within your component to your frame’s grid. The alignment is maintained as you scale your component or frame. These details have the power to make adapting your designs to different viewport sizes much easier and faster!
Clip content
Figma has a handy and ridiculously simple feature that allows you to toggle whether or not your artwork is cropped to your frame. At first I didn’t think much about this feature until I had to map out some some flows between artboards in Sketch. When you want to do something simple like draw arrows connecting buttons on one artboard to another frame, the arrows get cropped within your artboard. The possible workarounds are to keep your arrows outside the artboard or contain all of your artboards within an another artboard. In Figma you just have to uncheck the box — this is even more useful when working on screens with long scrolling content because you can preview what you might see in the viewport but easily gain access to edit the content that falls outside the frame.
Constraints
I wasn’t going to go into great detail about constraints because this is a pretty well-documented feature, but it would be hard to write about Figma without making mention for those unfamiliar with them. When compared to Sketch (which gives you 4 different constraint modes), Figma gives you 5 different modes and allows you to assign them independently as vertical or horizontal attributes. The UI to control the constraints is surprisingly simple. It can be controlled via dropdown menu selections, or by identifying the constraint locations on a small cross-hair visualization. If the diagram doesn’t make sense at first, it will once you start making selections from the dropdowns. I like that they didn’t attempt opt for confusing icons within the dropdown here, text options are much more descriptive. Figma lets you define the constraints inside your components and to your component as a whole in relation to your frame so that they respond to changes to frame size.
A few things I’d like to see in Figma
Component-to-component constraints
The ability to define constraints or relationships between two or more components. When an object or textbox gets longer, the ability for it to reposition/shift an adjacent object or even expand containing object.
Live data
Ability to insert live data or custom data sets, including images into the design (like we see with Craft from Invision).
Grid width
The ability to also define grids by their overall width and have column widths auto calculated.
Type controls
More options for controlling type such as access to OpenType features, ordered and numbered lists, hanging punctuation, access to a glyph palette, and ability to define universal type styles.
Pages
Pages are a feature I really like and have found useful in Sketch in order to separate, organize, and group screens.
Figma hasn’t yet announced their long term pricing model (it is currently free), or if there are plans for a work-offline mode, or alternative methods for handling projects too sensitive to store in the cloud — but I’m enthusiastically looking forward to see whats coming next. I should also note that while I’ve enjoyed many of these features, I also use Sketch daily and thoroughly enjoy using it as well. There is a fantastic plugin-development community with Sketch, and useful add-ons like Craft. I haven’t read anything to-date about plugin-development or an accessible API for Figma just yet, but I’ve read that the team is exploring ways for users to bring real data into the design. I love that so much of Sketch’s functionality gets generously extended by a community of plugin developers, but I wonder if this introduces challenges as new versions of Sketch are released. Does the open-source plugin you have come to rely on still function the same after each update? Does it become difficult to maintain compatibility or test for conflicts/bugs? I’m truly curious. In any case, I can’t wait to see what’s next!
Share below your favorite features/details in Figma!
