What is Figma

by Jennifer Smith

Figma is a cloud-based design and prototyping application that allows designers and developers to collaborate on projects in real-time. It is available as a cloud-based version that is accessible through a standard web browser, or though a desktop app available on Mac OS and Windows computers.

Figma History

Figma was founded in 2012 by Dylan Field and Evan Wallace, while they were both students at Brown University. The company launched its first product, a browser-based design tool called Figma Web, in 2015. Dylan Field and Evan Wallace aimed to build a tool to streamline design processes and collaboration, leveraging real-time editing.

After beta testing, Figma's browser-based design tool was released publicly in 2016. Figma released its first desktop app for macOS the same year and in 2019 it released an app for Windows. The web-based version of Figma continues to be available.

Figma saw rapid growth in the following years and attracted large design teams from enterprise companies including Uber, Twitter, and Microsoft. Figma’s collaboration capabilities helped expand adoption during the COVID-19 pandemic as teams worked remotely. This, coupled with Figma’s rapidly adding new functionality has led to wide adoption and popularity of Figma among large digital design teams.

Figma Capabilities

Figma offers features that support the design process. It includes vector editing tools for designers to create and manipulate shapes, text, and graphics. The software also includes a library of design assets, including icons, illustrations, and photos, which can be used to create designs. For enterprise users, Figma supports single sign-on (SSO), advanced security, admin controls, and analytics for large organizations to manage teams and design workflows.

Figma Design Libraries

Design libraries in Figma are collections of reusable design elements that can be shared and accessed across multiple files and projects. They allow teams to maintain consistency and efficiency throughout their design process. Here’s how they work:

Figma Components are Reusable User Interface (UI) elements such as buttons, icons, and input fields) that can be used in various designs. When a component in a library is updated, the changes can propagate to all files where the component is used.
Text Styles are predefined typography settings that include font family, typeface, type, size, weight, and color that can be applied across different designs. This ensures that all text is consistent across multiple designs.
Color Styles are a library of color swatches that designers can use throughout their projects. This is useful for ensuring brand consistency.
Grid and Layout Styles are predefined layout settings, such as grids, can be saved in libraries to maintain structural consistency across designs.
Vector Assets include logos, icons, and other vector elements can be stored in libraries for easy reuse.

By publishing design libraries an organization ensures that all team members are using the same components, colors, and styles, making collaboration more seamless.

Figma Design Systems

A design system in Figma provides a comprehensive and strategic approach to design that includes a design library as a core part of a design system. Figma Design systems also include guidelines, rules, and principles that govern how the design should be implemented. A Design System provides a set of standards to manage design at scale by reducing inconsistencies and emphasizing design standards.

Figma's design system capabilities enable designers to create and maintain design systems, which are collections of reusable components and guidelines for creating designs that are consistent and on-brand. Design systems can be shared across teams and used to ensure consistency across multiple products or projects.

A Figma Design System includes

UI Kits and Patterns: Components such as buttons, form fields, navigation menus, and cards that are part of a cohesive design language. These components are often categorized into larger patterns or modules that can be combined to create entire pages or flows.
Guidelines: A design system also includes documentation about how to use those components, such as spacing rules, alignment, accessibility considerations, and interaction behaviors.
Tokens: Tokens are variables that store design values such as color, typography, spacing, and border-radius. They allow for easy updates and changes across a system.
Interaction Design: Detailed guidelines on how elements should behave during user interactions such as hover states, click animations, and transitions.
Responsive Design Rules: Design systems generally include guidelines for how designs should adapt across various screen sizes, ensuring consistency in responsive web design.
Version Control and Maintenance: As design systems evolve, they need to be maintained and updated regularly. Figma provides features like version history and the ability to update components across multiple projects easily.

Benefits of Using Figma Design Libraries and Design Systems

Consistency: Having a single source of truth for all design elements, ensures consistency in both visual style and user experience.
Collaboration: Figma’s collaborative environment allows multiple designers to work on the same project in real time, and design libraries make it easy for everyone to access the same set of components.
Scalability: Design systems allow a design process to scale as a team or product grows. It makes it easier to manage updates and distribute changes across all projects.
Efficiency: With a design system, designers can focus on solving creative problems instead of reinventing core elements for every project because of the availability of reusable components from a design library or system.
Cross-functional Collaboration: Design systems can serve as a bridge between designers and developers. With a shared language and tools, developers can implement designs more accurately and efficiently.

Figma’s Design Libraries allow for consistent use of reusable components, styles, and assets, while Design Systems are a more robust, structured collection of components, patterns, and guidelines to ensure consistency and scalability across an entire product ecosystem. Both tools work together to streamline the design process, especially in large, collaborative teams.

Figma’s Integration with Development Workflows

Figma has developed capabilities that integrate well with development environments. Developers are able to use code generated from Figma as the foundation for developing working apps and websites. Figma supports the design-to-development handoff process, allowing developers to inspect designs, extract assets, and view CSS code snippets directly from the Figma interface. Figma exports the CSS and HTML needed for styling. Third parties such as Zeplin also create plug-ins for Figma to help designers and developers to collaborate.

