Introducing: Figma’s Platform

Today, we’re excited to launch the Figma Platform, a way to improve design workflows by connecting Figma to other tools, scripts and even web apps. We’re starting off with a new concept for the design space: A web API.

It’s crazy that a web API is groundbreaking in 2018, but to our knowledge, no one has ever created one for a professional design tool before. The reason? Design traditionally takes place in a world of siloed, offline desktop software, whereas Figma lives online where everything is connected.

By harnessing the open nature of the web, our API lays the foundation for unique forms of design collaboration. Companies are already using it to craft custom tools that meet their unique needs. For example, Uber created a live feed of what their design team is working on to raise visibility across the organization. GitHub automated part of their icon creation process to improve its efficiency.

Those ideas are just the beginning — we’re open sourcing a number of demo projects ranging from a Figma spell checker to a generative art tool to a method for putting your designs on the Ethereum blockchain. We’re also introducing new and improved integrations with other design tools like Avocode, Haiku, Zeplin and Pagedraw.

We’re most excited to see what our community will make. Read on to learn more about how our platform works and ways to get started. (And check out Harry McCracken’s excellent Fast Company article about our API’s significance for the broader tech industry.)

How it works

The first release of the Figma Web API has three core capabilities:

1. Read design files in an open JSON file format
2. Read/Write comments to design files
3. Render design files (and parts of design files) into standard image formats (png, svg, etc)

Our open file format allows third party tools to consume Figma designs in a reliable way. Unlike our desktop competitors, Figma’s Web API isn’t tied to operating systems, specific file paths or versions of design software. This means it’s possible to access the current state of a design from software running on entirely different computers, or even on the web like Figma itself — setting the stage for an entirely new class of design integrations.

Once you know the unique key of a Figma design — which is contained in the URL — you can extract a live snapshot of the tree of shapes, text, components, prototype links, transitions, constraints, etc that define how a Figma design looks and behaves. You can also ping an endpoint to generate a JPG, PNG or SVG of any file or file subtree.

We’ve designed the API to be as ergonomic as possible so it’s fast and easy to script improvements to internal company workflows or integrate Figma with other tools. Because it’s web-based, you don’t need to learn esoteric scripting languages to do this. You can rely on the programming frameworks you’re familiar with and interface directly with a well defined web API rather than bind yourself unnecessarily to another proprietary plugin framework. (This will make it easier to keep integrations up to date — and therefore less buggy!)

We know you’re wondering what’s coming up soon. Here’s a preview:

1. Webhooks. Next we plan to release Webhooks that stream callbacks to events in Figma. You can attach a Webhook to a file or team. You’ll get back events mapping to file updates.
2. Write API. While our Comment API allows clients to write to Figma, today’s release is mostly about enabling read cases and opening Figma up to the outside world. We plan to introduce a Write API later this year… it’s something we’re super excited about!
3. Extensions. If we had $1 for every time customers requested in app extensions, we might not have needed to raise our last round of funding. That said, we have watched as our competitors added extension models which granted developers freedom at the expense of quality, robustness and predictability. We’re eager to leverage the incredible collective brainpower of the Figma community in making our tool better, but we’re not going to introduce extensions until we are confident our extension model is robust. There’s no ETA just yet, but we are actively exploring how to build this in a solid way.

Take workflow inspiration from: Uber & GitHub

As design plays a growing role at big companies, more and more departments touch it. It’s not just the UI person who interacts with mockups and visual conceptions of ideas — so do copy-editors, engineers, researchers, marketers, executives and countless others.

This snowballs into big problems. Traditional desktop design tools weren’t built for collaboration, so it’s painful for people to work together on designs. Files must be exported and uploaded before they can be shared, and thus they’re immediately out of date when the original design changes. Leaders can’t easily see and comment on real-time work; engineers spend hours hunting down the right assets; teams wrestle with problems that — unbeknownst to them — many others solved in previous contexts.

For true collaboration at scale, enterprises need a better way to share, search and see real-time designs across the entire organization. That’s why we’re so excited about the promise of custom workflows fueled by Figma’s API.

Uber

