At Figma, we believe in an open design platform because it allows teams to customize the way they work. An open API means teams can integrate Figma with other tools they use throughout the product development process, resulting in a more effective workflow.
While products can be designed end-to-end in Figma, you likely need to work with developers and product managers to build, test, and ship these products. And this work often happens in tools that are specifically built for those purposes. With an open platform, you can easily bring your Figma designs into these tools.
Below, we’re sharing some recently-launched integrations that make it easier to bring Figma into different stages of your product development process, whether you're collecting feedback, collaborating with developers, or looking to quickly take designs to production.
Confluence
We recently launched private Figma embeds which allow you to embed live Figma files into tools like Notion, Jira, and Dropbox Paper. Embeds are now supported in Confluence, a team workspace where product teams collaborate on documentation, plan new features, and stay up-to-date with ongoing projects.
Product specs and requirements are the central source of truth for developers. Since they often refer back to these documents while building a new feature, it’s crucial that everything is up to date. Embedding Figma files and prototypes within Confluence pages means that the most recent designs show up in context, so you no longer have to constantly update product screenshots.
Start using embedded files in your next Confluence page.
GitLab
As developers work through sprints, they need a way to easily manage ongoing tasks while triaging new requests and issues. Product teams use GitLab to track tasks and review changes as they build, test, and deploy code.
With the new GitLab plugin, designs can be uploaded directly from Figma into a GitLab issue, making it easy for developers to version them, review them in context, and provide feedback. Not only does this save time, it allows your team to tackle the task at hand more effectively.
For more details on how to install and use Gitlab’s plugin, check out this video.
Avocode
Teams typically use Avocode during the handoff process to share, inspect, and collaborate on designs. Since unveiling their custom Figma integration in 2019, Avocode has updated and released their integration as a new plugin.
The plugin helps designers specify dev-ready designs by syncing them to a project in Avocode. While designers continue to iterate on other in-progress or exploratory work, developers can access all layers in the finished Figma designs inside Avocode. This allows them to export all assets, grab values such as measurements and color codes, or copy entire code snippets in ten different languages, including CSS, CSS in JS, or React Native. Not having to jump from tool to tool to get relevant design details simplifies the handoff process so your team can quickly go from design to code.
Get all the details about how to install and use Avocode's re-launched plugin.
Pendo
Sharing wireframes and prototypes with the right customers early on can help your team identify critical issues well before they invest resources in building out a product or feature. Pendo is a tool used by product managers to surface feedback from customers throughout the development process.
Pendo’s integration pulls in live designs from Figma files so you can present new features or proposed updates to targeted, specific user segments while they’re active in in your product. While discussing a new feature with collaborators and internal stakeholders is important, getting customer feedback at scale can help your team understand and anticipate your user’s reactions before you build and launch a new feature.
After designers share wireframes and prototypes with the team, product managers use the Pendo integration to embed these prototypes in specific places within a product to get early and targeted feedback from users. After users interact with the Figma file, teams can use Pendo to collect feedback via survey questions and open-text responses, or schedule user research interviews. By sourcing user feedback early and often, you can ensure that the features you build address customers’ needs.
Start embedding Figma files in your next Pendo in-app guide.
Bubble
With Bubble, teams can turn designs into web apps without having to write code, shortening the time between design and implementation.
To begin, your team can start collaborating on designs in Figma, either starting from scratch or building on top of a published community file. Once those designs are ready, you can import them directly from Figma using Bubble’s integration. Every frame from the file will create a new page in your Bubble app and every vector will be uploaded as an image.
After the transfer is complete, you and your team can continue refining within the Bubble app by adding logic, workflows, and database capabilities to your designs. Not needing to write lines of code will help your team quickly get from prototypes to production-ready interactive apps for desktop and mobile web browsers.
Check out the Bubble integration and get started importing Figma frames.
Maker
Marketing teams can use Maker, a no-code platform, to create enhanced content for e-commerce sites—importing directly from Figma.
With Maker, everything from Figma becomes a fully editable block for you and your team. You’ll be able to convert designs from Figma to create and publish new landing pages, enhance sections of existing pages, A/B test various design ideas easily, and deliver personalized experiences to your customers. This frees up time for developers on your team from having to code your designs and puts marketers in the driver’s seat.
You can learn how to convert your Figma files into web pages with the Maker integration.
Start collaborating
We’re excited to see what you build with these integrations. If you’re looking for more ways to customize how your team uses Figma, choose from our growing list of product integrations, build a custom integration, and check out thousands of files and plugins available in the Figma Community.
Related Content
