Figma Tips to Design Faster
October 4, 2022 - Reading time: 14 minutes
Intro
Learning Figma can be challenging but rewarding, especially if you are a professional freelancer or working in a team. Mastering your tool's best practices could save time and help you achieve results much faster!
To help you with that, we've collected our top-tier best practices for designing faster in Figma. This is an evergrowing list so consider bookmarking and revisiting this page occasionally for new hacks and updated tips.
Use the quick actions command
Access your recent actions, plugins, and all available commands in Figma. All from one place.
- Use the shortcut: Mac: ⌘ CMD + / or ⌘ CMD + P. Windows: Control + / or Control + P;
- Navigate the results with ↑ or ↓ on your keyboard;
- Press Enter to execute the desired action;
- Enjoy saving 0.00000000001 of your lifetime.
Use shortcuts to navigate components
When trying to dig into a component, the designer must spend time hunting pixels and clicking the correct layer. Instead, it's faster to use the following shortcuts to navigate the component's layers with a mouse-free approach.
- Use Enter to drill down through the Layers panel elements quickly;
- Use the Tab key to jump-navigate the list of layers from up to down;
- Use ⇧ Shift + Tab to return to a previous layer;
- Use ⇧ Shift + Enter to return to an upper level.
Tag styles to find them faster
When designing an app or website, you'll eventually have a certain number of styles used more frequently. To speed up finding and utilizing those styles in Figma, you could add a special symbol or a [tag] to the style name to filter and find the needed colors, texts, or effects styles much faster.
For example, the Frames X design system uses '$' (a string) as a prefix to all prior elements, marking them and making it easy to find the baseline styles.
Apply auto layout for flexible containers
Use Auto layout when needed to remove additional hassles caused when changing the spacings and paddings for your design elements. Adding auto layout to a group or a frame will override its default spacing values and make elements follow a specific direction and adjustable distribution order.
In general, assembling components with AL will provide a solid building block experience and eliminate unnecessary mistakes.
To add the auto layout, select a group or frame, and use the keyboard shortcut ⇧ Shift + A to apply it. Or click ➕ next to the auto layout label in the right panel.
Use variants to have fewer components
Variants in Figma is a feature to outline your component structures to a single "slash" /category (Slash naming method) instead of having a separate component for each subcategory or instance state.
For example, you could create different components for various states and sizes. Or you can use variants to organize all sibling components under a single state or size category. Applying variants is recommended when a component switches between different states or has multiple variations. Elements like buttons, inputs, and toggles are all perfectly fit for variants.
Variants simplify the design system structure, allowing you to find and use needed components in the assets menu faster. And variants reduce the number of components you need to maintain in the long run.
Note: not every component set should have variants. It's up to you to decide whether variants should be involved or not, based on how somebody will operate the component you made. Here is a nicely written article on that particular topic.
Streamline changes with base components
A base component is a structural element that can help streamline changes to other components. A base component always syncs with its children's instances and saves your day from spending lots of time iterating, testing, and tweaking your designs.
To start using the base, you need to:
- Create a component (A) and nest it into another component (B);
- Duplicate component (B) to create alternative variants or different types/states (C, D, E, etc.);
- Manipulate component (A) to propagate changes to all included variants.
Use component properties
Component properties are unique values assigned to individual component layers.
Properties remove the need to select and override layers manually within the layers menu, saving the time to customize your designs. You can spend time engineering several properties together and have fewer variants and a more versatile component set to fit any design iteration.
There are several types of properties. To learn more about each type and how you can use them, please visit the official blog.
Use nested instances
You can expose nested components' properties within another component to access them faster.
For example, if you have a menu component where each menu item is an instance and has its properties. You can make them visible from the main level of a component. Nested instances will let you control nested components without drilling into the layer panel.
To add/expose nested instances, select a variant group, press ➕ next to Properties, and select "Nested instances."
Use the quick insert menu
Insert components with your keyboard. Use the quick insert menu to find and drop available components to your canvas.
Use a shortcut ⇧ Shift + I to open the quick insert menu.
Grab your teammates' attention
You can send a message right from your cursor in Figma to quickly grab people's attention when pitching your design ideas.
To enter the cursor chat mode: Deselect everything on the canvas and press / on the keyboard. Press Enter/Return to clear the chat and type a new message.
Copy/paste with shortcuts
Use Option ⌥ + ⇧ Shift + C to copy the layer style properties and Option ⌥ + ⇧ Shift + V to paste them into another object.
Combine elements into frames
Instead of grouping the elements, you can frame them to have more control over the resizing constraints.
To put elements within a frame, use the following shortcut:
- On Mac: CMD ⌘ + Option ⌥ + G;
- On Windows: CTRL + Alt + G.
Adjust the nudge amount to your tasks
Set a custom amount for your small or big nudges. It's popular to recommend aligning the nudge with the grid. But I think it's much better to adapt it to your current routine.
You can change the default nudge by using the Quick actions (CMD ⌘ + /) menu and typing "nudge." Or from the main Figma menu: Preferences - Nudge amount.
Quickly find and replace text in Figma files
Use the shortcut: Mac: CMD ⌘ + F or Windows: CTRL+ F to trigger the search box UI and search your file for text, layers, objects, and more. Use shortcuts: CMD ⌘ + ⇧ Shift + D to see the previous result, and CMD ⌘ + ⇧ Shift + F to see the following result in the list.
You can replace the located text layer or object name using the Replace commands. You can also use the Find command to find any object in Figma based on its type. This is useful when you've forgotten where a specific object is located and want to spot it faster.
Use a ready-made UI kit to speed up your workflow
Another great way to speed up your design process is to use a pre-designed library, UI kit, or design system. A good UI kit will help you find a solution to your design problems much faster and make your team's life much easier. Sounds good, right?
You can build your UI kit. Or use a premium UI kit with all elements and patterns already included. But, a good UI kit is hard to find, with many solutions built solely for decorative or inspirational purposes.
That's why we build Frames X, a universal UI kit and an evergrowing handbook to help you streamline your process with tons of pre-designed content, practical tips, and building blocks to create your project faster. If you are curious to learn more about it, be welcome to visit the official page.
.jpg)
Figma Plugins for Design Systems
May 30, 2022 - Reading time: 21 minutes
Intro
Designing systems in Figma can be a stressful and uncertain process. But gladly, Figma has a healthy plugin community to save us from numerous struggles.
Plugins are great tools to integrate into your design process; they can solve the project's particular pain points or automate things so you can spend less time on monotonous mouse clicking and dragging rectangles around.
Yet not all plugins are equally good. Some could be outdated or not fit for scaling projects, but some could elevate and change the way you design. So here are my collection of the best plugins to help you design, manage and operate systems in Figma.
Figma Tokens
The Figma tokens plugin lets you create design tokens based on your project's color, typography, and global values, such as border-radius, spacing, etc. Tokens grant many levers of control over your design system. This includes the ability to theme your UI, update particular stylistic details, or modify the whole system with a few commands.
To get started, you can launch the plugin and generate tokens from your file or upload your JSON to bring existing tokens to a new project.
Figma doesn't have a way to export/import styles when you need to use existing styles in another project, and Figma Tokens has an undercover feature to solve this. You could export styles from one file and then import them as JSON into a different one.
Figma tokens is a free plugin with a pro plan alongside advanced features.
Batch Styler
The Batch Styler plugin fills another missing Figma functionality and lets you modify multiple text and color styles at once. With this plugin's UI, you could easily batch update color and typography, plus delete or rename your file styles.
Similayer
Similayer is a crazy powerful extension for selecting objects in Figma.
This plugin comes in handy when changing specific component details or variants. To use it: select a layer, and run the plugin to find and select all other layers based on needed properties.
Instance Finder
A true savior when you need to find out where a specific instance of a component is located. Use Instance Finder whenever you need to find an old dusty component linking to an outdated or someone else file.
Master
Master is a helpful plugin for moving a design system to a different file/project or migrating your design files from another tool, like Sketch or Adobe XD.
Master can create, clone, and move components between files. Besides that, Master can create a new component from any object on your canvas. This especially comes in handy when you decide to systematize your draft designs into a structured file.
Master is a paid plugin but has a helpful free guide to help you get on board and decide if you need it or not.
Style Organizer
A plugin to audit your design system. This helpful tool lets you merge similar styles, solve inconsistencies and polish your design styles to perfection.
Design System Organizer
Design System Organizer helps to manage your components and styles. With its help, you can easily arrange files, copy styles between files, and bulk update component instances.
The plugin supports working with local and external libraries and has a helpful context menu to help you organize, delete, and group components and styles. DSO is a paid plugin with a 15-day free trial for each new file.
Appearance
The Appearance plugin helps generate a dark/light theme from your UI kit styles. The plugin can apply color themes to your selection and switch styles from one theme to another in real time. The plugin supports external libraries, which makes it extremely helpful when you create multi-themed designs in Figma.
Contrast
The Contrast plugin is a tool to ensure your designs are passing the Web Content Accessibility Guidelines (WCAG).
To use it: select a layer and run the plugin. The plugin will instantly analyze the background behind your selection and display the contrast ratio between foreground and background.
As a bonus, you could use the Contrast plugin to generate a report of all contrast issues in your file, with an option to fix them.
Clean Document
A plugin with a toolset to organize and clean up your files before handing your design system for a review or handoff.
The plugin includes the following features: delete hidden layers, ungroup single-layer groups, make pixel-perfect designs, smart rename, sort layers, and more to help polish your Figma document.
Change Text
Change Text plugin can bulk edit text contents. Select multiple text layers and run the plugin to change their contents. The plugin has a nice results preview to help you avoid typos.
Supa Palette
Supa Palette is a powerful color editor and generator. Use it to create beautiful and accessible-first palettes in no time effortlessly. The plugin has a very friendly UI and a premium plan with more features to control your design system color styles.
Automator
Automator is the most powerful plugin on the list. Its capabilities are much beyond possible description; it allows you to build plugins right inside Figma. You could choose from over 100 actions (commands) to mix and match them, create automations, and experiment with the Figma Plugin API.
To first test using the plugin, you could explore its growing community and use one of the templates to understand its logic and functionality on a specific task.
Data Lab
A plugin to help generate random or actual data into your designs. This includes user names, dates, addresses, cities, emails, etc. This plugin works with text layers and components, making it helpful for populating your design system with real data examples.
Stark
Stark plugin can check your designs on accessibility standards, including vision impairment and contrast disabilities simulations. If you are designing a product and want to make it accessible for everyone, you could use this plugin to analyze and enhance your designs.
Design Lint
Design lint is an open-source plugin that finds missing or inconsistent use of styles in your design files. The plugin highlights the most common errors before handing your files into development.
You could use it to navigate your work and revise errors by various categories, such as missing fills or text styles, inconsistent shadows or border-radius usage, etc.
Measure
A plugin to quickly generate redlines and add size measurements to your designs. A lovely plugin to help you better communicate with developers.
Themer
Themer is another excellent plugin that enables you to make and swap themes from a published team library. You could use it to apply colors, text, and effect styles to the whole page or your selection.
Minimap
Minimap is a beautiful plugin that generates a map from your designs. It creates a preview of the file that you can use to see the whole picture and navigate any distant part of your designs with a click.
Selection Variants
Selection Variants let you see and control all nested variants instances within your selection. Use it to switch between variants without clicking through components to find all the nested instances.
Use this plugin to help others discover how your components work and remove unnecessary complexity from your design system.
Super Tidy
Super tidy helps to keep your designs neat by efficiently aligning, renaming, and reordering objects based on their canvas position. This plugin is excellent when arranging numerous variants and component examples on the canvas.
Conclusion
These are just a few plugins we think are worthy of your attention. With so many great plugins appearing, we can honestly say as designers, our life is getting easier each day. Save this list to your favorites and share it with others to help them on their Figma journey.
If you have a plugin and want to add it to this list, you can DM me on Twitter. Cheers!
.jpg)
UI Colors Tips for Figma
May 17, 2022 - Reading time: 35 minutes
Intro
When designing systems in Figma, reshaping and recycling your previous ideas is always a necessary and ongoing process. So various scenarios are encountered around working with project colors. These include: updating your colors globally, sorting, naming your brand assets, using styles in multiple files, and sharing design props with your team.
How you communicate your color decisions and translate them into development will affect your projects. Beneficial or sometimes maybe not. So being flexible and continually attempting to uncover a "better" approach is rewarding. And I appreciate that a design tool like Figma allows us to do it.
Figma has a few approaches that are beneficial to these scenarios. Let's look at them and methods to better operate your project colors with the help of the Frames X — A headless design system for Figma.
Use colors from a library
When starting a new project, you could add Frames X or any other UI kit as your Team library and save yourself colossal time manually adding colors or using any third-party tools to generate them. Using an extant color palette will allow you to quickly populate your new project with a broad and thoughtful range of colors.
Note that the team library feature will require you to have a proffesional Figma plan.
Is it worth it? Absolutely. A color library will help you communicate your stylistic decisions while staying consistent across more significant projects and teams. Colors and typography could be partitioned into separate libraries your team access without cracking your ongoing work, letting everyone be on the same page regarding the project/file they are currently working on.
Tag styles to find them faster
Tagging styles is a great practice to speed up your overall workflow in Figma. Not only when working with styles, but this also applies to components. Tagging your styles will allow you to quickly find the needed text, color, or component through Figma menus by typing a name containing a symbol or an included "tag" name.
Frames X, by default, uses the following tags:
$ — Is used throughout the system to prioritize some styles with a primary, secondary, or tertiary role. $ helps to prioritize some style groups, such as the "$Base" palette, marked because it is a system's primary palette.
[light], [dark] — Used throughout the system to describe if a color has an alternative color convertible from light to dark mode. Also, enclosing brackets tags ensure styles name identification in plugins, such as the Appearance plugin, which helps to generate a light/dark theme from your selection.
Update colors globally (Batch replace colors)
Global color replacement could help you achieve the needed contrast and unique visual style. You could create an entirely new UI color theme by tweaking global primary, secondary, and tertiary color values. Figma allows you to edit styles and propagate multiple color changes throughout your file. Global color replacement could also help you achieve the proper contrast ratio when working in a more detailed-component level (aka zoom 200%).
You could use Batch Styler Plugin or Figma Tokens plugin to speed up the global color replacement process. You could start tweaking your design system files by selecting multiple color or text values and then batch replace them with new ones without breaking any connections between styles.
Use a proper naming convention
Frames X uses literal or definitive color naming (like red, blue, etc.) and a numeric scale (where 50 is light and 900 is dark) by default. While this is reasonably functional for most tasks, there are good reasons to use other naming conventions to better communicate on different projects and teams. You could also use semantic or contextual naming conventions instead.
A semantic naming convention uses names that describe the intent of the color ("Primary," "Secondary, "Danger," "Background," etc.). Semantic naming allows underlining the value of the color rather than using a combination of name and numeric scale, making it easy to modify the whole theme to any combination of colors we need. Other examples of Semantic names are Brand, Accent, Warning, Alert, and Success, to name a few more.
A contextual naming instead uses names that define a color for an exact type or category of component ("color-primary-button," "color-default-icon-small," "color-error-modal," etc.)
Contextual naming is good when you have your design system in a final state, at that point where you don't add new things or components to the system. With contextual naming, you'll have your project at your fingertips, with every string responding to a particularly assigned color or group of colors.
But using contextual naming from the start could quickly overwhelm and mess up your design process with hundreds of definitions to keep in mind, making it challenging to find and use colors appropriately. And, because it is challenging to resist the urge to define every color, naming things from a contextual perspective will always grow exponentially. So apply it only if needed (usually for more minor projects from personal experience).
Understanding color models
We tend to feel comfortable with the HEX color model as designers. But HEX values are tough to read. It's unlikely you would be able to imagine the color of an element by reading the hex value, except if you are an expert designer.
RGB (red, green, blue) notation is a better alternative to writing and sharing colors, giving us access to the exact scope of colors as hex values in a much more readable format. Colors on the web are made of three values, meaning the higher the proportion of red, green, and blue, the more saturated the resulting color will be.
RGB is well known and tends to have a better reputation among developers than HEX. So it may be a good idea to explain how to copy a CSS-friendly color code to your fellow developer friend.
In Figma, you can access the color code on the inspect tab. You could select the RGB color model from the Colors section dropdown. This will let you copy/paste this directly into a stylesheet or code editor without additional formatting hassle.
HSL is another helpful and less known color model (hue, saturation, lightness). This model seems to be the far more intuitive way to adjust color values and is easier to understand, even from a non-tech perspective. HSL can be easily explained thoroughly. For example, we can get darker and lighter variants of the same color by adjusting the lightness parameter or a saturated color with saturation value, etc., which is a convenient way to interpret how our eyes perceive colors.
The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want and then tweak them. It is also easier to create pallets of matching colors by keeping their hue values the same and varying the lightness/darkness and saturation.
Adjust nested or mixed colors
Figma has a helpful tool you could spot on the right pane under the Selection colors name. Selection Colors allow you to change the appearance of your design without selecting each layer individually and then applying colors to the selected layer. This comes in handy when creating many color variations for your UI. It'st'svealed when you have more than one style in your selection.
You could view, select and alter the Fill/Stroke color if all layers have the same fill or stroke. And you may inspect and alter colors in the Selection colors section if the layers in your selection have different colors applied.
Use the selection colors feature to tidy up styles within a frame or components. Merge duplicated Fill or Stroke and improve the overall consistency of your designs before making the presentation.
Utilize color tokens
Color tokens are a core element of Figma Tokens plugins. A community plugin by @jansix. Color tokens are atoms discreetly connected with styles while also providing choices that Styles don't provide in Figma.
Utilizing Color Tokens will let you access various workflows for updating, creating, and changing Fill/Stroke color globally. You could get more information on using Color Tokens on the official plugin website.
Bonus Tip: Change colors in Figma with keys
You could change the Fill/Stroke colors with the Up/Down on your keyboard and the Shift key for bigger steps between colors. Quite handy when you're looking king for that one color or a particular match for the existing palette.
---
Thank you for scrolling until the end! Senior designers know that it's never too late to learn something new. If you're' wondering where to start or what else to learn, check out our 2022 Handbook and UI kit for Figma — Frames X. With over 4K UI elements and components to learn from.
Updates
FAQ