Mitsubishi Electric charts a new form of digital transformation using Figma as a foundation for co-creation

Mitsubishi Electric is a comprehensive electrical manufacturer whose products range from home air conditioners to artificial satellites. The company began full-scale adoption of Figma in 2023. Prior to that, they used a different design tool, but made the switch when the tool went into maintenance mode.

"At that time, Figma had already become the de facto standard for UI development, so it was the most practical choice. Back then, the hurdles for introducing cloud tools were higher than they are now, but Figma’s collaboration feature allowing members at multiple locations to view the same file in real time was very attractive, and there was no reason not to choose Figma," said Mr. Takashi Yamauchi of the Integrated Design Center, Life Creation Design Department Life Interaction Design.

Starting with its introduction at the Integrated Design Center, Figma became ingrained in Mitsubishi Electric's UI development. From there, the company’s design culture began to shift, with one of the key turning points being the birth of its own design system, the Serendie Design System (SDS).

Accelerating co-creation through an innovative design system

"Serendie" is a coined term combining "serendipity", meaning an unexpected discovery, and "digital engineering". The name embodies the philosophy of generating new value from a chain of chance encounters and creation.

Built by the DX Innovation Center (DIC), which drives Mitsubishi Electric’s digital transformation (DX) efforts, the SDS is more than a UI toolkit. It’s an advanced initiative, even among major Japanese companies, for a manufacturing giant with a wide range of business areas to open its “common design language” internally and externally.

Mr. Hiroyoshi Shibata of the System Collaboration Planning Department, DX Innovation Center, Digital Innovation Business Group, explains: "Because our business areas are so wide, design tends to fragment by area. By making SDS a common foundation, it becomes easier to unify the brand image across any business unit within the company. It enables efficient development, and is also an important tool for compensating for the shortage of UI designers and software engineers."

Most design systems are built with a specific product or a single brand in mind. SDS was built from the outset to work across multiple business units with completely different characters. A “theming” function allows each department to customize its own brand identity while using common components as a base—addressing the realistic needs of a company with diverse businesses.

Another standout feature of SDS is that it’s built for engineers as much as designers. Mitsubishi Electric has a deeply ingrained engineer-led manufacturing culture, and SDS leans on concrete, ready-to-use UI components rather than abstract design principles. At its core is "high immediacy", the ability to complete a prototype simply by combining parts.

Bringing design and implementation together greatly reduces the time from idea to validated concept, and that speed is helping to push agile practices deeper throughout the organization.

Where SDS truly shines is also in co-creation with external partners. Partner companies can join projects using the same design language, so the design system becomes shared infrastructure for co-creation.

"Our goal is to eliminate the barrier to tool adoption in co-creation with clients and partners. By keeping it open, everyone can start smoothly with the same tools from the beginning," says Mr. Shibata. Rather than "perfecting and protecting," the philosophy is to "open it up and let it evolve", and SDS embodies this philosophy.

Expanding with AI integration: Next-generation design system applications

Another major feature of SDS is its AI-conscious design. "From the early stages, we had the perspective that it would be better to design it to facilitate AI integration going forward," says Mr. Yamauchi.

From around the time MCP began to appear in the world, members of DIC had already started building their own MCP server. "We tried making it and realized it was usable, so we decided to build it properly," says Mr. Shibata. The combined use of SDS and the in-house MCP server is now being put to use in three main ways.

The first is "vibe coding"—building UIs with natural language. Simply instruct an AI agent connected to the in-house MCP server to "create a login screen for a smartphone app" and a UI using SDS components will be generated. Figma Make and SDS can also be linked via connectors, enabling similar usage. Previously, creating a UI meant filing an internal request with the design team, which required significant time and costs. Now, individual business units can create prototypes and test on their own.

The second is design "compliance checks" and "replacements". By developing a Figma plugin that combines the in-house MCP server with Figma MCP, designs created in Figma can be automatically checked for compliance with SDS guidelines. "We've also implemented a feature that can batch-replace UI to be SDS-compliant simply by entering the URL of a Figma design created before SDS was developed," says Mr. Shibata.

The third is Q&A automation. Internally, an AI system running on the in-house MCP server now answers questions about how to use SDS and Figma for a group of 150,000 people, including 500 core users. "The several inquiries we were receiving every week have dropped to almost zero. Now we only get questions that require a human to handle," says Mr. Shibata.

SDS's AI-friendly design is steadily transforming on-site work. By integrating their in-house MCP server with Figma, the cycle of design creation, validation, and operation has become faster and more autonomous for Mitsubishi Electric.

Sprint durations cut in half with Figma Make

Alongside SDS and MCP, Figma Make is transforming both speed and expressiveness on the ground.

The numbers back it up. In one project supported by DIC, introducing Figma Make to app development shortened the prototype build time from two weeks to one day. Client and internal demos went from 3 to 12—a fourfold increase—and the value validation period dropped from 10 to 6 weeks. Sprint duration was cut in half, from three months to 6 weeks, and the resulting time saved goes towards next steps, such as preparing for commercialization.

This dramatic impact is underpinned by factors such as the ease of getting started without a development environment, high compatibility with existing Figma files and SDS components, and the simplicity of sharing and collaborative editing.

For Mr. Yamauchi, what stands out about Figma Make is its ability to convey design intent. For example, the team used to make videos to show engineers how something should move, but they can now build an interactive prototype instantly.

And this is deepening discussions with engineers. "When there is something that works, theory becomes reality, and the discussion shifts from a binary of 'possible' or 'impossible' to how we can make it happen. It feels like it's become much harder for people to say, 'It can't be done,'" he says.

That said, Figma Make is currently used for early concept validation, and other tools are still being used for full-scale product development and release. "There are still many challenges in connecting what we create with Figma Make to full-scale development for release. I believe there is room for improvement in coding quality as well, so I'm looking forward to future updates," says Mr. Shibata.

SDS, expanding globally, moves toward its next evolution

SDS started in Japan, but has expanded to overseas subsidiaries in the past year.

"We've started receiving GitHub contribution requests from overseas as well. We can feel it growing globally, and we want to put more effort into accessibility and multilingual support going forward. A smartphone app created entirely by SDS—from design to coding—is also expected to be released soon. We hope that the accumulation of these concrete results will further accelerate the adoption of SDS," says Mr. Shibata.

That’s how Mitsubishi Electric’s design system could end up as a common language for the entire industry—an aspiration that might not be too far off in the future.