The on-demand ridesharing service boasts a design team spread across 4 different cities, working on a diverse array of products from Uber Eats to Uber Freight. Its new VP of Design wanted an easy way to browse these projects, so they’re creating internal tools for visibility with our web-based technology.

“Figma’s API has helped bring ideas we have dreamt about for ages to life,” said Erik Klimczak, Senior Design Manager for Uber’s Advanced Technology Group.

Uber is planning to broadcast in-progress designs on TVs around the office, surface them through a Dribbble-like website repository and load designs on a Chrome browser extension for employees. Designers will have the autonomy of deciding when to share — the API won’t pick up their work until they drag it into a particular frame in Figma.

Other companies have made similar products to facilitate the sharing of design work, but this is the first time we’ve seen anyone create a real-time feed based on an online source of truth instead of a messy export flow. We found the magnitude of Uber’s effort inspiring, and we hope to see more teams explore similar concepts.

Github

With the new Figma API, GitHub can push changes to their icon system — Octicons — from a single design file. When someone needs to alter an icon, they can simply edit the Figma file, which serves as the source of truth. A designer or engineer can then submit a pull request with a reference to the updated Figma design. This triggers a new build via Travis CI which uses Figma’s API to automatically extract icons from the Figma file and publishes the updated icon set in each format.

Driving the changes from a single design file reduces the barrier for contributing said changes. It also allows GitHub to run everything via common continuous integration services rather than setting up Mac servers. In the future, when Figma releases our Write API, GitHub plans to make data flow bidirectionally so the repository and design file are always in sync. This way anyone will be able to make changes to the Octicons icon set in the way they feel most comfortable, whether that’s design or code!

A new world of integrations

In addition to helping companies like Uber and Github customize their own workflows, our API will make it easier for third parties to build — and maintain — public Figma integrations. Zeplin just issued an overhaul of their integration with our new API, and three other products have introduced Figma functionality for the first time:

1. Haiku — a tool for creating interactive, cross-platform UI components (available today)
2. Pagedraw — a production ready React UI code generator (available today)
3. Avocode — developer handoff tool (coming soon)

Integrations like these are more important than ever before for design. We live in a world with myriad workflows, where every team has different processes for getting things done. At Figma, it seems obvious to us that no single company is going to solve every problem, so tools need to work well together. By partnering with services like Haiku, Pagedraw, Avocode and Zeplin, we can unlock new use cases for our community and unblocks teams with other needs.

“Figma has long been one of our favorite design tools,” Zack Brown, the CEO of Haiku, said. “With this integration, we’re coupling the strength of Figma’s design collaboration platform with Haiku’s app production power.”

Example Projects

To help you get started, the Figma team (and friends of the family) spent a few days building fun projects on top of the Web API. Everything below is open sourced on GitHub. If you already have ideas on what you want to build, we hope these examples will be helpful as reference material. If you’re not sure what to make yet, we encourage you to fork these projects and take them in new directions that we might never dream of!

(1) Figma Custom Mockup Generator

See what a design will look like in different real-world contexts — like an iPhone, bus stop, or billboard. Try it out by accessing the public repository on GitHub, downloading the code and running it as an HTML page.

(2) Figma Spell-Check

With the Figma spell-check demo, you can run a command line tool that will scan text in a design. When words are mis-spelled, it will automatically leave a comment suggesting alternatives. We’re excited to see the different things people build with our comments API, and this is just one idea.

(3) Figma Kaleidoscope

Have you ever seen a picture that’s composed of hundreds or thousands of smaller images (I believe the official term is photomosaic)? Now you can do that in Figma. Choose a photograph (the “big picture”), then open Figma and draw the icons that will serve as the smaller mosaic pieces. You can access our public GitHub repository and use our API to then render those shapes into a unique piece of pixelated art.

Lastly, Airbnb backend engineer Elena Nadolinski created this short video tutorial on how to use Figma’s API. Learn how to create your own Ethereum tokens that represent emoji art using a Figma file and Figma’s Web API.

Getting Started

Whew! That was a lot. We hope this epic screed of a blog gave you all the information you need to get started with our new API. For more details, check out our documentation here.

In case you can’t tell, we’re really excited to see what our community builds with this technology. If you create something with our platform, we want to hear about it. Give us a shout in the “Show and Tell” channel of our Spectrum user forum.