Figma + Asana

What is Figma?

Figma is where teams design together. Figma helps teams ideate, create, test, and ship better designs from start to finish. Teams use FigJam, an online whiteboard for teams, to brainstorm, diagram, and have fun as a team.

Why Figma + Asana?

While plans and concepts come to life in Figma and FigJam, Asana is where ideas become structured tasks. Asana and Figma work together to help teams move work forward—no matter which tool they’re in.

In Figma and FigJam, you can use the Asana widget to pull Asana projects and all their associated tasks into the canvas to discuss as a team. Wrap up meetings with clear next steps by selecting and instantly converting stickies into Asana tasks.

In Asana, you can embed your designs in projects, so your team can reference the latest design work in context and alongside related project documents. And, unlike screenshots, live embeds update in real-time to reflect changes made in a design file, eliminating the overhead that comes with finding the right files and updating images.

How to connect Figma + Asana

Here’s how to create and review Asana tasks in Figma and FigJam:

1. Click 'Install Asana for Figma' at the top right of this page and select Figma or FigJam. You will be taken to a new file with the widget centered in the viewport.
2. To bring an Asana project into the editor, select “Import” on the widget and paste in the URL of the project you’d like to import. You'll be prompted to sign into your Asana account once you do this.
3. To edit a task or see more details, select the task and then select “Show meta data” in the tool bar
4. To turn stickies into Asana tasks, select one or more stickies, then select “Convert selected stickies to tasks” on the widget.

Note: In FigJam, pasting an Asana URL will automatically convert the task to a widget on the canvas, once the user has been authenticated

Here’s how to embed Figma files in Asana:

1. Open the Figma file you'd like to embed
2. Click the “Share” button on the top right
3. Click “Copy Link” in the dialog that appears
4. In Asana, open the project where you'd like to embed a Figma file
5. Go to the “Overview” tab
6. In the Key Resources section, click “Create a Project Brief” (note: if there's already a Project Brief, click anywhere on the title)
7. When the Brief opens, click “Edit” on the top right
8. Click the place in the Brief you'd like to embed
9. Paste in the Figma URL and a preview will expand below
10. Alternatively, click the “+ icon” to the left side of the line you're on and choose “Insert Media”
11. Paste the share URL into the box and click “Embed link”

Learn more and get support

Learn more about all the ways you can use Asana and Figma together in the Figma Help Center.

If you have questions, feedback, or need support, contact the Figma support team.

Collaborate effortlessly with Asana

From the small stuff to the big picture, Asana organizes work so teams know what to do, why it matters, and how to get it done. It’s free to get started, simple to use, and powerful enough to run your entire business. Learn more about Asana today