Figma has changed the way design and development teams work. If your team works in the tool and you’re looking for Figma tips and best practices to improve your collaborative design experience, you’re in good company.
We’ve discovered a few Figma best practices that enhance our work and make it even easier to use this tool. If you’re wondering how to design using Figma or how to make that experience even better, we’ve put together ten of our favorite Figma tips and tricks for product design and development.
Utilize auto layout
Unlike similar tools in Sketch or Xd, Figma makes it easy to manage layer order and maintain alignment as your content grows and you add or remove elements. If you have to do responsive designs or content changes throughout the process, this functionality can be very valuable.
Mass update text
Instead of changing each text layer one at a time, you can add Text Properties to any main component, allowing you to select multiple instances and update them all at once. You can even have one Text Property control multiple text boxes in a component.
Swap out component instances
If you work with components, instances can help you quickly swap variations in and out. You can set up your project so that each component is related to the design element, and can be easily altered. Select multiple objects, use Cmd+/ to bring up the quick actions menu, and use the ‘Create Multiple Components’ and ‘Create Component Set’ commands.
Move wireframes directly from FigJam to Figma
FigJam, Figma’s whiteboard collaboration tool, is so well integrated with Figma that you can copy a wireframe mockup in FigJam and move it directly to Figma. It’s an almost completely seamless transition. If you make any adjustments in Figma and want to move the file back to FigJam for further brainstorming, you can reverse the same action.
Use Keyboard shortcuts
Option command O for library searcher
Option command B detaches component from the “parent” so you can fiddle with it as necessary
Command+track pad to zoom in/out
Enter to select children of current frame Shift+Enter to select parent
Cmd+C then Cmd+Shift+R (or Cmd+Shift+Opt+V) to paste and replace selected object(s)
This can be done across multiple frames to quickly update an object
Cmd+Opt+C to copy properties (fills, round corner, stroke, text style, etc.) and Cmd+Opt+V to paste those properties to another object.
You can also see other shortcuts by selecting “Help” in the menu bar and choosing “Keyboard shortcuts.”
Figma has changed the way design and development teams work. If your team works in the tool and you’re looking for Figma tips and best practices to improve your collaborative design experience, you’re in good company.
We’ve discovered a few Figma best practices that enhance our work and make it even easier to use this tool. If you’re wondering how to design using Figma or how to make that experience even better, we’ve put together ten of our favorite Figma tips and tricks for product design and development.
Utilize auto layout
Unlike similar tools in Sketch or Xd, Figma makes it easy to manage layer order and maintain alignment as your content grows and you add or remove elements. If you have to do responsive designs or content changes throughout the process, this functionality can be very valuable.
Mass update text
Instead of changing each text layer one at a time, you can add Text Properties to any main component, allowing you to select multiple instances and update them all at once. You can even have one Text Property control multiple text boxes in a component.
Swap out component instances
If you work with components, instances can help you quickly swap variations in and out. You can set up your project so that each component is related to the design element, and can be easily altered. Select multiple objects, use Cmd+/ to bring up the quick actions menu, and use the ‘Create Multiple Components’ and ‘Create Component Set’ commands.
Move wireframes directly from FigJam to Figma
FigJam, Figma’s whiteboard collaboration tool, is so well integrated with Figma that you can copy a wireframe mockup in FigJam and move it directly to Figma. It’s an almost completely seamless transition. If you make any adjustments in Figma and want to move the file back to FigJam for further brainstorming, you can reverse the same action.
Use Keyboard shortcuts
Shift+Enter to select parent
Recent Posts
Recent Comments
Popular Categories
Popular Tags
Archives