ROUTE06

Design

Figma: The Design Platform Bridging Creativity and Technology

2022-11-14

Kaori Nakashima

Share

Figma, known for its simple shapes and colorful Memphis-style graphics, is widely used by designers, product managers, and engineers alike, creating a unique and evolving ecosystem. The number of users has rapidly expanded. As of this writing, it has over 4 million users and is employed by major companies like Google, Microsoft, and The New York Times. It made headlines in September 2022 when it accepted Adobe's acquisition offer of $20 billion (approximately 2.9 trillion yen), Adobe accepted a huge acquisition offer of $20 billion (approximately 2.9 trillion yen) from Adobe. This article provides background on Figma's growth to date and future potential, created by co-founders CEO Dylan Field and Evan Wallace, CTO and Chief Technology Officer.

What is Figma, the collaboration tool loved by designers around the world?

Figma is a tool designed to boost the productivity of entire teams involved in product creation, from concept design to prototyping and gathering user feedback. By sharing all the design processes and outputs of the team on Figma, two-way communication between designers and non-designers is facilitated, enabling interface design that is easier for users to use and for engineers to implement. This enables the creation of interfaces that are user-friendly and easier for engineers to implement.

The Biden-Harris administration's creative team made a splash during the U.S. presidential election in the midst of the 2020 pandemic. All output, from the website (JoeBiden.com) to campaign planes, merchandise, and social networking posts, was produced using a single Figma file. The collaboration tool, Figma, was behind the speedy design collaboration with many stakeholders in a remote environment1. In Japan, almost all screens of PayPay Frima have been created with Figma since its release (October 2019)2, and there are many examples of introduction of Figma from services of major companies to individual design work.

Conventional design tools are mainly dedicated desktop applications for creating, editing, and outputting design files, and in general, they require the purchase of paid applications for file browsing and simple editing, which is a high barrier for non-designers. On the other hand, Figma aims for "seamless and lossless interaction between everyone involved in the design process without causing friction," and by proactively incorporating new technologies (WebGL, Operational Transforms, CRDT, etc.), it enables users to By actively incorporating new technologies (WebGL, Operational Transforms, CRDT, etc.), we have created an environment in which users can view design files in a browser without stress and without installing special applications. 3

"Design is a team sport. So collaboration is essential."3
<br "And design is a team sport---

Screenshot from the official Figma website
Refer to the official Figma website at the time of writing

Toward an Internet-native design tool.

Figma began as a personal project of founder Dylan Field in 2012. Born in California, Dylan's interest in computer science, art, and design began at an early age and led him to a magnet school with a strong technology education in science, technology, engineering, and mathematics. Later, while studying computer science at Brown University, he met his future business partner, Evan Wallace. Evan had interned at Pixar, where he learned WebGL—a JavaScript API that enables interactive graphics in the browser—which he later applied to the development of Figma's 'browser-first' approach.

