jambot orig medium
Last week, Figma launched its first AI Figjam widget, Jambot.
With this launch, Figma marks a significant milestone, as it’s their first move into AI tools integration into their products.
This is the first time they showed an AI tool in Figma since their recent acquisition of Diagram.
For those unaware, Diagram is the company behind some of the most advanced AI Figma plugins like Magician.
In this article, I will provide a complete overview of the widget so you can become familiar with it and understand how it can assist you in your design processes.
What is Jambot?
Jambot is a widget developed by Figma for Figjam. This widget uses the power of Open AI (the company behind ChatGPT) to help designers enhance their productivity on Figjam. With 11 features, Jambot allows users to brainstorm ideas, ask questions, receive answers, summarize information, and more.
Jambot, available as an open-beta widget in FigJam (Figma’s whiteboard software), is ideal for brainstorming sessions, rewriting content, gathering information, and other creative tasks.
One practical application of Jambot is in user interviews. For instance, it can help you generate many questions, accelerating the interview preparation process.
What is unique about the Jambot widget
Having experimented with various tools like ChatGPT and other AI apps, I’ve noticed that not all achieve seamless AI integration. Software companies often add an open chat interface without truly integrating AI.
What sets the Figma Jambot widget apart is its great integration. Users can easily link sticky notes to the widget, prompting specific actions. The widget also provides predefined tasks, allowing users to execute them without in-depth instructions.
Uniquely, the widget stays open after executing a task. This allows continuous work and iteration.
While it’s not the perfect solution, it’s remarkable how the Figma team prioritized workflow and innovation. Moreover, the widget’s versatility stands out, as users can leverage its features in various ways for solutions.
How to open the widget
Features of Jambot: A Comprehensive Overview
The widget offers 11 features. Let’s explore them one by one.
1. Ideate
The ‘Ideate’ feature assists in generating ideas for any concepts you input. Simply write your concept on a sticky note, connect it to the widget, and click “Ideate.” Upon activation, the widget generates ideas tailored to your concept.
This process is efficient as you can simply connect a sticky note to the plugin and click “Ideate” without crafting a full prompt, saving time and effort. For instance, after entering “Help users work faster in my vector app” into the sticky note, I received five suggestions from the app.
Here are two examples the widget generated:
1. Introduce a feature that automatically suggests and applies keyboard shortcuts based on the user's most frequently used functions.2. Implement a time-saving tool that allows users to apply a pre-defined set of styles or effects to multiple objects at once.
2. Quick question
When you have a question, link the widget to a sticky note and pose your query.
Suppose you’re developing a desktop application and want to explain the importance of shortcuts to stakeholders. You can write your query on a sticky note and use the ‘Quick Question’ feature to ask:
"Why is it important to add shortcuts to a desktop app?"
The widget would then provide an answer like:
"It is important to add shortcuts to a desktop app because they enhance user efficiency and productivity. By providing quick access to frequently used features or actions, shortcuts enable users to navigate through the app more swiftly and perform tasks with fewer clicks or mouse movements. This can greatly improve the overall user experience and save valuable time. Additionally, shortcuts can also help users with accessibility needs by providing alternative ways to interact with the app, such as using keyboard combinations instead of relying solely on mouse interactions. Overall, incorporating shortcuts into a desktop app is crucial for optimizing usability and empowering users to work more effectively."
Then, you can leverage this insightful response to convince your stakeholders successfully.
3. Teach me about this
While participating in a design thinking workshop, you might come across a term on a sticky note that’s new to you, like “Skeuomorphic Design.”
Instead of interrupting the session or leaving Figjam, simply link the widget to the sticky note and select “Teach me about this.” The widget will instantly provide the information you need.
4. Give me
The “Give Me” functionality offers a predefined set of actions in categories like people, places, history, events, and statistics.
I’ve been looking for a concrete application for this tool. For instance, when I linked the Sticky Note labeled “Shortcuts” and tapped on ‘history,’ I was presented with historical facts about shortcuts — not quite what I expected.
I haven’t harnessed the full potential of this feature. If you’ve found a novel or effective way to use it, I’d love to hear about it in the comments.
5. Rabbit hole
The “Rabbit Hole” feature offers a deeper exploration of topics. By attaching and executing a task, users are presented with various options to research further into the subject.
For instance, when inputting “Skeuomorphic Design,” the feature provided options such as:
- Skeuomorphic design in UI/UX- Definition and origins of skeuomorphic design- Examples of skeuomorphic design in digital interfaces- Advantages and disadvantages of skeuomorphism in design- Skeuomorphism vs flat design:a comparison- The future of skeuomorphic design trends
Selecting “Examples of skeuomorphic design in digital interfaces” displays:
"Examples of skeuomorphic design in digital interfaces include the use of faux leather textures in calendar apps, virtual bookshelves in e-readers, and virtual knobs and switches in music production software. These design elements aim to mimic the physical counterparts of real-world objects, providing users with a sense of familiarity and ease of use. However, as technology evolves, many digital interfaces have shifted towards a more minimalist and flat design aesthetic, departing from skeuomorphic elements in favor of simplicity and functionality."
The “Rabbit Hole” feature can be valuable for those seeking comprehensive insights into a topic or requiring guidelines for an in-depth understanding.
6. Similar stuff
This feature suggests topics related to the content of your sticky note. After inputting “Skeuomorphic Design,” the widget provided five related suggestions.
1. Flat Design: Flat design is a design approach that focuses on minimalism, simplicity, and the absence of any three-dimensional effects or skeuomorphic elements.2. Material Design: Material design is a design language developed by Google that combines skeuomorphic and flat design elements, aiming to provide a more realistic and tactile experience while maintaining a modern and streamlined look.
7. Summarize
This feature offers a concise summary of information. You can select bullet points or a TL;DR (Too Long; Didn’t Read) format.
For example, I took a text from my article “A complete guide to executing a great design to development handoff” and asked it to summarize it in bullet points.
The original text from the article reads:
"Establish a great working relationship and communicate effectively with the developers.Building excellent communication between you and the developers to make the handoff process easier and more efficient is a must. In that way, there will be fewer things to deliver. The team members will have a shared understanding of the product, so each team member will help solve issues in advance. For Example, it will lead you to think about the development challenges when designing the solution.This is an ongoing process, not a single point of work. Therefore, take the time to ensure the communication between you and among developers is effective. Previously, I discussed it in another article. You can find it here."
Based on the summary feature, the text was summarized into the following key points:
- Establish a great working relationship with developers- Communicate effectively with developers- Build excellent communication to make the handoff process easier and more efficient- Foster a shared understanding of the product among team members- Encourage proactive problem-solving and consideration of development challenges during solution design.
8. Rewrite this
This feature lets you easily rewrite text in various styles or tones. Connect a sticky note, write your desired tone or style, and see the transformation.
To illustrate, let’s take the previous text about “Establish a great working relationship and communicate effectively with the developers” and rewrite it with a funny twist.
Get ready to establish a killer relationship with those developers and start communicating like there's no tomorrow!Let's face it, a smooth handoff process is the key to success. And how do we achieve that? By developing a superpower called communication. It's like magic, but without the rabbits and top hats.When you and the developers are on the same page, delivering things becomes a breeze. Think about it: less time wasted on misunderstandings and more time for celebratory high-fives.But wait, there's more! With excellent communication, you'll have a team of problem-solving geniuses at your disposal. They'll anticipate issues before they even happen, like mind-reading wizards in coding armor.Remember, this isn't a one-time deal. Communication is an ongoing process, like trying to convince your cat that your lap is the comfiest spot in the world. So take the time to make sure everyone is singing from the same coding hymn sheet.And hey, if you missed my previous article on this topic, fear not! I've got you covered. Just click here and brace yourself for some communication gold.
Unsure about which styles to use? Here’s a list to inspire you:
Descriptive, Informative, Persuasive, Conversational, Formal, Casual, Humorous, Narrative, Instructional.
9. Turn this into a
This feature allows you to transform the information on a sticky note into various formats, such as songs, jokes, poems, stories, or haikus.
I view it as an experimental feature rather than a mainstay in my design process.
To demonstrate, I linked the widget to a sticky note titled “Skeuomorphic Design” and requested a joke.
Here’s the result, although, honestly, the joke’s quality could be better:
"Why did the designer refuse to embrace Skeuomorphic Design?Because they didn't want their designs to look all "old school"!"
10. Code this up
This feature allows for extracting code from text. While its practical applications seem niche, it can benefit designers in specific scenarios.
For instance, when I requested HTML code for a green button, I received the following results:
<!DOCTYPE html><html><head><style>.button { background-color: green; color: white; padding: 12px 24px; text-align: center; display: inline-block; font-size: 16px; border: none; cursor: pointer;}</style></head><body><button class="button">Click me</button></body></html>
11. Custom
Like ChatGPT, the Custom option in Jambot allows you to write any prompt you desire. In response, Jambot generates content based on your specific request.
Jambot pricing
Currently, you will be able to use the widget free of charge.
The Importance of Cross-Checking AI-Generated Information
While AI offers powerful tools, it’s essential to remember that they aren’t infallible.
In my blog posts and courses, I consistently emphasize the importance of using AI responsibly.
Though these systems are powerful, their outputs are not always 100% precise. For instance, if you’re explaining a design component like a toggle button based solely on AI-generated content, you might convey incomplete or inaccurate details.
Always collect information from multiple sources and understand the subject thoroughly.
Figma also touches upon this in their article Use AI tools in Figma.
Before diving into any AI tool, familiarize yourself with this information.
To summarize
In this article, I showed you how to work with Jambot, the Figjam widget that works with AI.
We covered what the plugin is, how it works, and all 11 features it has, including examples and use cases.
Ultimately, I mentioned the importance of working with AI responsibly so you can be accurate and get the most from it.
Here are some resources to further explore the Widget
- Use Jambot in FigJam from the Figma website
- Give ideas more space with Jambot by Amber Bravo
- Figma’s New AI Tool — Jambot | Figma A.I Update by Punit Chawla (Video)