Related Videos

• Analyze engagement with Mixpanel

  Mixpanel is an intuitive interface that helps you quickly analyze user engagement, conversion, and retention, and make collaborative, data-driven decisions.

  You can use Mixpanel to:

  • Answer questions about product usage without the need for SQL
  • Measure average user retention (e.g. what % of new users return within 1 week)
  • Pinpoint where users drop off in critical flows (e.g. onboarding completion)
  • Segment users to dig deeper into key behaviors (e.g. “how often do power users adopt this new feature?”)
  • Build stories around data by adding context alongside metrics

  Try out the Mixpanel integration here using our Weekly Product Check-In template to collaborate around data with your team.

  Note: Support for Safari is currently in progress.

  Embed Mixpanel in a FigJam file

  Embedding a Mixpanel preview in FigJam allows you to bring data into your whiteboarding sessions. File previews are automatically synced with Mixpanel so the latest data changes in Mixpanel will be reflected in FigJam.

  Copy link from Mixpanel

  

  1. Open the Mixpanel board or report you want to embed in a FigJam file.
  2. Copy the URL or click the link icon in the top-right corner.

  Note: To give someone access to Mixpanel, invite them to your organization / project by following these instructions. Mixpanel is not paid by seat so adding users to your Mixpanel plan will not increase your cost.

  Embed Mixpanel in FigJam

  

  1. In a FigJam file, navigate to where you’d like to embed your Mixpanel preview.
  2. Paste the Mixpanel URL link. Figma may ask you to authenticate with Mixpanel to access the file.
  3. Now, anyone who has access to the report in Mixpanel will be able to see it in FigJam.

  Note: While you can have as many Mixpanel embeds you want in a FigJam file, only one can be live at any given time. This is a global FigJam setting that applies to any embed to make sure FigJam continues to run smoothly.

• Add Figma files to Google Calendar events

  Start meetings off on the right foot by connecting Google calendar to Figma. Use the Figma for Chrome extension to attach FigJam and Figma design files to your Google Calendar events and make every brainstorm, project kick off, and critique a jam.

  Get started

  1. Get the Figma for Chrome extension from the Chrome Web Store →
  2. Log in to your Figma account →
  3. Create an event in your Google Calendar →

  Create a new file

  

  1. Click Add FigJam board or Add Figma file.
  2. Click a New FigJam board or New Figma file.
  3. Give the file a name, then click Create file.

  Add existing files

  1. Click Add FigJam board or Add Figma file.
  2. Browse files from your Recents folder.
  3. Select one or multiple files.
  4. Click Add to event.
• Figma and Microsoft Teams

  Before you Start

  Who can use this feature

  Supported on all team and organization plans

  Anyone with can edit access to a FigJam file can edit the file via Microsoft Teams

  Anyone with can view or can edit access to a Figma design file can view and comment via Teams

  Anyone with can edit access to a file can see link previews of the file in Teams

  Microsoft Teams is a communication app for teams and organizations to connect, collaborate, and stay informed in one place. Use Teams to send messages, hold video conferences, and share important files and information. Learn more about Microsoft Teams →

  With the Figma app for Microsoft Teams, you can:

  • Present and collaborate in Figma design files, prototypes, and FigJam files with meeting attendees
  • Add Figma files as tabs to any Teams channel and interact with them
  • View a single feed of file comments, updates, and invites
  • Share file links in chat that unfurl the file name and file preview

  Use tabs to embed files

  Tabs in Microsoft Teams allow you to embed important files, apps, or services in Teams meetings or channels. Learn more about tabs →

  You can use tabs to embed Figma design files, prototypes, and FigJam files, and interact with them, without leaving Microsoft Teams. 

  • From Microsoft Teams, you can access all the functionality of FigJam files. For those with edit access, you can explore, add to, and edit FigJam files as you normally would.
  • Figma design files and prototypes are view and comment-only, even for people who have edit access to the file. You can click Open in Figma to open the file and edit from the web or desktop app.  
  • To allow others to see or interact with the file, you may need to adjust the file's sharing and permissions. FigJam files also have the option to start an open session to temporarily invite anyone to edit the FigJam file, including those without Figma accounts.

  Add a tab

  1. Start from one of the following places:
     • From a meeting: Click + Add app from the meeting controls
     • From a channel: Click + next to the tabs at the top of the channel
  2. Find and select the Figma app.
  3. From the modal, select Create FigJam file ↓ or Share existing file ↓ .

  Note: The + Add App option is available only in meetings that are scheduled. Unscheduled meetings created from a chat or channel will not have this capability.

  Create a FigJam file

  Select this option to create a new FigJam file so teammates can brainstorm and collaborate together, even if you don't have a Figma account.

  From the pop-up modal, give the FigJam file a name and click Save. A dedicated tab for the file is added to the channel or meeting.

  • If your Figma account is already connected to tabs in Microsoft Teams, this new file can be found in your personal drafts folder in Figma.
  • If a Figma account is not connected, you have 24 hours for someone to claim the file by clicking Save board in the FigJam file. If no one saves the board within 24 hours, the file is be permanently deleted.

  Share an existing file

  Select this option to share an existing Figma design file, FigJam file, or prototype.

  If you haven’t yet connected your Figma account for app tabs in Teams, you will be prompted to log in to your Figma account.

  From the pop-up modal, paste the link to the desired Figma design or FigJam file into the text box. If you’re creating a channel tab, use the checkbox to choose whether to post to the channel about the new tab.

  Click Save and a dedicated tab for the file is added to the channel or meeting.

  

  Note: Connecting your Figma account for tabs does not connect your account to receive Figma notifications. You will need to link your Figma account separately if you wish to receive Figma notifications ↓.

  Present file in meetings

  On Microsoft Team's desktop app, share your Figma file from the tab when you're ready to present it to meeting attendees:

  1. Select the tab for the file you want to share.
  2. Click Share to stage when you’re ready to present.

  

  Share links to chats and channels

  Drop links to Figma design and FigJam files in Teams chats and channels to reference designs, research, and other resources.

  The link will expand to show a preview, with the file name and thumbnail displayed below your message. 

  1. Copy link to Figma design or FigJam file. Learn how to copy links to a file →
  2. Paste link into a meeting or channel chat and send the message.

  Link previews will be seen by anyone whose Figma account has access to the file and is connected to receiving Figma notifications ↓.

  

  Get notifications

  Get notifications for updates to your Figma design and FigJam files in a single feed from the Figma app’s chat.

  • Get notified when someone comments and mentions you in files you follow
  • Get notified when someone invites you to a file
  • Reply to comments
  • Accept or decline invites to files, projects, and teams
  • (Organizations only) Get updates on branches and merges →

  Enable notifications

  To receive Figma notifications in Microsoft Teams:

  1. Click in the left sidebar.
  2. Find and select the Figma app.
  3. From the app’s chat box, type Connect and send the message. Follow the prompts to connect your Figma account.
  4. Once connected, type On into the chat box and send the message to enable notifications.

  You’ll begin receiving any new comments, mentions, and invitations in this chat.

  Manage notifications

  To manage Figma notifications in Microsoft Teams, type and send the following commands into the app’s chat:

  • On to start receiving notifications on updates from your Figma account
  • Off to stop receiving further Figma notifications
  • Connect to connect your Figma account to the Figma notifications feature
  • Disconnect to disconnect your Figma account from the Figma notifications feature. This only prevents you from receiving further notifications via the chat. This won’t affect any files you’ve added to tabs.

  Note: Using @mentions when replying to a comment from Microsoft Teams is currently not supported.

