1. Rapidly Select Matching Layers Across Variants

Don't overlook this small yet essential feature in Figma. When selecting elements within a variant, a target icon appears. Click it to select all similar layers across the entire component set, enabling you to apply changes to all variants simultaneously. This feature, along with props that help streamline our component sets, is one of the main reasons I moved away from _base components.

2. Utilize Overlay Comparison in Instances for Library Updates

As of March 23rd, the recent update now displays an update icon next to instances whenever a main component from a shared team library is modified. This feature allows you to review updates, view side-by-side comparisons, and utilize an overlay option (which I particularly enjoy!) to identify subtle changes like padding and margins.

3. Use Nudge for Uniform Spacing and Padding in Components

Hold the Shift key and use the up and down arrow keys to nudge elements in Figma. The default nudge distance is set to 10 resolution-independent points, but you can adjust this to better suit your needs (press cmd/ctrl and/or on foreign keyboards cmd/ctrl and P to access quick search and look for “nudge”). Personally, I prefer to set mine to 8 points to align with my 8-point spacing guidelines.

Nudge auto layout spacing and padding. In addition to nudging elements, you can also nudge spacing and padding within auto layout components, adhering to your established spacing conventions. Select the text field, hold Shift, and move up and down with the arrow keys.

?Tip: Consider utilizing the nudge feature for typography while finalizing styles. By nudging your text in increments of 8 points, you can maintain multiples of 8, ensuring that your typography adheres to established spacing standards. To keep line height consistent, set it to a percentage value, like 150% in Figma, which translates to 1.5 in CSS.

Overall, the nudge tool is a practical feature for Figma users, assisting in streamlining your design process while ensuring consistency throughout your work.

4. Effortlessly Link Figma Components to a Code Base

For those seeking a straightforward way to connect Figma components to a code base without extensive documentation, you can add a link and description to the Figma component documentation (which may be somewhat hidden). Adding a link creates a button in the inspect tab that directly links to the corresponding section in, for instance, Github. The Figma component search function will also recognize the description, making it particularly beneficial for larger systems.

5. EightShapes Specs Plugin: Speedy Documentation for Your Designs

The EightShapes Specs plugin by Nathan Curtis is a fantastic tool for documenting components.

With just one instance of your component, you can run the plugin to generate comprehensive documentation and specifications. The plugin even showcases various component states and properties, making it particularly useful for intricate designs.

?Tip: I enjoy using EightShapes Specs in Figma and linking my file to Zeroheight. From there, I can create dedicated sections for each component and easily import the specs. This allows for side-by-side code and design documentation, while still harnessing the full power and flexibility of Figma’s design features. Follow me for more insights on documenting with Figma and Zeroheight; it truly is a match made in heaven!

6. Transfer Figma Components Between Files While Retaining Instance Connections

Within a single Figma file, you can quickly relocate components to a new page by right-clicking and selecting the desired destination. This preserves all connections to instances.

However, moving an existing component with instances to a separate component library file is a bit more complex. Follow these three steps: 1. First, save the current file as a library (the one containing the component and instances, which you can later unpublish). 2. Next, select the component you wish to move and cut it using cmd/ctrl+X. Make sure to cut, not copy, it's crucial! 3. Finally, paste the component with cmd/ctrl+V into the new library and publish. 4. Confirm the update in instances at the previous location with your instances. Done!

You can find free practice files about moving components on the Figma community.

7. Swap Figma Libraries to Establish a Testing Environment

Did you know you can swap libraries in Figma? This works for styles and shared component libraries and serves as a great method to create a testing environment. This is particularly useful for larger teams utilizing a design system.

First, ensure both libraries are published. Open your libraries and click on the arrow next to the library you are currently using. Then select the “swap library” option and choose another library. It will show a swap option for all components and styles with THE SAME NAME (!!! very important, they must be identically named). Select and confirm to swap.

If you're interested in learning more, you can find free practice files about swapping libraries on the Figma community.

8. Apply Styles and Auto Layout Settings to Your Main Component, Not Your Instance!

This may seem straightforward, but it's a common mistake I've seen 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 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 function that way. Think of it this way: the design is established in the component, and the only thing that changes in the instance is information sourced from a database.

9. Utilize Real Data in Your Figma Instances

This is one of my favorite topics to explore recently. I strongly believe in designing with real data in Figma, and there are excellent plugins available to assist us. You can view my detailed talk about working with data in Figma, and there are practice files in the community for those who want to dive deeper. Here's a brief overview:

Option 1: Google Sheets Plugin You can name layers using 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 cautious, as we are working with open share links, so avoid using sensitive data.

Option 2: Kernel Plugin This offers a different way to establish the connection and logic within Figma. I'm a big fan. For larger companies, you can reach out to Kernel, and they can link your API. You can experiment with the existing Spotify API on their page or use spreadsheets, JSON... pretty much anything.

