Baseline #2 – Groups vs. Frames

...and a few things I do each January, too.

Jan 11, 2022

Things I do each January

Hello again! 👋 Thanks so much for being here. January is one of my favorite months of the year because even though it’s just another month, it does feel like a bit of a fresh start and a way to prepare for the following eleven that follow. There are a few things that I always do near the beginning of each year that I wanted to share with you as I now begin to think about them.

One activity that's become essential for me each January is to take the time to write about the relationships, experiences, and learnings from the previous year. Sitting down to reflect on the past twelve months gives me that needed time and the chance to think ahead for what I'd like to focus on in the coming year. If you'd like to try this exercise, I've created a template in Notion to duplicate, adjust, and make yours. Although it was a little scary at first, this will be my third year completing this reflection, and it's now something that I really look forward to doing.
I admit that this next one may seem a little boring, but it's also important! Hopefully, you're using a secure password manager, like 1Password, but if not, January is the perfect time to switch over. Not only do random unique and long passwords up your level of security, but many password managers will also let you know if the login supports two-factor authentication. Nowadays, more and more sites and services tend to support apps like Google Authenticator, Authy, or even hardware authentication devices like YubiKey. For more on this, here's an excellent read by Paul Stamatiou on Getting Started with YubiKeys.
At the end of the year, I seem to always end up with dozens, if not hundreds, of unused and unorganized files within my personal Figma space. It doesn't seem to take long for the projects and files to add up, making the file browser feel overwhelming. Taking time to clear away all of my unused drafts and deleting duplicated files alone can sometimes make all the difference. ✨

Figma Focus: Frames vs. Groups

For the Figma portion of this newsletter edition, I wanted to share my own answer to one of the most frequent questions I’m asked when it comes to working in the design tool: what’s the difference between groups and frames in Figma, and when should you use one over the other? It’s a great question, too! When it comes to switching to Figma, understanding how frames work is one of the first and most helpful things to learn.

Frames

Unlike artboards within other design tools, the main difference with frames is that they can be nested within one another. This might not seem powerful at first, but realizing that frames allow for constraints to be added and that there can be an endless number of frames within a single screen made this click for me. Constraints are a tool within Figma that create the ability to specify the positioning for all nested items regarding how they grow or shrink when the parent frame is adjusted. For example, if you have a floating action button that should stay pinned to the bottom right, regardless of the device’s width, that button can be placed within a frame, and its constraints can then be set to bottom and right. Now, if the width of the device changes, that floating action button should always stay anchored to that same position, making designing for multiple screen sizes much easier!

Another superpower that frames in Figma have is how they allow for all of the same styling properties that objects and shapes can have. Here’s a quick example: let’s imagine you’d like to create a button. The first thing you might do is draw a rectangle, add text, center align everything, and then group the two together so all layers can remain connected. This method isn’t necessarily wrong, but it does mean taking the extra step of creating the group each time. Additionally, to change any of the button’s stylistic properties, this method requires double-clicking into the group, selecting the rectangle, and making the necessary adjustments. And because a frame isn’t used here, it’s not possible to set constraints on the text within the button, making it more challenging when adjusting the text or its size, if not using Auto Layout.

If we approached creating our button through frames, we’d only need to make the frame, add the proper styling to that frame, and then place our text layer within that frame. Constraints (or Auto Layout) could then quickly be added, and we’d end up with a much simpler layer structure, too.

A fun tip: Did you know that all components in Figma are actually just repeatable frames? This can be seen by selecting an instance and detaching it, which then reveals, of course, a frame!

Groups

Groups in Figma allow multiple elements within the canvas to be combined together into, well, a group. Unlike frames, groups don’t use relative positioning for nested objects, so constraints can’t be used. Groups also are unable to take on any stylistic properties. In short, they exist to keep things tidy.

If you’re creating components, groups can help create clusters of layers that can more easily be toggled as visible or hidden for anyone working with the instance in a design of their own. When I’m working on a design, I tend to use groups whenever I need to move, align, or hide several elements at once, and as I go, I’ll also rename the group to help with layer organization. Finally, groups can be controlled via constraints if the group is placed within a parent frame, and its size will automatically grow or shrink depending on the size and amount of content within the group.

Recent bookmarks

A collection of bits from the internet that I think are interesting and worth sharing!

Designer, Michael Feeney, released a really great macOS 9 UI kit on the Figma Community for anyone to grab. The nostalgia is so real.
I recently picked up Fresco, a new and beautiful wallpaper pack designed by Canoopsy. I always love how a different wallpaper can make a device feel brand new.
A collection of 52 1” buttons by Curtis Dickie.
UI Prep by Molly Hellmuth was recently launched, and it seems like a fantastic resource for anyone who needs an extensive library of scalable and well-designed components.
I shared a list of several of the tools that I’m excited to use in 2022 to get work done.