Well — your creativity didn’t take long to incubate. Within days, you flooded our Twitter timeline with impressive creations. From style guide generators to Alexa-Echo integrations, people are adapting the API to many workflows.
We wanted to round up some of the coolest projects we’ve seen in the few short weeks since our API launch. Thanks to those of you posting your work on our Show & Tell channel on Spectrum, and special shout out to people open sourcing their projects for others to use.
Note: The integration creators provided the images and GIFs to Figma.
These are the projects people built that can be used right off the bat by others — even those without programming skills. Stick a Figma URL in a website form, and make magic happen (keep in mind these are all 3rd party integrations, so Figma isn’t responsible for permissions’ settings or maintaining the integrations).
With this new API integration you can export frames in your Figma designs as a PDF. Just select a frame, then copy paste the file URL into this website form. If you want to build an exporter for yourself, just fork the open-sourced GitHub project built by Gweltaz Calori.
Paste a link to your Figma document on this website form, and this generator will build a style guide page based on all the fonts, colors and other styles you used. Read more details on how it works here on Spectrum, from its creator Liam Martens, Founder of Freighter design studio.
While we doubt any designer will actually use Alexa to read comments left on their design (feel free to prove us wrong), this example pushes the limits of what we imagined people building with Figma’s API. And if you hook your Figma account up to a similar voice activated function, show us what you do with it! It was built by Jon Gold, a Design Technologist at Airbnb.
Are you an engineer wondering where to start with the Figma API? A web-based design API can make it much easier to automate your design-developer handoff. Check out these projects for inspiration.
One of the API opportunities we are most excited about is the potential for automatically converting Figma to other frameworks. We’re already seeing it: PageDraw introduced a React integration for others to use, and Sara Vieira, a front end developer from Portugal, built a way for React components to be rendered directly from a Figma file using the aforementioned GraphQL connector she worked on (💪).
Florian Nagel, software engineer at Candis, also created his own Figma →React converter, and he’s working on open-sourcing it.
To automate asset delivery, the design and development team at Volvo Car Mobility used the Figma API to simplify their workflow. With custom Slack commands, a designer or developer can initiate the process, and behind the scenes a web service creates a new branch in a GitHub repository.
From there, the web service uses the Figma API to export icons in a specific document with export settings for the frames that contain the icons. The user can view the event log and URL for the branch to create the pull request, all within Slack. Creator: Volvo Car Mobility team
If you are using Passport in your Node.js application to authenticate, you can build your service so people can sign in with their Figma identity with this module from Liam Martens (he also built the style guide generator 🙌).
This is only a fraction of the integrations people are producing. It will be interesting to see the scope of these efforts evolve over time, and what role they play in shaping design workflows for both individuals and teams.
We’re going to continue these integration highlights in future round ups, so if you’re working on something cool give us a holler in our Show & Tell channel over on Spectrum ! And if you’re looking to get started, check out our developer documentation here.