{"id":10716,"date":"2024-09-06T18:09:51","date_gmt":"2024-09-06T18:09:51","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=10716"},"modified":"2024-09-07T22:20:41","modified_gmt":"2024-09-07T22:20:41","slug":"how-to-use-figma-ai","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/how-to-use-figma-ai\/","title":{"rendered":"How to make the most of Figma AI: the best features, functions and plugins"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">If Figma is a main player in your UX\/UI tool stack, you may be excited to learn that this versatile platform now comes with some AI superpowers.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Figma is investing heavily in AI, with the goal of empowering designers to work faster, level up their problem-solving abilities, and ultimately create even better user experiences.\u00a0<\/span><\/p>\n<p><b>So what exactly is Figma AI and how can you use it to supercharge your UX process?\u00a0 <\/b><span style=\"font-weight: 400;\">Keep reading to discover the best AI features, functions, and plugins for Figma and FigJam.\u00a0<\/span><\/p>\n\n<h2><strong>What is Figma AI and how can you use it?<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Back in June 2023, Noah Levin, Vice President of Product Design at Figma, wrote about the potential of AI to transform the entire product development process.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In his article, <\/span><a href=\"https:\/\/www.figma.com\/blog\/ai-the-next-chapter-in-design\/\" target=\"_blank\" rel=\"noopener\"><i><span style=\"font-weight: 400;\">AI: The next chapter in design<\/span><\/i><\/a><span style=\"font-weight: 400;\">, Levin anticipates that AI will \u201cplay a central role in how teams work in Figma, helping them get to a first draft faster and then design and build through to great products.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Over the past few years, Figma has established a team dedicated solely to machine learning, and invested heavily in the development of Figma\u2019s AI capabilities.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Figma community has also been busy building AI-powered plugins to enhance the platform\u2019s functionality and add a touch of AI magic. Now, there are almost 100 AI plugins available for Figma. Impressive!<\/span><\/p>\n<p><b>So, when we talk about Figma AI, we\u2019re referring to:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">AI-powered features that have been developed by Figma\u2019s own team and built into the platform itself (available in FigJam, Figma\u2019s collaborative whiteboard tool). <\/span><\/li>\n<\/ul>\n<ul>\n<li><span style=\"font-weight: 400;\">AI plugins that have been built by members of the Figma community using Figma\u2019s open API.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Note that, at the time of writing, Figma\u2019s built-in AI features are available in FigJam, while Figma\u2019s AI functionality comes from third-party plugins.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re not familiar, <\/span><a href=\"https:\/\/www.figma.com\/design\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Figma<\/span><\/a><span style=\"font-weight: 400;\"> is your standard design and prototyping tool; <\/span><a href=\"https:\/\/www.figma.com\/figjam\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">FigJam<\/span><\/a><span style=\"font-weight: 400;\"> is a collaborative digital whiteboard used for brainstorming, meetings, workshops, and planning. Both products are available with all price plans and account types.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">With that, let\u2019s explore some of the best AI features, functions, and plugins available in both Figma and FigJam\u2014and how you can use them throughout the <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/ux-design-process\/\"><span style=\"font-weight: 400;\">design process<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<h2><strong>How to make the most of Figma AI: the best features, functions, and plugins<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Anyone with a Figma account can use Figma AI. And, unless you\u2019ve manually opted out of beta AI features (in your account settings), you\u2019ll automatically have access to new AI features as soon as they become available.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ready to unlock Figma\u2019s AI capabilities? Let\u2019s jump in.\u00a0<\/span><\/p>\n<h3><strong>1. Generate boards and diagrams with FigJam AI<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">FigJam is where teams come together to brainstorm, share ideas, align on decisions, and collaborate more efficiently.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, thanks to AI, preparing and building FigJam boards for team exercises and workshops has never been easier (or faster).\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Instead of manually setting up the individual components of your FigJam board, you can use text prompts to generate whatever canvas you need\u2014be that a meeting board, a workshop exercise, a diagram, mind-map, or flow chart.\u00a0<\/span><\/p>\n<h4><strong>How to generate boards and diagrams with FigJam AI:<\/strong><\/h4>\n<ol>\n<li><span style=\"font-weight: 400;\"> Open a blank canvas in FigJam and click the \u2018Generate\u2019 icon in the top toolbar (the sparkle-style icon next to the timer):<\/span><\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-10720\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-22-at-11.45.15.png\" alt=\"Screenshot of a blank canvas in FigJam \" width=\"1274\" height=\"706\" title=\"\"><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_product-design-programmep-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/product-design?utm_source=blog&amp;utm_medium=%20blog_panel_text&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN PRODUCT DESIGN (UX &amp; UI)]<\/p>\n                    <span>Enrol now in our Product Design Programme<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<ol start=\"2\">\n<li><span style=\"font-weight: 400;\"> Select one of the suggested templates that appear in the drop-down, or click the \u2018Let\u2019s make a\u2026\u2019 field if you want to prompt the AI to create something unique.\u00a0<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Type your prompt into the text field. For example: \u201cAn ideation session with an icebreaker exercise, a \u201cHow might we?\u201d question in the middle, and space for five team members to note down their ideas.\u201d\u00a0<\/span><\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-10790\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-23-at-16.08.29.png\" alt=\"Screenshot showing how to type your prompt into the text field\" width=\"970\" height=\"766\" title=\"\"><\/p>\n<p>4. Click \u2018Generate\u2019 and watch your board come to life. You can then customise the board to suit your needs, or try a new prompt if the output isn\u2019t quite what you had in mind.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10793 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/E6EB166F-B1E6-4C08-AAFF-2394A8CB021D.jpeg\" alt=\"Screenshot of boards on FigJam\" width=\"1283\" height=\"578\" title=\"\"><\/p>\n<p>As is always the case with generative AI, the quality and accuracy of the output typically depends on the input. When using FigJam AI for the first time, be prepared to experiment with different prompts to learn what works best.<\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-diploma-in-ux-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ux-design?utm_source=blog&amp;utm_medium=blog_panel_pdux&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UX]<\/p>\n                    <span>Take our Professional Diploma in UX Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h3 class=\"s18\"><strong><span class=\"s17\">2<\/span><span class=\"s17\">. Sort and summarise stickies with FigJam AI<\/span><\/strong><\/h3>\n<p>If you\u2019ve ever hosted a collaborative workshop or brainstorming session in FigJam, you\u2019ll know that the most difficult\u2014and most time-consuming\u2014part usually comes after the event when you\u2019re left to organise and make sense of all the resulting sticky notes.<\/p>\n<p>This is where a touch of AI magic can really save you some time. You can use FigJam AI to automatically sort your stickies into categories, and to generate summaries that help you better group and understand the content of your stickies.<\/p>\n<p>Both of these functions are a great help when it comes to synthesising messy, unstructured qualitative data on your FigJam board. Let\u2019s explore how they work.<\/p>\n<h4 class=\"s20\"><strong><span class=\"s19\">How to sort sticky notes with FigJam AI:<\/span><\/strong><\/h4>\n<p>1. Select all the individual sticky notes on your board that you want FigJam AI to sort, then click \u2018Organize\u2019 on the toolbar that pops up.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10794 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/0BDFCDFA-FE1F-4CD7-AFC7-D47C092778A5.jpeg\" alt=\"Screenshot of how to sort stickies on FigJam\" width=\"1316\" height=\"1072\" title=\"\"><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_product-design-programmep-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/product-design?utm_source=blog&amp;utm_medium=%20blog_panel_text&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN PRODUCT DESIGN (UX &amp; UI)]<\/p>\n                    <span>Enrol now in our Product Design Programme<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<p>2. You\u2019ll see two options labelled \u2018AI beta\u2019. Click on \u2018Sort stickies\u2019. FigJam AI will create a copy of each sticky note from your selection and organise them into categories in a new section of the board.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10795 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/FAB4F4ED-15D7-4182-88B2-F2FDC5D0CB19.jpeg\" alt=\"Screenshot of how to sort stickies on FigJam\" width=\"999\" height=\"1244\" title=\"\"><\/p>\n<p class=\"s26\">3. Review FigJam AI\u2019s suggested categorisation and manually adjust as necessary. Again, AI outputs can\u2019t be counted on for complete accuracy, so you\u2019ll need to evaluate the results with a critical human eye.<\/p>\n<h4 class=\"s20\"><strong><span class=\"s19\">How to summarise sticky notes with FigJam AI: <\/span><\/strong><\/h4>\n<p>The second handy AI feature available in FigJam is auto-generating summaries of your sticky note content. To do this:<\/p>\n<p>1. Select the sticky notes you want to summarise and then click \u2018Organize\u2019 on the toolbar that pops up. This time, select \u2018Summarize\u2019 from the dropdown.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10796 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/BD123452-9CDB-454D-94F7-4743BCF6A29C.jpeg\" alt=\"Screenshot of how to summarise sticky notes on FigJam\" width=\"1291\" height=\"1051\" title=\"\"><\/p>\n<p>2. FigJam AI will then create a written summary of the content featured on the stickies you highlighted, like so:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10798 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/50AE4015-5095-41E9-A855-D9D6856B8C96.jpeg\" alt=\"Screenshot of FigJam AI creating a written summary of content \" width=\"1296\" height=\"1147\" title=\"\"><\/p>\n<p class=\"s26\">It\u2019s not possible to edit these summaries\u2014and, as usual, they might not be completely accurate or logical. However, they provide a great starting point for quickly making sense of the content on your board and understanding the different themes covered within your data.<\/p>\n<h3 class=\"s18\"><strong><span class=\"s17\">3. Get creative with Jambot (FigJam\u2019s ChatGPT-style widget)<\/span><\/strong><\/h3>\n<p>If you enjoy using ChatGPT as a sparring partner for coming up with ideas, you\u2019ll be pleased to meet Jambot.<\/p>\n<p>Jambot is a FigJam widget that brings the generative power of ChatGPT right to your FigJam boards. First we\u2019ll show you how to find and run the Jambot widget, and then we\u2019ll explore some of the different ways you can use it.<\/p>\n<h4 class=\"s20\"><strong><span class=\"s19\">How to find and run the Jambot widget:<\/span><\/strong><\/h4>\n<p>1. In FigJam, navigate to the main menu (the F icon in the top-left corner), select \u2018Widgets\u2019 and then click \u2018Manage widgets\u2019.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10799 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/36260BC1-16A4-4163-9BAC-CECBDCA1504A.jpeg\" alt=\"Screenshot of how to find an run the Jambot widget in FigJam\" width=\"1300\" height=\"751\" title=\"\"><\/p>\n<p>2. Type \u2018Jambot\u2019 into the search field and select the Jambot widget by Figma:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10801 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/06A50461-D01B-49B9-B59A-10FD0913398E.jpeg\" alt=\"Screenshot of typing jambot in to search bar \" width=\"1344\" height=\"1252\" title=\"\"><\/p>\n<p>3. The Jambot widget will appear on your board, with a list of available functions:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10802 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/0B97B5B6-429D-4B16-83DB-EDBBC3E5CC42.jpeg\" alt=\"Screenshot of the Jambot Widget\" width=\"1095\" height=\"983\" title=\"\"><\/p>\n<p class=\"s26\">Now let\u2019s explore some of those functions.<\/p>\n<p class=\"s20\"><strong><span class=\"s19\">How to ideate with Jambot:<\/span><\/strong><\/p>\n<p>Let\u2019s say you\u2019re planning an ideation session with your team.Here\u2019s how you could use Jambot\u2019s \u2018Ideate\u2019 function to support you in the process.<\/p>\n<p>1. Select \u2018Ideate\u2019 from the list of available functions. A sticky note will appear with some sample text, which you\u2019re going to edit to put in your own prompt:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10803 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/273D6EB3-570D-4A1D-8057-18162B2C64C4.jpeg\" alt=\"Screenshot of how to ideate with Jambot\" width=\"1303\" height=\"665\" title=\"\"><\/p>\n<p>2. Double-click on the sticky and type your own prompt, for example: \u201cFun ideation exercises for a team brainstorming session.\u201d Click \u2018Ideate\u2019 to activate the prompt.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10804 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/EFEC519C-BD3F-47F4-A43E-4B69F1C99F80.jpeg\" alt=\"Screenshot of ideation \" width=\"1286\" height=\"522\" title=\"\"><\/p>\n<p>3. Based on your prompt, Jambot will generate a series of new sticky notes with ideas. You can copy individual stickies to a separate board, or run a new prompt if you\u2019re not happy with the output.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10805 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/730394D8-10CD-4143-BBCD-35BE0FE79A03.jpeg\" alt=\"Screenshot of Jambot generating a series of new sticky notes \" width=\"1338\" height=\"788\" title=\"\"><\/p>\n<p class=\"s20\"><strong><span class=\"s19\">How to use <\/span><span class=\"s19\">Jambot<\/span><span class=\"s19\"> as an educational tool: <\/span><\/strong><\/p>\n<p>Another useful Jambot feature is the \u2018Teach me about this\u2019 function. Let\u2019s say you want to learn more about one of the ideation techniques generated as a response to your previous prompt. Here\u2019s how you\u2019d go about it:<\/p>\n<p>1. Select the sticky note whose content you\u2019d like to learn more about, then select \u2018Teach me about this\u2019 from the list of available functions:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10806 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/F51E33B2-4DB0-44C2-A025-2A8075790DD8.jpeg\" alt=\"Screenshot of how to use Jambot as an educational tool \" width=\"1307\" height=\"862\" title=\"\">2. Jambot produces another sticky explaining the technique in more detail, including why it\u2019s useful:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10807 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/A94E7A68-0143-4BB9-A8A2-603313A9AD89.jpeg\" alt=\"Screenshot of Jambot producing another sticky explaining technique in more detail\" width=\"1313\" height=\"721\" title=\"\">3. Now let\u2019s imagine you like the sound of this ideation technique and definitely want to use it for your brainstorming workshop. You could use the \u2018Rewrite this\u2019 function to generate step-by-step instructions.<\/p>\n<p class=\"s26\">In this case, you\u2019d select \u2018Rewrite this\u2019 from the list of available functions, type \u2018as step-by-step instructions\u2019 into the text field, then click \u2018Rewrite it\u2019 to generate a response:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10808 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/BCF51E06-CF69-4ACF-A44A-027CE0CA56E9.jpeg\" alt=\"Screenshot of how to instruct Jambot to rewrite the idea\" width=\"1309\" height=\"701\" title=\"\">4. Jambot then generates a list of step-by-step instructions and advice for how to use the role reversal ideation technique effectively:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10809 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/B2721DC7-79D2-47A6-9B08-A10B815BE87E.jpeg\" alt=\"Screenshot of Jambot generating a list of instructions and advice \" width=\"1295\" height=\"1072\" title=\"\">You can use the \u2018Teach me about this\u2019 function to learn about anything, regardless of previous prompts and outputs. For example, you might start a new Jambot interaction to learn about accessible design. To do this:<\/p>\n<p class=\"s26\">1. Select the \u2018Teach me about this\u2019 function from the Jambot list and write the topic you want to learn about in a new sticky note. Click \u2018Teach me\u2019 to execute the prompt:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10812 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/CA18757C-79D6-448E-9D3E-9E6FBD563000.jpeg\" alt=\"Screenshot of the Teach Me About It Feature in Jambot\" width=\"1292\" height=\"555\" title=\"\">2. As before, Jambot will generate a new sticky note explaining the concept you want to explore. You could then use the \u2018Rewrite this\u2019 function to generate accessible design guidelines. To do this, click on \u2018Rewrite this\u2019 from the list of available actions:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10814 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/D599C4A0-33C5-46FE-AFC0-89C5FD105456.jpeg\" alt=\"Screenshot of new sticky note explaining the concept you want to explore\" width=\"1311\" height=\"770\" title=\"\">3. Enter your new prompt, for example: [Rewrite this as] step-by-step guidelines (focusing on websites and apps). Then click \u2018Rewrite it\u2019 to activate the prompt:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10815 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/8243655F-FDEA-408C-8561-D2E992CD16C8.jpeg\" alt=\"Screenshot of how to enter a new prompt on Jambot\" width=\"1308\" height=\"973\" title=\"\"><\/p>\n<p class=\"s26\">As you can see with this example, the output isn\u2019t entirely relevant. We specified in our prompt that the accessible design guidelines should focus on websites and apps, yet the output mentions designing physical spaces that are wheelchair accessible. An important reminder to be critical and cautious when using AI!<\/p>\n<p class=\"s26\">Still, many of the guidelines provide useful points that you could research and explore further.<\/p>\n<p class=\"s26\">We\u2019ve covered just some of Jambot\u2019s AI functions and features. You can learn more about <a href=\"https:\/\/www.figma.com\/blog\/give-ideas-more-space-with-jambot\/\" target=\"_blank\" rel=\"noopener\"><span class=\"s2\">how Jambot was created and what it\u2019s capable of<\/span><\/a> over on the Figma blog.<\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-certificate-in-ui-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ui-design?utm_source=blog&amp;utm_medium=blog_panel_text&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UI DESIGN]<\/p>\n                    <span>Take our Professional Certificate in UI Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h3 class=\"s18\"><strong><span class=\"s17\">4<\/span><span class=\"s17\">. Speed up your design process with the QoQo plugin for Figma<\/span><\/strong><\/h3>\n<p>Next we move on to the wonderful world of Figma plugins\u2014of which there are now almost 100 offering AI functionality!<\/p>\n<p>One of the most popular among them is the <a href=\"https:\/\/www.figma.com\/community\/plugin\/1189158575928509194\/qoqo-ai-ai-generated-wireframe-ux-personas-journey-mapping-sitemap-and-copywriting\" target=\"_blank\" rel=\"noopener\"><span class=\"s2\">QoQo plugin<\/span><\/a>. Powered by OpenAI (the same technology behind ChatGPT), QoQo can generate all manner of design deliverables\u2014from wireframes and personas to user journey maps, design briefs, user interview questions, and beyond.<\/p>\n<h4 class=\"s20\"><strong><span class=\"s19\">How to set up the QoQo plugin for Figma<\/span><\/strong><\/h4>\n<p>QoQo is a third-party plugin; an add-on that enhances the functionality of the standard Figma tool. As such, you\u2019ll be required to create a separate QoQo account in order to run the plugin.<\/p>\n<p>To get set up:<\/p>\n<p>1. Log in to Figma, open a new design file, and navigate to \u2018Plugins \u2014&gt; Manage plugins\u2019 from the main menu (the F icon in the top-left corner):<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10816 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/39D2C510-C93D-4877-B59D-60D2A318F3C0.jpeg\" alt=\"Screenshot of How to set up the QoQo plugin for Figma\" width=\"1314\" height=\"877\" title=\"\">2. Search \u2018QoQo\u2019 and select it from the results. This will open a pop-up where you\u2019ll be asked to create an account with QoQo, or log in if you\u2019ve already got one. You can use QoQo for free with a two-day trial. After that, you\u2019ll need to pay to continue using it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10817 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/59B1066B-1D33-4C1D-8B42-855EE4AF2947.jpeg\" alt=\"Screenshot of the free trial from QoQo\" width=\"1311\" height=\"881\" title=\"\">Now you\u2019ve got QoQo set up, let\u2019s explore how you can use it to speed up certain aspects of the UX design process.<\/p>\n<h4 class=\"s20\"><strong><span class=\"s19\">How to use QoQo to generate solutions based on user pain-points:<\/span><\/strong><\/h4>\n<p>If you\u2019ve already conducted <a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/user-research-in-ux-design\/\"><span class=\"s2\">user research<\/span><\/a> and identified user pain-points, you can use the \u2018How might we\u2019 function to generate ideas and solutions.<\/p>\n<p>1. With the QoQo plugin running in Figma, you can see all possible functions if you expand the left-hand side bar (by hovering over it with your mouse). Select the \u2018How might we\u2019 function:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10818 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/6BEC96C0-FCEB-47AD-87DF-AF1D79CA262D.jpeg\" alt=\"Screenshot of the design review page\" width=\"1305\" height=\"1012\" title=\"\"><\/p>\n<p>2. Enter your user pain-points into the text field, formulated as a \u2018how might we\u2019 question. For example: [How might we] \u2018make it easier for UX students to view their course progress within the online learning platform\u2019.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10819 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/8DB437A3-DE98-4D68-A77F-F399A140337A.jpeg\" alt=\"Screenshot of entering a pain point into QoQo\" width=\"1300\" height=\"599\" title=\"\"><\/p>\n<p>3. Click \u2018Generate\u2019 and QoQo will come up with multiple solutions, like so:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10820 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/62B30B5C-9575-4BA7-BF22-0030D88D3F85.jpeg\" alt=\"Screenshot of QoQo providing soloutions\" width=\"1300\" height=\"965\" title=\"\">4. You can then export the solutions to Figma for further exploration. Click \u2018Export\u2019 and select \u2018Export to Figma\u2019 from the dropdown:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10822 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/FC35E382-F11F-4A34-B621-071103D43B95.jpeg\" alt=\"Screenshot of exporting solutions from QoQo to Figma for further exploration. \" width=\"1288\" height=\"581\" title=\"\"><\/p>\n<p>Once you close the QoQo window, you\u2019ll see each solution presented as an individual sticky note in your Figma board:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10823 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/46A9AF5A-1FCD-4828-AF11-7F90CE9049BC.jpeg\" alt=\"Screenshot of solutions displayed in Figma on sticky notes. \" width=\"1295\" height=\"844\" title=\"\">You might then use these ideas for inspiration during a team ideation session, or run a workshop to vote on and prioritise the different solutions suggested.<\/p>\n<h4 class=\"s20\"><strong><span class=\"s19\">How to use QoQo AI to generate a design brief:<\/span><\/strong><\/h4>\n<p>You can also use QoQo to speedily create design briefs based on your input. Here\u2019s how:<\/p>\n<p>1. Select the \u2018Design brief\u2019 function from the left-hand side bar, then start by filling out the \u2018Project information\u2019 section. Ideally, you\u2019ll have some notes from the project kick-off meeting to help you with this section:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10824 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/5B018908-860D-4813-93FA-ADD94FFFAD6A.jpeg\" alt=\"Screenshot of Design Brief function in Figma\" width=\"1394\" height=\"487\" title=\"\"><\/p>\n<p><span class=\"s4\">Tip: <\/span>Click \u201cTry example\u201d to get an idea of what kind of information to include in this section and how to formulate it.<\/p>\n<p>2. Next, fill in the \u2018Persona demographics\u2019 section. This should provide key characteristics of your target audience, based on real <a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-are-ux-personas\/\"><span class=\"s2\">UX personas<\/span><\/a> you\u2019ve created through user research:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10826 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/8731CD44-7982-495F-A285-F115F7492726.jpeg\" alt=\"Screenshot of the persona demographics section within Figma\" width=\"1308\" height=\"600\" title=\"\">3. Click \u2018Generate\u2019 and the AI will create a design brief in a matter of seconds.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10827 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/092C6637-417E-47AF-801E-EDF1DA352C20.jpeg\" alt=\"Screenshot of an AI brief within Figma\" width=\"1348\" height=\"800\" title=\"\">4. As with all AI-generated deliverables, we recommend using QoQo\u2019s design briefs as a template or guideline. Export the project brief to Figma (using the Export button, as before) and customise the content as necessary:<\/p>\n<div id=\"attachment_10828\" style=\"width: 1336px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-10828\" class=\"wp-image-10828 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/4240F295-5E74-4A9D-98BD-C39B919D4709.jpeg\" alt=\"\" width=\"1326\" height=\"1136\" title=\"\"><p id=\"caption-attachment-10828\" class=\"wp-caption-text\">Screenshot of a design brief within Figma<\/p><\/div>\n<p>Once you\u2019re happy with it, share the brief with all relevant stakeholders and use it to keep everybody aligned.<\/p>\n<p>We\u2019ve covered just a few handy features available with QoQo AI\u2014there\u2019s a lot more you can do with it! Set up the plugin in your own Figma board and explore how it can help you in the early stages of design.<\/p>\n<h3 class=\"s18\"><strong><span class=\"s17\">5. Auto-generate designs with the AI Assistant plugin<\/span><\/strong><\/h3>\n<p>Imagine if you could whip up fully-editable UI designs in seconds\u2026Well, with the <a href=\"https:\/\/www.figma.com\/community\/plugin\/1234140943476658588\/text-to-design-ai-assistant\" target=\"_blank\" rel=\"noopener\"><span class=\"s2\">AI Assistant plugin<\/span><\/a> created by Figma user Ollie Martynov, you can do just that!<\/p>\n<p>This all-powerful plugin offers some great AI shortcuts to save you time and streamline the design process, including:<\/p>\n<div class=\"s16\"><span class=\"s11\">\u25cf <\/span>Generating fully-fledged designs based on text prompts<\/div>\n<div class=\"s16\"><span class=\"s11\">\u25cf <\/span>Turning screenshots, sketches, or wireframes into professional, ready-to-use designs<\/div>\n<div class=\"s16\"><span class=\"s11\">\u25cf <\/span>Converting your designs into code<\/div>\n<p>Let\u2019s explore one of the most useful AI Assistant features for designers: Text-to-Design.<\/p>\n<h4 class=\"s20\"><strong><span class=\"s19\">How to auto-generate designs using the Text-to-Design feature:<\/span><\/strong><\/h4>\n<p>1. Log into Figma and run the AI Assistant plugin (you can do this via the \u2018Manage plugins\u2019 menu available in the main Figma menu in the top left-hand corner).<\/p>\n<p>This will open up a chat-style window where you can enter your design prompt. For example: \u2018Generate a profile-building page for a dating app\u2019:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10829 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/5BA45A35-4077-464F-955E-76F5D91C4357.jpeg\" alt=\"Screenshot of text to design AI assistant in Figma\" width=\"1346\" height=\"1129\" title=\"\"><\/p>\n<p>2. You can then click \u2018Add to Figma\u2019 to export the design to your Figma board. From there, you can customise the basic design provided by double-clicking on various elements. For example, you can edit the button text and form fields, and adjust the position of each element.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10830\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/7E3762A0-C78F-4ECC-AA03-C95875559873.jpeg\" alt=\"Screenshot of a design sample Figma produced for creating a profile\" width=\"857\" height=\"838\" title=\"\"><\/p>\n<p>3. If you\u2019re not quite happy with the output, experiment with more specific, prescriptive prompts. For example: \u2018Generate a customisable screen for the profile-building page of a dating app. Include separate fields for the user to fill in their name, pronouns, age, dating goals, location, hobbies, and bio. The final call to action should read &#8220;Create my profile.&#8221; Generate the design using a pink and blue colour scheme.\u2019<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10831 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/9EDFB35E-12AA-4E71-8AB4-E1D9D3200ECA.jpeg\" alt=\"Screenshot of experimenting with different prompts within Figma Text To Design feature\" width=\"1342\" height=\"1074\" title=\"\"><\/p>\n<p>Again, you can export the output to Figma and adjust it as needed.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10832 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/08\/849D208E-957E-4428-8A59-D8DAA76BC55F.jpeg\" alt=\"Screenshot of adjusted designs within Figma Text To Design feature \" width=\"1320\" height=\"903\" title=\"\"><\/p>\n<p>You\u2019ll notice that the designs aren\u2019t perfect\u2014and nor should you expect them to be. AI-generated designs, such as those created with the AI Assistant plugin, serve as a basic foundation on which to build. They can speed up the process of mocking up low-fidelity designs, but they won\u2019t suffice as a final design solution.<\/p>\n<p>As always, use the AI Assistant plugin (and other Figma AI tools) as a handy shortcut; not a complete replacement for your own creativity and design expertise.<\/p>\n<h2 class=\"s14\"><strong><span class=\"s13\">Learn more about AI for UX\/UI design <\/span><\/strong><\/h2>\n<p>We\u2019ve explored just a few AI features and plugins available in Figma. There are many more plugins available via the <a href=\"https:\/\/www.figma.com\/community\" target=\"_blank\" rel=\"noopener\"><span class=\"s2\">Figma community<\/span><\/a>, and we eagerly anticipate that Figma will continue to expand their AI featureset. Watch this space!<\/p>\n<p>Of course, Figma is just one of many <a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/ui-ux-design-tools\/\"><span class=\"s2\">popular UX\/UI design tools<\/span><\/a> offering AI-powered capabilities. If you\u2019d like to learn more about how AI is shaping the UX industry and affecting how UX designers work, check out these articles:<\/p>\n<div><span class=\"s11\">\u25cf <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/will-ai-replace-ux-designers\/\"><span class=\"s2\">Will AI replace UX designers? <\/span><\/a><\/div>\n<div><span class=\"s11\">\u25cf <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/ways-to-use-ai-in-ux-design\/\"><span class=\"s2\">5 ways you can use AI to be a better UX designer<\/span><\/a><\/div>\n<div><span class=\"s11\">\u25cf <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/the-top-ux-design-trends-in-2024\/\"><span class=\"s2\">The top UX design trends and what they mean for UX designers (with a focus on the rise of AI)<\/span><\/a><\/div>\n<p>If you\u2019re keen to embrace AI in your UX design workflow, here are more tools and resources to get you started:<\/p>\n<div><span class=\"s11\">\u25cf <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/the-top-8-ai-tools-for-ux\/\"><span class=\"s2\">The top 8 AI tools for UX design (and how to use them)<\/span><\/a><\/div>\n<div><span class=\"s11\">\u25cf <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/top-ai-tools-for-user-research\/\"><span class=\"s2\">The best AI-powered tools for user research<\/span><\/a><\/div>\n<div><span class=\"s11\">\u25cf <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/best-ai-tools-for-content-design\/\"><span class=\"s2\">6 must-have AI tools for content design<\/span><\/a><\/div>\n<div><\/div>\n<div><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"\/\/www.youtube.com\/embed\/GfF-d5X0pGo?si=7A5RwMeV8iF0VuXr\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>What is Figma AI and how can you use it in your design process? Learn about the best Figma AI features, functions, and plugins for UX and UI designers.<\/p>\n","protected":false},"author":22,"featured_media":10721,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[384],"tags":[],"class_list":["post-10716","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai-in-ux"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/10716","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=10716"}],"version-history":[{"count":34,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/10716\/revisions"}],"predecessor-version":[{"id":10879,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/10716\/revisions\/10879"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/10721"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=10716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=10716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=10716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}