10. Understand When to Use Properties vs. Making Changes to the Main Component

As you've likely seen, we can incorporate boolean and text properties and instance swaps into our components. These features are incredibly beneficial, but it's crucial to remember why we add them in the first place — to indicate which elements of the component are editable in the instance.

Consider a “real” property in React, which essentially serves as the parameter passing in information. In my example, I have a component called “Welcome” with a text property called “name” that acts as a placeholder for a person's name, pulled from a database. Here, “hello” is fixed in the component, while “name” will convert to “Sara”. However, this content could also shift from “Sara” to “Tom” (which would be passed in from a database in code).

However, properties should only be added where we want to allow, or even require, different content across instances. If we need to change a fixed value across all instances, we don’t need a property. Instead, we can update the main component, causing the exact change across all instances. Therefore, be mindful of when to use properties versus when to modify the main component.

11. Curious About How Your Component Properties Would Appear in Code?

The Component Inspector Plugin by Jake Albaugh is an excellent starting point for designers and developers to align Figma components and properties with code before establishing design systems. It provides insights into areas where we can seamlessly align components and their properties and where we might encounter challenges. Moreover, it helps facilitate those critical bridging discussions.

This plugin generates code that describes component properties in Figma. It does not produce style code but rather presents a view of component properties in a code-like format. Currently, it supports generating code for React function components, Angular components, Vue components (both options and composition APIs), and JSON.

12. Experiment with Interactive Component Height for Expanding Instances

Smart animated interactive components are fantastic on their own, but when you incorporate auto layout and adjust the height, they become incredibly dynamic. With auto layout, any additional space is automatically filled, allowing for seamless animations that respond to changes in component size. This feature truly unlocks the full potential of smart animated components.

13. Use Props and ‘Preferred Values’ When Creating Slot Components

Slot components function by holding a nested instance that acts as a placeholder, or the “slot” where various sub-elements can be inserted through instance swapping. It’s important to note that the main component must be established as an auto layout component for this to work effectively. While slot components have been commonly utilized, we can now convert the nested instance into a component property, allowing us to designate preferred values for swapping. This approach quickly indicates to users which elements are intended for use in the slot, minimizing confusion.

14. Develop a Systematic Approach for Applying Auto Layout to Components

When engaging with auto layout components or an entire page setup, it’s easy to feel disoriented. It's crucial to have a systematic approach when implementing auto layout. Here’s mine: 1. Structure and nest: Initially, consider the overall horizontal and vertical layout of the component and nest it accordingly. Start from the “inside” and work your way outward.

2. Resize settings: Next, apply the resizing behavior to the component. A helpful tip is to press enter to automatically adjust all child elements.

3. Test: Lastly, pull out an instance and test resizing with various amounts of content.

15. Effortless Organizing and Naming with Sections

I am a big fan of using sections! Introduced in 2023, they may not appear remarkable at first glance. Hit shift+S to create a section on the canvas.

They might seem similar to frames, but sections are much simpler, which is where their strength lies. Previously, I organized all my components using frames, but now I utilize sections. Just like with frames, placing a component on a section acts as a layer of organization, allowing you to quickly locate the component in the asset panel via the section name. This also simplifies naming and reorganization.

Why I prefer sections over frames: When components are placed on a section, the purple component icon remains visible, clearly distinguishing between components and instances. Moreover, frames can be placed within sections, along with instances, which is particularly advantageous for showcasing single frames in presentation mode. This is especially useful when demonstrating interactive behaviors.

16. Test Responsive Components with Breakpoints in Figma

After setting up your component to be responsive and visually appealing, you must consider various screen and browser sizes. While the component may function well within a specific range, adjustments might be necessary in distribution or the entire structure (consider navigation menus transitioning from burger to link menus) at different screen sizes.

To tackle this, create a testing environment with breakpoints in Figma, allowing you to examine your component and identify when design changes are needed. You can find a comprehensive article on how to set up breakpoints in Figma here.

17. Create Figma Components from Existing Pages via URLs Instantly

In an ideal world, all your components between design and development are documented. However, as we know, reality can be different, so sometimes you need to work backward and create UI components from existing pages. The html.to.design plugin enables you to swiftly create Figma pages from URLs.

You can then extract specific elements you need and transform them into components. You may need to refine them a bit, but it works efficiently and saves a significant amount of time.

? Let’s Connect! If you found this article helpful, visit me at moonlearning.io, where I provide video content and online workshops on UX, UI Design, and Figma, or follow me on YouTube, Twitter, and LinkedIn. And, of course, keep in touch right here on Medium!

Deep Dive: Figma Components

Let’s explore everything about advanced components in Figma and deeply engage with component-based UI design. We…