As you all loved Advanced Figma Tips & Tricks and Prototyping Tips & Tricks, here is the third part: In this article, I’ll share some of my favourite tips and tricks when it comes to Figma components, from simple shortcuts to powerful plugins when it comes to working with Figma components. These simple yet powerful techniques can help you streamline your workflow and save you time and effort in the long run. Whether you’re a beginner or an experienced designer, I’m confident you’ll find something helpful in this guide. So, let’s dive in and explore some of the hidden treasures of Figma components!
Don’t overlook this small yet handy feature in Figma. When you select elements within a variant, a target symbol appears. Click on it to select all matching layers across the entire component set. This way, you can make the same changes to all variants in one go.
This(along with props slimming down our component sets), is one of the main reasons why I said goodbye to _base components.
As of March 23rd, the latest update now shows a small update icon next to instances whenever a main component of a shared team library is modified. This allows you to review updates and see a side-by-side comparison as well as an overlay option (which I love!) that can help you identify small changes like padding and margins.
Hold down the Shift key and use the up and down arrow keys to nudge elements in Figma. By default, the nudge distance is set to 10 resolution-independent points, but you can customize this amount to better suit your needs (hit cmd/ctrl and / or on foreign keyboards cmd/ctrl and P to open quick search and look for “nudge”). For example, I prefer to set mine to 8 points to align with my 8-point spacing conventions.
Nudge auto layout spacing and padding.
Besides nudging elements, you can also use nudge within auto layout components and nudge the spacing and padding following your set spacing conventions. Select the text field, keep shift pressed and move up and down with the arrow keys.
💥Tip: As an additional tip, consider using the nudge feature for typography while still deciding on styles. By nudging your text in increments of 8 points, you can maintain a multiple of 8 and ensure that your typography follows established spacing conventions. To ensure the line height stays consistent, set it to a percentage value such as 150% in Figme, translating to 1.5 in CSS.
Overall, the nudge tool is a handy feature for Figma users that can help streamline your design process and ensure consistency throughout your work.
If you’re looking for an easy way to link your Figma components to a code base without extensive documentation, you can add a link and description to the Figma component documentation (which can be a bit hidden). Adding a link will create a button in the inspect tab that directly links to the corresponding component section in, for example, Github. The Figma component search function will also pick up the description, making it particularly useful for larger systems.
the EightShapes Specs plugin by Nathan Curtis is a real gem for documenting components.
With just one instance of your component, you can run the plugin and generate complete documentation and specifications. The plugin even displays various component states and properties, making it especially useful for complex designs.
💥Tip: I like using EightShapes Specs in Figma and linking my file to Zeroheight. From there, I create a dedicated section for each component and easily pull in the specs. This allows me to have code and design documentation side-by-side while still having access to the full power and flexibility of Figma’s design features. Follow me for more about documenting with Figma and Zeroheight, it is truly a match made in heaven!
Within a single Figma file, you can quickly move components to a new page by right-clicking and selecting the desired destination. This action preserves all connections to instances.
However, the process is a bit more complex if you want to move an existing component with instances to a separate component library file. Follow these three steps:
- First, save the current file as a library (the one where the component and instances currently reside, you can later unpublish it again).
- Next, select the component you want to move and cut with cmd/ctrl+X. You need to cut, not copy, crucial!
- Finally, paste the component with cmd/ctrl+V to the new library and publish.
- Now confirm the update in instances in the previous location with your instances. Done!
You can find some free practice files about moving components on the Figma community.
Did you know that you can swap libraries in Figma? This works for styles and shared component libraries and is a great way to set up a testing environment. This is interesting for larger teams using a design system.
First, make sure that you have both libraries published. Now open your libraries and click on the arrow next to the library you are currently using. Then select the “swap library” option and select another library. It will then show a swap option for all components and styles with THE SAME NAME (!!! very important, must be named identical). Select and confirm to swap.
If you want to dive deeper, you can find free practice files about swapping libraries on the Figma community.
This may seem obvious, but it’s a common mistake I’ve noticed in many of my courses. Always apply styles and auto layout settings to the component, not as an override to the instance. The instance will automatically inherit all the settings and styles, ensuring your design system remains intact.
I only override content like images and text within my instances and properties to show, hide or swap certain elements that were designed to work that way. Think of it like this, the design is set in the component, and the only thing that changes in the instance is information coming from a database.
Now, this is one of my favourite subjects to explore lately. I firmly believe that we should design with actual data in Figma, and there are some great plugins to help us. You can watch my extensive talk about working with data in Figma, you can also find Figma practice files in the community if you want to dive in deeper. Here is the short version:
Option 1: Google Sheets plugin
You can name layers with the # convention and pull in data from a google spreadsheet. You can even use boolean values to show, hide, and swap components and variants. Just be aware that we are working with open share links here, so make sure you do not use sensitive data.
Option 2: Use the Kernel plugin
It’s a different way to connect as you set up the connection and logic within Figma. I am a big fan. If you are a larger company, you can reach out to Kernel, and they can connect your API. You can play with the existing Spotify API on their page or use a spreadsheet, JSON…pretty much anything. Nice!
As you’ve likely experienced, we can add boolean and text properties and instance swaps to our components. These features are incredibly useful, but it’s important to remember why we add them in the first place — to convey which element of the component is editable in the instance.
Let’s take a closer look at a “real” property in React, which is essentially the parameter that passes in information. So in my example, I have a component called “Welcome” with a text property called “name” that serves as a placeholder for a person’s name, which will be pulled in from a database. In this case, “hello” is fixed in the component, while “name” will be converted to “Sara”. However, this content could also change from “Sara” to “Tom” (this would be passed in from a database in code).
However, we should only add properties where we want to allow, or even demand, different content across instances. If we want to change a fixed value change across all instances, we don’t need a property. Instead, we can update the main component, resulting in the exact change across all instances. Hence be mindful of when to use properties versus when to make changes to the main component.
The Component Inspector Plugin by Jake Albaugh is an excellent starting point for designers and developers to meet and discuss aligning Figma components and properties with code before establishing design systems. It provides us with insights into where we can easily align components and their properties and where we might struggle. Moreover, it allows us to ask those essential bridging questions.
This plugin is designed to generate code that describes component properties in Figma. It does not generate style code but rather provides a view of component properties in a code-like format. Currently, it supports generating code for React function components, Angular components, Vue components (both option and composition APIs), and JSON.
Smart animated interactive components are great on their own, but when you add a touch of auto layout and adjust the height, they become incredibly dynamic. With auto layout, any extra space is automatically filled up, allowing for seamless animations that respond to changes in component size. This feature truly unleashes the full potential of smart animated components.
So-called Slot components function by holding a nested instance that acts as a placeholder, or the “slot” where different sub-elements can be slotted in through instance swapping. It’s important to note that the main component needs to be set up as an auto layout component for this to work effectively. While slot components have been widely used, we now can turn the nested instance into a component property, allowing us to choose preferred values for swapping. This way, we can highlight quickly to anyone using this component which elements are intended to be used in the slot and avoid confusion.
When working with auto layout components or an entire page set up, it’s easy to get lost. Make sure to have a systematic approach when adding auto layout. This is mine:
- Structure and nest: First, think about the generally horizontal and vertical structure of the component and nest accordingly. Start from the “inside” and work your way up.
2. Resize settings: Next, add the resizing behaviour to the component. A helpful tip is to press enter and automatically adjust all child elements.
3. Test: Finally, pull out an instance and test resizing with different amounts of content.
I love using sections! They were introduced in 2023 and might not seem all that special at first glance. Hit shift+S to draw a section on the canvas.
You might even think they’re just the same as a frame. However, sections are much simpler than frames, and that’s where their advantage lies. Before, I used frames to organize all my components, but now I use sections. Just as with frames, placing a component on a section acts like a layer of organization, allowing you to quickly find the component in the asset panel via the frame name. This also makes naming and re-organization a breeze.
So why do I prefer them to just using frames:
When you place components on a section, the purple component sign still appears, making it very clear to distinguish between components and instances. Additionally, you can place frames into sections and instances onto them, which is particularly handy for showcasing single frames in presentation mode. This is especially useful when demonstrating interactive behaviour.
You’ve set up your component, it’s responsive and looks great, but there are different screen and browser sizes to consider. While the component may work well in a specific range, it may need to be adapted in the distribution or the entire structure (think of navigation menus changing from burger to link menus) at different screen sizes.
To address this, you can set up a testing environment with breakpoints in Figma, which allows you to test your component and see at what point you need to make design adjustments. You can find a detailed article on how to set up breakpoints in Figma here.
In a perfect world, all your components between design and development are documented. However, as we know, the world is not always perfect, so sometimes you have to work backwards and create UI components from existing pages. The html.to.design plugin allows you to quickly create Figma pages from URLs.
You can then grab specific elements you’re after and turn them into components. You may need to touch them up a bit, but it works well and saves a lot of time.
If you liked this article, visit me at moonlearning.io, where I teach about UX, UI Design and Figma in video format and online workshops, or follow me on YouTube, Twitter and LinkedIn. And, of course, right here on Medium!