Figma has revolutionized the world of design collaboration and prototyping, offering a versatile and accessible platform for designers and teams. In this article, we will delve into the key features and functionalities of Figma, exploring its collaborative nature, intuitive interface, and its recently introduced Dev Mode. Whether you’re a seasoned Figma user or just getting started, this guide will provide valuable insights to enhance your design workflow.
Overview about Figma
One of the defining aspects of Figma is its collaborative capabilities. Multiple designers can seamlessly work on the same project simultaneously, making real-time edits and updates. This feature fosters effective teamwork, allowing for faster iterations and feedback integration.
Additionally, Figma serves as an all-in-one platform for design, prototyping, and creating interactive flows. From designing individual elements to constructing complex user journeys, Figma offers a versatile set of tools to bring your vision to life.
Figma’s accessibility is another standout feature, with its 100% browser-based interface compatible with Windows, Mac and Linux operating systems.
Figma Structure
Let’s explore the structure of Figma, starting from the organizational level down to individual files and libraries. Figma allows users to organize their work within teams, projects, and files or libraries. Within files, designers can utilize pages and layers to structure their designs efficiently, ensuring easy navigation and management.
- Organization
- Teams
- Project
- File or Library
- Pages: Layers
(Ref: https://www.figma.com)
Landing on files
From login: What can we find here?
Upon logging into Figma, users are greeted with a range of useful features. The search functionality enables quick access to specific files, projects, or design elements. The recent files section offers a convenient way to return to your most recent projects. Moreover, Figma allows users to add new files effortlessly, whether from scratch or using templates.
(Ref: https://www.figma.com)
From URL: Where can you land?
By utilizing URLs, designers can directly access specific projects, files, frames, or prototypes, even you can point the URL to a specific prototype flow.
(Ref: https://www.figma.com)
Figma Interface
The Figma interface offers various panels that facilitate design and collaboration. The pages panel provides an overview of the design’s structure, allowing designers to organize their work into logical sections. The layers panel displays the different elements of a design, including various icons denoting different types of elements.
Users can collapse and select layers to streamline their workflow. Figma also offers robust exporting options, enabling designers to export assets with customized sizing and formats. Bulk export functionality further enhances efficiency when dealing with multiple design elements.
(Ref: https://www.figma.com)
Pages panel
Inside a document, it is possible to generate numerous pages according to your requirements. Each page contains its canvas, allowing you to delve into and refine your designs. Additionally, you have the flexibility to create distinct prototypes on individual pages.
Layers panel
Any Frames, Groups or Objects you add to the canvas will be visible in the Layers panel. You can determine if a Layer is a Frame, Group or a specific type of Object by the icon next to it:
Exporting Assets
Figma enables you to save your designs in diverse file formats and sizes, facilitating easy sharing with others, seamless transfer of content between different tools, and the ability to create backups of your designs beyond the Figma platform.
Prototype panel
Figma’s prototype panel plays a pivotal role in demonstrating how a design could function. It allows designers to define flows and scenarios, create interactions, and incorporate animations. By showcasing the user experience in a simulated environment, designers can validate their design decisions and gather feedback effectively.
Toolbar: Available functions for viewers
The toolbar contains a variety of tools and functions. What appears in the toolbar depends on what you have selected on the canvas.
Access the toolbar at the top of your screen in Figma.
(Ref: https://www.figma.com)
Commenting
Comments elevate the level of collaboration by providing a platform to address feedback, make adjustments to designs, and enhance the iterative process directly within the original design file or prototype.
To include comments in your files or prototypes, simply access comment mode. Within this mode, you can mention your collaborators using @mentions and even add emojis to your messages to enhance communication and express emotions effectively. This feature streamlines the feedback loop and accelerates the design iteration process.
Sharing
In Figma, you have the capability to share various types of assets, including files, prototypes, projects, and teams. If you belong to an organization, you can extend invitations to other individuals to join the organization.
These sharing options represent different levels of access—with teams or organizations being the highest level, and files or prototypes being the lowest or most detailed level.
Typically, granting someone access at a particular level will automatically provide them access to the level below it. For example, if you share a team, the members will also have access to the files and prototypes within that team. This hierarchical approach ensures seamless collaboration and simplifies access management within Figma.
Share files and prototypes with others:
- Share a link: Each file and prototype has a unique URL. Copy this link and send it to collaborators.
- Send an invitation: Enter their email address to invite them to a file or prototype.
The Share settings allow you to configure who can access the file or prototype and what permissions they get on that file. To get started with sharing, open the Share modal on any Figma or FigJam file.
(Ref: https://www.figma.com)
Figma Dev Mode
A notable addition to Figma’s feature set is Dev Mode, aimed at improving collaboration between designers and developers. Dev Mode offers a new interface specifically tailored to developers’ needs, providing a streamlined experience to access relevant design information.
The toggle to Dev Mode instantly transforms Figma’s interface, allowing developers to focus on what’s ready for implementation. With enhanced features like an improved inspect panel, customizable code generation, and the ability to compare changes, Dev Mode bridges the gap between design and development.
In Dev Mode, developers gain the following advantages:
- Faster navigation through designs: Dev Mode allows developers to swiftly navigate and inspect design files, enabling them to find the necessary information quickly and efficiently. This helps them get a comprehensive understanding of the design, which is essential for starting the development process.
- Seamless integration with their toolkit: Developers can optimize their workflow by integrating Dev Mode with the tools they commonly use. This streamlines their work process and allows them to seamlessly transition between design and development tasks.
- Design change tracking and status monitoring: With Dev Mode, developers can easily track design changes made since their last review of the file. This feature helps them stay up-to-date with the latest modifications and understand what’s ready to be built. Keeping track of design changes and status ensures a smoother collaboration between designers and developers, promoting efficient development and reducing the chances of errors or miscommunication.
For designers, mastering the use of Dev Mode in Figma will offer several benefits:
- Improve the design process: Dev Mode allows designers to effortlessly add structure to the infinite canvas, making it easier to organize and present design elements. This enhanced organization streamlines the design handoff process, ensuring a smoother transition of designs to developers.
- Minimize file preparation efforts: When designers utilize Dev Mode effectively, developers can readily comprehend the designs without the need for additional redlines or annotations. This saves time and effort for both designers and developers during the collaboration phase.
- Facilitate design-code synchronization: Dev Mode enables designers to communicate with developers using the same language. By bringing the source of truth into Figma, designers and developers can work in sync, reducing misunderstandings and enhancing the overall development process.
(Ref: https://www.figma.com/whats-new/)
Navigation panel
The Dev Mode’s layers panel is designed with the specific purpose of assisting developers in easily navigating the design file, identifying the development-ready components, and streamlining their workflow for a more efficient and effective design-to-development process.
While looking at the layers panel in Dev Mode, you’ll see
- An area for sections that are marked as Ready for dev
- Thumbnails for each screen that is ready for development
- Objects on the canvas not marked as ready will appear at the bottom of the panel
Toggle
(Ref: https://www.figma.com/whats-new/)
Inspect panel
(Ref: https://www.figma.com/whats-new/)
- View which sections are ready for development: The Dev Mode icon indicates which pages contain sections marked Ready for dev. Sections marked as ready appear under Ready for development in the Dev Mode navigation panel.
- Know when a frame was last edited: You can see when a frame was last edited under the frame’s name in the navigation panel.
- Navigate frames and layers: In Design Mode, designers anyone can group related content into sections and mark sections as ready for development. Dev Mode will prioritise content in a section. Any content outside of a section is still visible in the left sidebar, but is collapsed by default.
(Ref: https://www.figma.com/whats-new/)
- Compare design changes: If changes have been made since you last viewed a file, Compare changes will appear next to the layer information in the inspect panel. Click the link to open the frame history modal where you can compare current version to previous versions of the design.
- Add external links and resources for developers: Both designers and developers can add links to external resources that may help with the implementation of a component. This can include GitHub, Jira, and Storybook links, as well as VS Code links that can be used with the Figma for VS Code extension. Dev resources added to components propagate to all the instances of that component.
- Build faster with customizable code snippets: Click any object on the canvas while in Dev Mode to populate the Code section in the inspect panel. Depending on what’s selected, a typographic preview or box model is displayed, followed by autogenerated code snippets for the object.
- View layer names and types: The selected layer’s name is displayed at the top of the inspect panel, along with its layer type (component, instance, frame, text, etc.). You can also see when the layer was last updated.
- Try component variations in the component playground: When selecting a component or instance, you’ll see a component preview, a link to the main component, as well as any links to relevant documentation and dev resources.
- View applied styles: View styles and variables applied to the selected layer.
- Download assets: Dev Mode can automatically detect icons and present them as downloadable assets for developers. If you want to inspect an individual vector layer contained in an icon, you can turn off automatic icon detection.
- Export: You can apply export settings to layers to define the format and any other export settings. Figma supports the following export formats: PNG, JPG, SVG, and PDF.
Figma plugins
Figma plugins extend the platform’s functionality, offering developers additional capabilities to streamline their workflow. Plugins can enhance the inspection process, providing contextual information needed for implementation. They can also customize Figma’s code generation, enabling developers to generate code that might not be natively supported. Figma’s plugin ecosystem continues to grow, and users can even create their own plugins using Figma’s developer resources.
(Ref: https://www.figma.com/whats-new/)
- Help to ensure that developers have all of the relevant information that they need to implement a design in one place.
- Inspection: Plugins can take over the inspect panel and pull in context and info needed for implementation.
- Codegen: Plugins can customize Figma’s code generation that Figma doesn’t support natively.
- Want to create your own plugin? figma.com/developers
Figma Tips
To maximise your efficiency and creativity within Figma, it’s helpful to be aware of some key tips and best practices. Libraries, particularly Styles and Components, play a vital role in ensuring consistency and reusability throughout your designs. Autolayout is another valuable feature that helps in organizing elements fluidly, taking into account padding, spacing, alignment, distribution, and wrapping. Additionally, Figma’s prototyping capabilities allow designers to create interactive and engaging user experiences, showcasing flows and scenarios with interactions and animations.
Libraries: Styles
- Paints and colors: fill, stroke, background color
- Text: font family, size, line height, spacing
- Effects: drop and inner shadow, layer and background blur
- Layout grids: row, column, grid
Libraries: Components
- Variants
- Properties
- Instances
- Variables
- Collections
- Modes
Autolayout
- Sometimes it might confuse you.
- Allows to organize the elements in a more fluid way.
- Includes padding and spacing.
- Alignment and distribution.
- Min and max sizes
- Wrapping
Prototyping
- Display of how it could work
- Flows and scenarios
- Interactions and animations
Learn More
Figma keeps users informed about new features and updates through its “What’s New” section and the Figmalion newsletter. Navigating efficiently within Figma using shortcuts can significantly speed up your workflow. Playgrounds within Figma provide opportunities for hands-on learning, allowing users to gain practical experience with the platform. Furthermore, additional resources such as tutorials, blog posts, and guides are available to help users explore Figma’s capabilities further.
Conclusion
Figma continues to evolve as a leading design tool, empowering designers and teams with its collaborative nature, user-friendly interface, and powerful features. With the introduction of Dev Mode and an extensive range of plugins, Figma offers enhanced collaboration and customization options. By utilizing Figma’s structure, interface, and tips effectively, designers can optimize their workflow and unlock their creative potential. With the provided resources, designers can further expand their knowledge and stay up-to-date with the latest developments in Figma.
Resources
- Pages and layers panel https://help.figma.com/hc/en-us/articles/360039831974-View-layers-and-pages-in-the-left-sidebar#layers
- Exporting Assets https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma
- Tools https://help.figma.com/hc/en-us/articles/360041064174-Access-design-tools-from-the-toolbar
- Commeting: https://help.figma.com/hc/en-us/articles/360041068574-Add-comments-to-files
- Sharing: https://help.figma.com/hc/en-us/articles/360041068574-Add-comments-to-files
- Figma tutorial: Intro to Dev Mode https://www.youtube.com/watch?v=__ABPkb0aF8
- Guide to dev mode: https://help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode
- Plugins:
- Libraries: https://help.figma.com/hc/en-us/sections/4403936000407-Libraries-
- Components: https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma
- Autolayout: https://help.figma.com/hc/en-us/articles/360040451373-Explore-auto-layout-properties
- Prototype: https://help.figma.com/hc/en-us/sections/360006534454-Prototypes
- News about Figma: https://www.figma.com/whats-new/
- Newsletter Figmalion: https://figmalion.com/
- Making Figma better for developers with Dev Mode: https://www.figma.com/blog/introducing-dev-mode/
- Guide to Dev Mode: https://help.figma.com/hc/en-us/articles/15023124644247
- Dev Mode playground: https://www.figma.com/community/file/1234941143610339388