Figma Prototyping

Figma's prototyping capabilities allow designers to create interactive prototypes that can be shared with stakeholders for feedback. The software also includes animation tools, enabling designers to create animated transitions between screens.

Figma can be used to create realistic user experiences, including clickable interactions, overlays, with animated transitions between screens. This makes a Figma prototype similar to a real app or website without needing to code or do any development work. Third-party plugins like Figmotion extend the core animation capabilities to create more complex, micro-interaction animations.

Figma Collaboration Capabilities

One of the primary benefits of Figma is that multiple users can simultaneously work on a single design project. This eliminates the need for designers to create multiple versions of the same design, as everyone can work on the same file in real-time. Team members can also give feedback and make changes to the design as needed.

Because Figma is a cloud-based software, designs can be accessed and edited from anywhere with an internet connection. Figma allows for real-time collaboration, with multiple users able to work on the same design simultaneously. Figma offers different levels of permissions (edit, view, and comment) which helps teams manage access control efficiently across different stakeholders. This feature is particularly useful for design teams that may be working remotely or across multiple locations. Figma also allows for commenting and feedback on designs, making it easy for stakeholders to provide input and for designers to iterate on their designs.

Figma includes many collaboration features that make it easy for team members to share their work, update designs, and give feedback. Users can leave comments directly on a design element or use the built-in chat feature to discuss changes. Users can also create design libraries and style guides, which can be shared across multiple projects to ensure consistency.

Version Control includes design history, allowing users to view previous iterations of a design and revert to older versions if necessary.

Branching and Merging allows designers to create branches off a main file. This is useful for teams to experiment with changes without affecting the main design until the changes are approved and merged.

Real-time collaboration also allows Figma to be used in design sprints and collaborative workshops. The third-party plugin FigJam provides a digital whiteboard that can be used during brainstorming and ideation meetings.

Figma Interface

Figma's interface is customizable, allowing users to adjust the layout and settings to suit their preferences. Once a user has set up their interface to accommodate the specifics of their project, they will be able to work more efficiently and focus on the creative process.

Types of design projects that use Figma

Figma can be used for a variety of design tasks, including wireframing, prototyping, and visual design. The application offers a wide range of design elements and tools, such as vector graphics, typography, and image editing. Since it is a cloud-based application, Figma can be accessed from anywhere with an internet connection, making it easy for remote teams to collaborate. This also allows designers to work on their projects from multiple devices, such as a desktop computer or a tablet, without worrying about file compatibility issues. Figma can either be run in a browser or as a desktop app on both MacOS and Windows.

Figma Plugins and Integrations

Figma's plugin ecosystem plays a crucial role in its flexibility. Designers can extend Figma’s functionality by using plug-ins from third parties or building their own plugins. Popular plugins include tools for accessibility checks, stock images, advanced animations, and code exports. This plugin ecosystem allows Figma to be customized and adapted for specific needs, creating unique capabilities for different types of Figma users.

Figma API Access

Figma provides an API that developers can use to automate tasks, integrate Figma with other tools, or build custom solutions. This is useful for companies that need Figma to fit into larger, more complex workflows.

Figma alternatives and competitors

Figma’s robust capabilities make it stand out against competing software like Adobe XD, Balsamiq, and Lucidchart. This versatile design application is well-suited for design teams and companies of all sizes and offers subscriptions for each. Whether you are a novice interested in pursuing a creative profession or a design professional looking to try new software, Figma is an application worth adding to your arsenal of skills.

Figma Community

Figma offers users the opportunity to share their work, templates, resources and projects for all users, creating a global design community. The community also extends to educational users who are able to access Figma for classroom use at no cost with the Figma for Education program. Professionals can also take Figma classes or attend a Figma bootcamp to expand their skills and proficiency, or hire a Figma consultant to assist with integration and creating design systems

Accessibility in Figma

Figma integrates with accessibility tools and plugins, helping designers create designs that are compliant with Web Content Accessibility Guidelines (WCAG). Accessibility is important as part of the design process, making certain that products are inclusive and accessible to all people. A range of community accessibility resources are available on the Figma site.

Adobe Acquisition Controversy

Adobe, the maker of Creative Cloud, offered to buy Figma for $20 billion in January 2023 pending government approval of the acquisition. The US Department of Justice announced they intended to oppose the acquisition based on monopolistic practices of Adobe. Many in the design community welcomed this decision, as there was fear that the acquisition would stifle competition and innovation at Figma. With the announcement from the Justice Department, Adobe canceled its planned takeover of Figma.

Figma Pricing

Figma offers a range of pricing options, including a free plan for individuals and small teams. Paid plans start at $12 per editor per month and include additional features such as design version history and team libraries. Figma charges fees based upon active reviewers within projects, and invoices users if they increase the number of collaborators on a project.

Figma Reviews

Figma has received positive reviews for its ease of use, collaborative features, and robust design capabilities. The software has been praised for its ability to streamline the design process, particularly for teams working remotely.

American Graphics Institute