Asana provides clarity to help orchestrate your organization’s work, from strategic tasks to daily initiatives.

With Asana you can:

Plan the work that needs to get done with tasks, milestones, and goals.
Align your team on the most important work and how it ladders up.
Determine who is responsible for what and when its due.
Understand and report on how your progress is tracking towards your plan.

By using Asana and Figma together, you can create, collaborate, and bring organization to your projects, regardless of the tool you’re in.

Embed a file in Asana

Teams use Figma to create user flows, wireframes, UI mocks, prototypes, and more. You can embed these files in Asana, so everyone on your team can reference your designs in the context of the related project work. Unlike static screenshots, live embeds update in real time to reflect changes made in a file.

This functionality is available as part of Asana’s Project Brief feature.

In Figma

Open the file you want to embed in your Project Brief.
To link to a specific frame in the Figma file, select the frame.
Click the Share button in the toolbar.
Check the box to Link to selected frame (Optional).
Update your link sharing permissions to determine who can view and interact with the file embed (Optional).
Click Copy link when you're ready to embed the file.

In Asana

Open the project where you'd like to embed a Figma file.
Go to the Overview tab.
In the Key Resources section, click Create a Project Brief. If there's already a Project Brief, click anywhere on the title.
When the Brief opens, click Edit in the top right.
Click the place in the Brief you'd like to embed.
Paste in the Figma link and a preview will expand below it.
You can also click the + icon to the left of the line you're on and choose Insert Media. Paste the Figma link into the box and click Embed link.

Learn more about interacting with embedded Figma files →

Remove a Figma file from Asana

To remove a Figma file from your project, remove the file link from the Project Brief.

Open the project you'd like to remove the file from.
Go to the Overview tab.
Open the Project Brief you want to remove the file from.
Click Edit near the top right corner.
Select and delete the link for the Figma file.
Click Done to apply your changes.

Learn more about this partnership in Asana’s app directory →

Use the Asana widget in Figma

The Asana widget brings your Asana projects and tasks directly into Figma or FigJam, so you can discuss them as a team or place them in the context of your designs.

You can also create next steps or action items for your team at the end of a meeting by turning stickies into Asana tasks.

You can start using the Asana widget after authenticating it in a FigJam board or Figma design file. Learn more about using widgets in files →

Add Asana projects and tasks to files

With the Asana widget open, copy and paste an Asana project or task URL to add it to a Figma design file or FigJam board. Pasting a portfolio URL will add all of its associated projects to the file.

After adding an Asana project to Figma, you can:

View the project's name, owner, due date, and any associating description
Import tasks from that project to Figma
Add a new task to the project

After adding an Asana task to Figma, you can:

View or update the task's name, assignee, due date
Expand the task to see its description and metadata by clicking on it

Any changes that are made, such as re-assigning a task to someone else or completing a task, will be synced to Asana. You can see the last time Asana was synced at the bottom of the project or task. Or, manually sync any updates by selecting Sync.

You can also add stickies from a FigJam board as tasks in an Asana project.

Select one or more stickies.
Choose Turn stickies into tasks on the Asana project you wan to add the tasks to.

The selected stickies will be added as tasks to that project.

···