Figma is a web-based design tool. It helps you create and test stunning designs on a virtual canvas with real-time collaborations.
The integration with the prototyping tool Figma offers you the ability to export wireframes and designs, now while displaying them in online interactions, for the delight of the participants. Thus, by first building the prototype in Figma, you can share it later in any meeting in Sessions.
The integration helps you tackle the problem of switching between platforms or sharing links and screens. You showcase the work done in Figma to anyone present in a virtual meeting.
Installing the Sessions plugin
If it’s the first time you use Figma in Sessions, follow these steps:
- Go to Home → Tools → Figma.
- Click on New Figma.
- Click on Get plugin.
- Click on Try it out.
- You’ll be redirected to Figma. Click on Run.
- Click on Sync with Sessions.
- Allow your Sessions account to sync with your Figma account.
- Once the sync is complete, you’ll be notified that Figma was successfully added to your Sessions account.
- Click on Go to Figma to access your account.
Exporting Figma designs:
- Select the wireframe(s) you want to export from Figma.
- Right-click on the frame.
- Select Plugins → Sessions.
- Click Export.
- Open Sessions in a new tab.
- Go to Home → Tools.
- Select Figma.
- You’ll find here the list of your exported designs.
How to embed a Figma frame during a live session (no agenda):
- Press
Ctrl + K
/Command + K (iOS users)
or click on the Share button (bottom left corner). - If the Figma frame has been previously exported, type in its name in the input box. If not, type in “Figma” or click on Embed a tool.
- Click on Figma.
- Choose one of the recently used Figma frames listed there or click on Open Figma.
- You’ll be redirected to try out the Sessions plugin.
- Follow the instructions listed under Installing the Sessions plugin and Exporting Figma designs.
❌ To remove a Figma frame and return to standard conference mode, hover over the button showing the name of your file (bottom left corner). Click Remove file.
Alternative: Click Alt + R
/Option + R (iOS users)
How to add a Figma frame to an agenda item (during a live session):
If you have an agenda already embedded in the live meeting and you want to include a Figma frame, this is how you can do it:
- Press
Alt* + Z
or hover over the button named after your current agenda item (bottom left corner). - Click on Edit agenda (
Alt* + Z
) - Click on ➕ to add a new agenda item.
- Click on the Share button on the new agenda item.
- If the Figma frame has been previously exported to Sessions, type in its name in the input box. If not, type in “Figma” or click on Embed a tool → Figma.
- Choose one of the recently used Figma frames or click on Open Figma.
- You’ll be redirected to try out the Sessions plugin. Follow the instructions listed under Installing the Sessions plugin and Exporting Figma designs.
*Option (iOS users)
❌ To remove the tool, file or link you've attached to an agenda item, follow these steps:
- Press
Alt + Z
/Option + Z
or hover over the button named after your current agenda item (bottom left corner). - Click on Edit agenda (
Alt + Z
/Option + Z
). - Click on the ⊖ button next to the tool/file/link you want to remove.
How to add a Figma frame to an agenda template (before a session starts):
- Go to Sessions Home → Agendas.
- Click on New agenda.
- Click on the Share button that's attributed to an agenda item.
- If the frames have been previously exported to Sessions, type in their names in the input box. If not, type in “Figma" or click on Embed a tool.
- Click on Figma.
- Choose one of the recently exported frames or click on Open Figma.
- You’ll be redirected to try out the Sessions plugin. Follow the instructions listed under Installing the Sessions plugin and Exporting Figma designs.
- Done. Changes are automatically saved.
❌ To remove the tool, file or link from an agenda item, click on Remove tool or check one or more agenda items’ boxes and then click on Remove tool.