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.
• 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.

• Get Figma notifications in Slack

  The Figma integration for Slack was updated on March 8, 2022! Now, you can get notifications about specific Figma files, projects, and teams in any Slack channel ↓. 

  If the Figma app was installed to your Slack workspace before this date, a Slack workspace owner needs to approve and re-authorize the Figma app in order for members to use the updated version. Members can also re-authorize the Figma app, but requires an owner to approve the app's new permissions first.

  Before you start

  Who can use this feature

  Supported on all team and organization 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.

  Stay on top of updates to Figma files, projects, and teams by installing the Figma integration for Slack. With the Figma integration in Slack, you can:

  • View a single feed of Figma comments you’ve been mentioned in
  • Get timely feedback from teammates and stakeholders
  • Customize Slack channels with updates on specific projects and teams, or conversations happening in relevant files. 

  Figma notifications in Slack come in two types: default notifications and channel subscriptions.

  Default notifications ↓ appear on your Figma app channel and include comments you've been mentioned in and invitations to files, projects, and teams.

  With channel notifications ↓, you can customize your Slack channels to receive notifications on specific files, projects, and teams. Notifications can include comments, mentions, branching updates, new files, and new projects. Learn more ↓

  

  Set up

  To set up your Figma app integration in Slack:

  1. Add the Figma app to your Slack workspace ↓.
  2. Once added, connect your Figma account to Slack ↓ to receive notifications and create channel subscriptions.

  If you want to use the Figma integration in multiple Slack workspaces, you'll need to repeat the set up process in each workspace. 

  Add Figma app to Slack

  Any Slack workspace member can install apps to the Slack workspace. However, Slack owners and admins can restrict this ability.

  Add the Figma app to your Slack workspace from the Slack App Directory.

  1. Navigate to the Apps section of your Slack workspace.
  2. Click or Add apps. 
  3. Search Figma in the directory.
  4. Install the Figma app and authorize access to your Figma files.

  Learn more about adding apps to your Slack workspace →

  Once you’ve successfully added the Figma app to your Slack workspace, any member of the Slack workspace can connect their Figma account and subscribe channels to notifications.

  Tip! In the Figma app channel, type help and hit send to see tips on using the Figma integration in Slack.

  Connect your Figma account to Slack

  If the Figma app has been added to your Slack workspace, be sure to connect your Figma account to Slack.

  1. Open the Figma app in Slack workspace.
  2. Click Connect your account. A tab will appear prompting you give Figma access to Slack.
  3. Click Allow.

  Get default notifications

  After set up is complete, you’ll start receiving these notifications by default:

  • Comments you’ve been mentioned in 
  • Files, projects, and teams you've been invited to

  Default notifications show up in your Figma app channel.

  You can turn these notifications on and off at any time.

  Manage default notifications

  To turn your default notifications from Figma on or off in Slack:

  1. Navigate to the Figma app channel.
  2. Type:
     • off or stop in the text field to turn notifications off
     • on or start in the text field to turn notifications on
  3. Press return or enter to send the message.

  Manage email notifications for comments in Figma →

  Get channel notifications

  Receive updates on specific Figma files, projects, and teams in your Slack channels. You can subscribe channels to updates on any resource where you have can edit access, and customize the frequency of notifications for each subscription.

  The types of notifications a channel receives depend on the resource type:

  Notification	File	Project	Team
  Comments, replies, @mentions	✓
  Branching: merge requests, approvals, and changes suggested	✓	✓	✓
  New files added to project		✓	✓
  New projects added to team			✓

  Here are some ways to make the most out of channel notifications:

  • Create new channels dedicated to receiving notifications on project-specific files. This allows main channels to be used for conversation, minimizing channel noise.
  • Notify your team channel of newly added files to a Figma project or team. This avoids needing to send file links over Slack or email every week for weekly meetings or retros.
  • Customize a Slack channel with updates on conversations happening in relevant files.

  Add Figma app to a channel

  If the Figma app hasn’t been added to a channel, you’ll need to add it first before you can create subscriptions.

  1. Open the Slack channel you want to receive Figma notifications.
  2. Type /invite @figma and press enter or return.

  Once Figma has been added, you can create subscriptions for that channel.

  Create a channel subscription

  Before you create a subscription in a Slack channel, make sure you’ve added the Figma app to the channel.

  To create a subscription for a Slack channel to receive updates on a Figma resource:

  1. Open the Slack channel.
  2. Type /figma subscribe and press enter or return. A modal appears for you to configure your subscription.
  3. From the modal:
     1. Choose the type of source you want updates for: file, project, or team.
     2. Find your resource using the search bar.
     3. Choose how often updates on this resource will be delivered: real time, hourly, or daily.
        • For daily notifications, choose a specific time for them to be delivered to the channel.

  Subscriptions are created one at a time. Repeat the process above to create more subscriptions. Each channel can have unlimited subscriptions, and multiple channels can be subscribed to the same resource.

  Comments made within 10 minutes of each other will be batched in a single Slack message instead of individual messages.

  Remove a channel subscription

  To stop receiving notifications about updates on a file, project, or team in a channel, you can remove the subscription:

  1. Open the Slack channel you wish to remove a subscription from.
  2. Type /figma list and press return or enter. A list of the channel’s subscriptions will appear.
  3. Click delete subscription next to the subscription you wish to no longer receive notifications.

  You can subscribe again at any time ↑

  Remove Figma from Slack

  To completely remove the Figma integration, you will need to disconnect the app from your Slack workspace.

  Learn how to remove apps from your Slack workspace →