Figma integration: user guide

Learn to set up and use Chameleon's Figma integration

Chameleon Team avatar
Written by Chameleon Team
Updated over a week ago

With our Figma integration, you can launch your designs & prototypes from Chameleon Experiences. Share exciting new features you're building to teach users about upcoming changes in an engaging format.

Easily ensure a native look with a simple way to style each Experience component in Figma and leverage your designs next in Chameleon.

Availability & Usage

πŸ” Available on the Enterprise plan

πŸ“ Ready to power your Tours, Tooltips, Microsurveys

βš™οΈ Enable from the Dashboard

With our Figma integration you can effectively bridge the gap between product development and feature discovery, as well as feedback implementation.

Use our Figma integration to introduce your users to upcoming features or exciting improvements you're working on. Or rally your designers to create a branded style for all your Chameleon Experiences, with our Chameleon components file.

To use the Figma integration in your Experiences, head over to the Dashboard's Figma page and enable the integration first. Then you'll find it in the Builder to use anytime you want to.

On the Figma integration page, you'll also find the option to get a Figma file containing Chameleon Experience components.

You can share this file with your designers to help you design your Experiences in Figma before building them in Chameleon.

πŸ‘‰ You can also access this Figma file on the Styling page.

Anytime you want to share a Figma prototype with your users, you can launch it from a button (or a media) with the additional Actions feature. Simply select the Figma option and paste your link in there. Your Figma file will open in a full-screen modal after a user clicks your button.

Leverage the Figma integration to introduce users to new features or upcoming changes in your product. Next, you can show them a Microsurvey to see what they think of them or invite them to book a call for a short conversation.

Surprise users with valuable insight and allow them to take a peek at something exciting you're working on. They'll always appreciate the heads up, and you can use this opportunity to learn more about the impact of your efforts πŸ˜‰

You can share the "Chameleon Figma Components" file with your designers to establish a branded style across all your Chameleon Experiences before setting your Detailed Styling in the Dashboard. This is also useful when approaching new use cases with your team, to make it easier to incorporate in-app Experience design in your usual flows.

Once you open the file in Figma, you'll be able to update the style with your brand colors and fonts, applying your style to all Experiences: Tours, Tooltips, Microsurveys, Launchers, and HelpBar.

Simply add your brand colors under "Local variables" and find the option to add your fonts under "Local styles". You'll see these applied to all Experiences and you can easily leverage these next:

  • in the Dashboard to set your Brand Basics or adjust your Detailed Styling

  • to create branded Templates on your account so any in-app stays native

Get your Chameleon Figma Components file and see more detailed instructions inside.

Did this answer your question?