Mekardo.com - Figma is a powerful tool that brings together design and code to enhance collaboration. As a passionate UX and UI educator running the moonlearning platform, I had the incredible opportunity to present at Config 2023's "Figma like the Pros" session. In this article, I'll share some of the valuable tips and tricks I showcased during the event to help you master Figma like a pro.
1. Efficient Component Organization with Sections
Make the most of Figma's organizational capabilities by utilizing sections to store your components. To access sections, look for them in the top toolbar below frames. Alternatively, you can press SHIFT + S to draw a section directly on the canvas, similar to creating a frame.
2. Enhanced Component Identification through Sections
Sections offer a notable advantage over frames when it comes to component symbols. Components within sections remain visible, providing clear orientation for anyone accessing your files and documentation.
3. Amplify Component Information with Frames
Utilize frames within sections to provide additional information about your components. For instance, you can include an instance of a component within a frame to showcase its button behavior. This way, you enhance your design's clarity and communicate the component's functionality effectively.
Extra tip: Use the shortcut SHIFT + SPACEBAR to quickly open the new in-file presentation mode for a convenient overview.
4. Streamlined Component Organization with Section-Based Asset Folders
Placing components within sections automatically creates asset folders named after the respective section in the assets panel. This feature enables effortless organization and management of your components.
5. Clearly Indicate Development-Ready Components
By clicking on the section name, you can mark components as ready for development. A small icon will appear, visually signifying their status. This feature not only aids in the development process but also reflects in tools like VS code.
Extra tip: Share specific section links to provide targeted access to your work.
6. Sections for Dynamic Prototyping
Sections serve as excellent tools for prototyping as well. When frames are placed within sections, the design becomes stateful. Figma remembers the last visited frame in a section, allowing for seamless navigation within sign-up flows, checkouts, and more.
7. Convert Frames to Sections and Vice Versa
Don't worry if you've already set up your documentation with frames. Figma allows you to convert frames into sections and vice versa effortlessly. Simply right-click on a frame and choose the desired conversion option. Alternatively, you can use the frames preset dropdown to switch between frames, sections, and groups.
8. Boost Documentation Efficiency with the Eight Shapes Specs Plugin
Creating component documentation can be time-consuming, but fear not! The Eight Shapes Specs plugin is a real-time saver. By selecting any instance and running the plugin, you can generate beautiful specs with just one click.
9. Seamlessly Integrate Generated Specs with Your Sections
What sets the Eight Shapes Specs plugin apart is that it creates single frames for the specifications. This allows you to easily select and drag the generated specs onto your section, ensuring all relevant information is consolidated in one place.
10. Effortless Comparison with Overlay Feature
Collaborating on components and documentation often involves subtle changes that need to be communicated effectively. The overlay comparison feature in Figma proves invaluable in such situations. When a modification occurs in the main component, an update icon appears next to the instance in your design file.
Clicking on it and selecting "Review updated" presents a side-by-side comparison, which can be switched to overlay mode for easy identification and updating of padding, spacing, or position changes.
Extra tip: I have a free video tutorial on working with and updating Figma team libraries, which you might find helpful.
11. Overlay Feature in Dev Mode
Previously available only in design mode, the overlay feature now extends to dev mode as well. This enhancement ensures consistent collaboration and communication across different stages of the design process.
12. Handy Shortcuts for Seamless Navigation
Navigating through various panels in Figma can be swift and efficient with the following keyboard shortcuts: press Alt + 1 for layers, Alt + 2 for assets, Alt + 8 for design, and Alt + 9 for prototyping. These shortcuts are conveniently positioned to mirror the layout of your Figma canvas, making it easier to remember and utilize them effectively.
By implementing these tips and tricks, you'll be able to optimize your workflow, enhance collaboration, and create exceptional designs using Figma. Stay tuned for more insightful content and continue mastering Figma like a pro.