• AWS Amplify Studio and Figma

  Before you start

  Who can use this feature

  Supported on Education, Professional, Organization, and Enterprise plans.

  Anyone with can edit access to a file, project, or team can subscribe a channel to that resource.

  Anyone with can edit access to a file can see previews of the file in Slack.

  AWS Amplify Studio lets you go from Figma design to feature-rich, full-stack web apps in hours, on AWS.

  Designers and developers use Amplify Studio to work collaboratively on development tasks and ensure pixel-perfect implementation of your Figma designs.

  Typically, front-end developers spend a lot of time incrementally making minor UI code tweaks to match provided designs. Designers need to verify that new implementations match the designs. This can lead to inefficiencies and suboptimal end user experiences due to compromises made to ship on time.

  With AWS Amplify Studio, developers can automatically import UI component designs from Figma as code. The generated components are familiar to any React developer and offer the same flexibility as hand-authored components, with mechanisms to modify component properties.

  Amplify Studio’s Figma Integration:

  • Automatically converts your UI component designs into clean React code.
  • Lets your developers select from a library of prebuilt UI components, such as news feeds, contact forms, and e-commerce cards, and primitives such as buttons, text ares, and alerts, which can be fully customized within Figma.
  • Generates UI components that follow accessibility best practices and are themeable using a Figma plugin to match your brand’s look-and-feel.
  • Lets your developers easily connect the generated UI components to existing backend data.

  Import a Figma UI design to AWS Amplify Studio

  Step 1: Set up Figma file

  To get started, simply link your Amplify Studio project to a Figma file. While you can link any Figma file to Amplify Studio, for the best end-to-end experience, we recommend starting with our template Figma file. To start from scratch, simply duplicate our Figma UI file.

  Step 2: Link Figma file in Amplify Studio

  In Amplify Studio, enter the URL for the Figma file you created or duplicated. You will be asked to authenticate with Figma.

  

  After authenticating with Figma, you will see a list of components that you can sync with Amplify Studio.

  Select Accept all to import all components, or walk through them individually to ensure they are visually acceptable.

  Once you complete the sync, you will see a list of components that have been imported.

  All previews of the components are live renders of the coded UI components. You can open your developer tools inspector to confirm.

  

  Step 3: Pull UI components code into your project

  In Amplify Studio, choose a component and select Configure to get to the component editor screen. Select Get component code at the bottom of the page.

  Go to the Initial project setup tab and follow the setup instructions.

  

  Amplify Studio generates all UI component code into src/ui-components, as JSX and TS files. All generated code is built with primitives from the Amplify UI library.

  Although you have access to inspect the component code, you cannot modify it directly as Amplify Studio will override any changes on the next amplify pull.

  Once the amplify pull command downloaded all UI components to your src/ui-components folder, you can use the components anywhere in your app. Learn how to customize these UI components in code.

  
    import { ComponentA, ComponentB }  from './ui-components';
  

  
  Need help using AWS Amplify Studio? Check out the AWS Amplify Studio docs or join the Discord community at discord.gg/amplify.