After interning at LinkedIn and Flipboard, Dylan co-founded Figma with Evan, a recent college graduate, after being selected for a Thiel Fellowship (Peter Thiel's investment program for young entrepreneurs who have dropped out of college). After exploring various business ideas, including software for drones and meme generators, we finally decided to create a product that would try to replace Photoshop. An article from that time4 described the product as "a technology startup that allows users to express themselves creatively online," emphasizing that it was a product for designers.

At first, the product did not launch well and it took several years for the beta version of Figma to be released to the public, and many dissatisfied members left. At that time, Figma mainly offered a free version as an entry model, but it seems that the company went through various trials and errors, such as revising its plan after receiving feedback from one Microsoft user that "free start-up tools are unreliable.

Later, the company changed to a simplified pricing structure inspired by the Australian software company Atlassian, and expanded the features with an emphasis on non-designer users, and finally released the official version in 2016. The official version was finally released in 2016. Then in 2017, we continued to develop and improve the software by adding innovative features, including multiplayer editing, and evolved it into a product that the designer community is enthusiastic about.

"Browser First" for Non-Designers that accelerated Figma's growth.

Adobe and other competing products are great products for designers, and a lot of creativity has been generated through them. In contrast, Figma is a product with a design philosophy that focuses on improving the productivity of not only individual designers but also the entire project team, including non-designers5. Figma has also been sincerely addressing questions and issues that non-designers have during the design process, such as whether this file is up-to-date, which applications must be installed for viewing and editing, and where and how feedback on the design should be provided. I have been working on a number of projects with the same goal.

This is symbolized by the many "browser first" features. While conventional design tools generally require the installation of a paid desktop application in order to view and edit files, Figma allows anyone to open a shared URL in a web browser and collaboratively edit design files in real time in a high-performance work environment. In contrast, Figma allows anyone to collaboratively edit design files in real time in a high-performance work environment by simply opening a shared URL in a Web browser. When Figma was created, web-based design platforms running in a browser were rare. The ability to render complex graphics while maintaining performance, coupled with real-time collaboration for multiple users, was a breakthrough for design tools at the time. The experience of rendering complex graphics while maintaining performance, and the ability for multiple users to participate and edit simultaneously, were also a breakthrough for design tools.

As a result, non-designers can review mockups and creativity early in the design process, and the commenting function within Figma has greatly reduced the barriers to feedback on the design. In conventional digital product development, the design process often starts after business and functional requirements have been determined, and the user experience and interface design are often constrained by these requirements. In recent years, in order to create more user-first products, concept design and mock-up design have been incorporated into the initial product conception process, and designers are increasingly participating in business and development meetings.

Figma
Created by us

The ease of design collaboration has also changed the work of non-designers. Copywriters can now put concept words directly into design files to see how they look and imagine the finished product, and software developers can easily obtain design and code conversion data even if they are not good at design or markup. With an emphasis on the non-designer experience, Figma is evolving into a product that is transforming and influencing not only design, but also the development process and other operations.

Figma Community as a Design Platform.

In addition to its collaborative features for non-designers, another of Figma's great strengths is its enthusiastic fan community: as soon as you install the Figma application and open an account, you have access to a social network service that connects you to Figma's worldwide users. You will have access to our social networking services. Individuals and companies who are Figma users can easily publish their designs on the Figma community site, and anyone can instantly copy and edit the shared design files in their own workspace. The same kind of sharing of intellectual property (source code) that has been common in open source software development is now possible with design files. In Japan, Figma data was released in March 2020 as design data for the new Corona countermeasure site and became a hot topic6. Various ideas for improvement were submitted as Issues.

While there are many design portfolio sharing sites such as Dribbble, it is not uncommon to see only image files and not the entire design file including layers and components. However, GitHub is a product that improves development efficiency by specializing in the sharing and management of software source code, and the community that Figma has built is a design version of GitHub. In addition, there are countless plug-ins that enhance the convenience of Figma, and their development is actively conducted within the Figma community. For example, useful plug-ins are constantly being implemented and released by community users to automatically generate dark mode designs, to detect and correct formatting errors in designs by importing external data, and so on.

The proliferation of design files and plug-ins within the community has streamlined design work for all Figma users. The growing user base, which includes not just designers but also software engineers, product managers, and other professionals, has led to the release of new design files and plug-ins. Figma is a platform service that not only provides many useful functions for experienced designers, but also gives beginners the opportunity to learn and emulate the techniques of their predecessors and to communicate in a comfortable atmosphere. Figma is loved by designers and non-designers around the world.

Figma ecosystem
Created by us

History of design tools and positioning of Figma

Adobe, which announced the acquisition of Figma, has been in the spotlight since the 1980s, revolutionizing the design world and bringing the concept of digital design to the forefront. Adobe chose Apple's Macintosh over IBM's PC, which held the lion's share of the market at the time, to enhance its value and remain the absolute mainstream brand in the DTP and printing industries today. Unrivaled in the industry, Adobe released a number of excellent design applications such as Adobe Illustrator and Adobe Photoshop, which are well-known to everyone and have become products that are highly favored by creators and designers. 7

Sketch is a vector-based design tool that was developed for the Mac and offers lightweight usability and simplicity in line with the "look and feel" of macOS. Sketch is a new design tool developed for the Mac, featuring lightweight operation and a simple interface in line with the "look and feel" of macOS, and is specialized for application and web production. The emergence of flat design, the rise of SVG, and the ease of modifying layouts have accelerated Sketch's growth, as the superior operability of vector graphics has begun to attract attention. In addition to the fact that vector rendering is less prone to image distortion when manipulating scale and looks good in print, the brand image of the Macintosh as a design-focused tool helped to create the impression that Sketch was a newer, more updated design tool. Sketch was also more cost-effective than Adobe's products, which were in the process of being converted to a subscription-based service. Now Sketch has changed its pricing model to subscription and is focusing on migrating to Sketch Cloud.

Sketch is also a product loved by many designers around the world, but it is a Mac-only tool, so Windows users are not eligible, and at the time, prototyping required a combination of InVision (prototyping software) and other tools. Sketch, like Figma, allows users to add functions by installing plug-ins, but the plug-ins themselves are not managed by Sketch, and must be installed separately from the GitHub page published by the creator. This was a concern, especially for corporate users, in terms of plug-in performance, stability, and security. In addition, the file size tends to be huge, as all users need to install the same plug-ins in advance in order to view and edit Sketch design files, and since editing is done using a local PC application, version control and file management have often been a point of contention. This often led to issues of version control and file management.

Complexly named design data competing for 'latest'
Taken and created by us

Against this backdrop, Figma was created as a service to solve various problems with existing products: Figma users always have access to the same design files, eliminating the need to temporarily copy design files to avoid conflicts caused by simultaneous editing by multiple users or to manage version control. This eliminates the need to make temporary copies of design files for version control and to avoid conflicts caused by multiple users editing at the same time. The combination of design, prototyping, file sharing, developer handoff, and other applications also eliminates the need to use different products to prototype screen transitions. As a result, as mentioned above, we have succeeded in evolving a design work tool that was a hurdle for non-designers into a collaboration tool for all project stakeholders.

In 2021, Figma is also releasing a second product, FigJam, a digital whiteboard to further accelerate team collaboration3. However, it had too many functions such as pixel and layout settings for the preliminary stage such as organizing ideas or creating flowcharts. FigJam was created as an online whiteboard tool to facilitate more active meetings, given the background that remote work was increasing at Corona Disaster. FigJam is an online whiteboard tool for active whiteboarding. While the experience is different from the comfort and realism of face-to-face whiteboard brainstorming, it is also unique in that it features a full range of stickers and templates to enhance meetings. In this way, Figma consistently strives to create opportunities for designers and non-designers to cross boundaries.

Future Possibilities for Figma

Figma and design engineers

Figma, which has brought a breath of fresh air into a variety of fields, has also contributed to the development and success of design engineers, who straddle the boundaries between designers and engineers. Behind every web design and UI design that users see online is an architecture built on a variety of technologies, including front-end, system infrastructure, and workflow. The diverse and sophisticated technology behind the design is the part that is not paid much attention to (as the fox told the prince of the stars, what you see is very easy to understand).

As mentioned earlier, in many product development efforts, software development and design have been separated as separate processes. Until now, with the lack of a common language and tool barriers, it has often been dependent on the care and effort of individual designers and software engineers on the team to prevent specification omissions, communication errors, etc. For more information on design engineers, please refer to another article. To help solve problems at the intersection of design and engineering, Figma provides design engineers with the opportunity to prototype and design more smoothly. Figma provides design engineers with a number of features to facilitate the design process, including prototyping. In addition to making it easy to move the created screen as a mockup, Figma has been actively improving its products to bridge the gap between design and software implementation, including plug-ins for outputting CSS and JavaScript from design files. Figma continues to evolve as an excellent tool for the people who are the link between design and engineering, and will allow us to deliver products to users and validate ideas in a much faster span of time.

"It might sound a bit silly, but I think computer programming is pretty much the closest thing we have to magic."

Referring to his upbringing in the "Harry Potter" series, Dylan said that programming and technology is akin to the challenge of Muggle magic, "I think it's a bit silly, but I think programming is pretty much the closest thing we have to magic. 4

Figma and Enterprise

The collaboration that Figma generates is not limited to teams within the same company, but is active across the enterprise as well. The process of creating new digital products is no different in large traditional companies or start-ups. However, the former often face higher hurdles and take longer to adopt new SaaS and tools than start-ups. A certain level of security is essential for SaaS adoption in large companies, and it must be explainable to stakeholders.

In contrast, Figma is already SOC 2 Type 1 and Type 2 certified as of 2020, and has announced that it will invest in security to further strengthen the confidentiality of customer data stored in the cloud. The integration of the SAML SSO provider provides a secure environment for enterprise use, with support for quick URL sharing, secure and easy login without the need for dedicated applications, and user access control. In addition to the previously supported Okta, Microsoft Azure Active Directory, and OneLogin, the product now also supports Google SSO and Active Directory Federation Services (ADFS). 8

In terms of enterprise adoption, Adobe's acquisition of Figma is expected to help the Adobe brand expand its adoption among large enterprises. In terms of functionality, it is likely that many of the useful features that Adobe has been working on will be included in Figma.

What is expected of the next generation of design tools

As a catalyst for complex productivity in design, Figma has facilitated the smart creation of complex interaction and animation prototypes, in addition to final design outputs and assets such as components, and the Figma community will continue to expand its reach beyond the platform. Outside of the platform, the collaborative network of everyone involved in the design process will continue to grow. In the author's personal opinion, although already a feature of the higher plans, we hope to see the branch function of GitHub and a diff management system like Sketch+Abstract enhanced in the standard plans as well 910. Penbot is also starting to get attention as a new design tool11, and a TechCrunch article12 mentions a 5,600% jump in signups for the tool after the release of Adobe's acquisition of Figma, and a 400% increase in on-premise deployment. It can be inferred that designers, concerned about being boxed in by Adobe, are acting out of a desire for a more open and flexible collaboration tool.

The demand for collaborative and interoperable software tools like Figma is likely to grow in the future. Just as digital design tools have evolved from Adobe to Sketch and from Sketch to Figma, we can expect to see continued innovation and healthy competition in the industry. As Adobe breathes new life into the movement and new sensibilities that Dylan and Evan have established, Figma will continue to evolve as a better product, more robust and creative in its ties to design engineering and enterprise deployment.

脚注

  1. Youtube / Day 1 Closing Keynote - Designing the Biden-Harris campaign - Robyn Kanner (Config 2021)

  2. Yahoo! JAPAN Tech Blog / PayPayフリマのデザインをスムーズにするためのFigma運用フロー

  3. Forbes How Figma Became Design’s Hottest Startup, Valued At $10 Billion23

  4. BROWN DAILY HERALD / CS undergrad wins tech fellowship2

  5. kwokchain / Why Figma Wins

  6. Tokyo official COVID-19 measure website UIデザイン

  7. Adobe.com / [Welcome to Adobe's Printing Solution!

  8. Figma.com / Welcome to Adobe's Printing Solution!

  9. Figma.com / Keeping your data in Figma safe and secure: SOC 2 Type 2, SSO, and more

  10. Figma.com / 規模に応じたデザインプラットフォーム

  11. businesswire / Guide to branching

  12. TechCrunch / Penpot Raises $8M to Keep Designers and Developers in Sync While They Build Beautiful Products

Digital TransformationB2CUI DesignUX DesignPlatformSaaSFigma

About the Author

Kaori Nakashima. After graduating from an art and design-related university, she worked on e-commerce business mainly for clients in the fashion industry before joining ROUTE06, where she is engaged in UI design, UX design, and creative design.


New Articles

Research

History of Regulations and Japanese Companies' Efforts to Reduce Greenhouse Gas Emissions [Part 1]

In New Logistics Markets Expanding by 'Cold' (Part I), we looked at examples from Africa to see how cold chain construction has enriched and made safer the lives of people living there. In this second part, we will look at the state of the cold chain in Asia.

Details