Figma's Key Features to Enhance Collaboration

I've been actively utilizing Figma since 2021, and there's no doubt that Figma has become the most popular tool worldwide for UI/UX design. While there are many reasons for Figma's popularity, I believe that its ability to facilitate seamless collaboration with developers is the most significant. In this article, I'll discuss the reasons why UI/UX designers should use Figma and focus specifically on its core features.

‍

Optimal Environment for Real-time Collaboration

One of Figma's greatest strengths is its web-based platform accessibility and collaboration features. Multiple users can access a single project simultaneously, allowing real-time collaboration where changes are immediately reflected to all team members. This eliminates the need for naming files with "final" and allows everyone to view the design process and latest designs at a glance, reducing communication delays. Additionally, the ability to track project history and revert to previous versions is a significant advantage.

‍

Efficient Collaboration with Frontend Developers

In the past decade, frontend development has undergone significant evolution, with frontend developers now receiving as much recognition as backend developers. This is largely due to advancements in frontend technologies such as Angular, React, and Vue, which are component-based development frameworks. Since UI/UX designers often collaborate with frontend developers, it's essential to work in a way that facilitates easy development and communication. Figma's Components, Properties, and Local Variables are key features that enable this.

‍

Deep Understanding of Key Features

• Components: Creating reusable design elements ensures consistency and saves time. This simplifies frontend development by making the code more straightforward. Commonly used components include buttons, inputs (text fields or dropdown selectors), checkboxes, radio buttons, toggle switches, and icons.
• Properties: Allows easy management of specific variations within components. For example, setting color, size, text, etc., as properties enables quick customization without creating new components.
• Local Variables: Allows setting specific properties as variables for easy project-wide updates and management. This is particularly useful for managing color palettes, component widths or heights, button corner radii, etc. For outsourced projects involving various companies, local variables eliminate the need to create new components for each project.

‍

Key is Utilizing Libraries

Components, properties, and local variables are all commonly used concepts in frontend development. To be recognized as a skilled UI/UX designer, it's essential to create a design environment that is similar to the frontend development environment.

Frontend developers typically choose component libraries when starting a project. Among Korean developers, Material UI is the most popular library. Therefore, if designers structure their designs similar to MUI's component system, developers can save effort in creating components. Most component libraries, including MUI, can be easily found and used in Figma.

These are the most common design libraries. You can use them by duplicating:

• iOS - Human Interface Guidelines
• Android - Material Design
• React - Material UI

‍

In these library, not only the names of the components but also the properties are well set. You just need to customize them to match the brand of the service you are designing. Of course, I hope you to improve the overall design system so that you can work more efficiently in the future.

‍

‍‍

Utilizing Local Variables for Dark Mode Setting

Local variables are a relatively recent addition to Figma's features. They allow setting specific properties as variables for easy project-wide updates and management. While color management was possible before local variables, it's now recommended to set frequently used colors as local variables. This is because it makes working on dark mode easier. Before local variables, dark mode properties had to be added and handled for each component individually. However, with local variables, switching all pages to dark mode can be done with a single click.

Local variables are advantageous not only for dark mode but also for changing the overall feel of the design system. Branding of design systems changes significantly with color, size, and corner radius alone. By utilizing local variables, it's easy to make modifications when rebranding the product's overall feel.

‍

‍

‍

Conclusion

UI/UX design with Figma goes beyond creating beautiful UIs; it enables effective collaboration and efficient project management. Understanding and leveraging Figma's core features allows seamless communication with frontend developers and direct contributions to the development process. This skill is crucial for improving project quality and optimizing workflow, and it's often a requirement for UI/UX designers in many companies. I hope you become a recognized UI/UX designer by mastering Figma's features.