The Figma platform is where teams collaborate on design projects. It helps teams create, test, and ship better designs from the very beginning to the very end. FigJam is an online whiteboard used by teams to brainstorm, diagram, and have fun while working together.
While plans and concepts are fleshed out in Figma and FigJam, Asana is where structured tasks are created. No matter what tool a team is using, Asana and Figma work together to move work forward.
The Asana widget in Figma and FigJam allows you to bring Asana projects and all their associated tasks into the canvas for group discussion. Asana tasks can be instantly converted from stickies to Asana tasks to ensure that meetings are concluded with clear next steps.
Asana allows you to embed your designs in projects, so your team can reference the latest design work alongside related project documents. In addition, unlike screenshots, live embeds reflect changes in a design file in real-time, saving you the time and effort associated with finding the right files and updating them.
Connecting Figma and Asana
This is how you can create and review Asana tasks in Figma and FigJam:
-
For an easy access to this integration, Click 'Install Asana for Figma' at the top of this page and select Figma or FigJam. As soon as you click the button, you will be taken to a new file with the widget centered. If you prefrer to visit Asana's page directly, click here.
-
Choose "Import" on the widget and paste the URL of the Asana project you'd like to import into the editor. When you sign in, Asana will prompt you to sign in.
-
To edit a task or see more details, select the task and then select “Show meta data” in the tool bar
-
The widget allows you to convert stickies into Asana tasks by selecting one or more stickies, then selecting "Convert selected stickies to tasks.".
Note: Once the user is authenticated in FigJam, pasting an Asana URL will automatically convert the task to a widget.
To embed Figma files in Asana, follow these steps:
-
Open the Figma file you'd like to embed
-
Click the “Share” button on the top right
-
Click “Copy Link” in the dialog that appears
-
Open the Asana project where you'd like to embed a Figma file
-
Go to the “Overview” tab
-
Click "Create a Project Brief" in the Key Resources section (if a Project Brief already exists, click anywhere on it).
-
On the top right of the Brief, click "Edit"
-
Click the place in the Brief you'd like to embed
-
Paste in the Figma URL and a preview will expand below
-
If you prefer, click on the "+ icon" to the left of the line you're on and select "Insert Media."
-
Paste the share URL into the box and click “Embed link”
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 accomplish it. It's free to get started, easy to use, and powerful enough to run your entire business. Find out more about Asana today