Figjam AI Archives - gettectonic.com
New Approaches to UI UX

New Approaches to UI UX

Ever-Updating Collection of New Approaches to UI/UX in the AI Era Dials, Knobs, and Sliders Physical knobs, digital sliders, and quadrant “dials” are being used to fine-tune AI responses and inputs. For example, Figma’s new Figma Slides features a novel UX where you can adjust the tone of generated text with a slider. Moving the orange indicator lets you blend between casual and professional tones, or concise and expanded content. This idea was spotted in a demo shared by Twitter user Johannes Stelzer. While I don’t have all the details, the concept is fantastic. For a personal example, I built a Chrome extension that summarizes any webpage. You can adjust the length of the output using sliders. Want a four-word summary? Slide it down. Prefer a detailed essay? Slide it up. Node-and-Edge Graph LangGraph Studio uses a node-and-edge system to visualize logic flows in LangChain Agents. Each node represents a “micro-agent” completing a specific task, and the edges show the connections between them. This modular approach allows users to build complex agents from simple, connected building blocks. The Infinite Canvas An infinite canvas provides an open, continuous workspace for limitless creativity. Examples include Figma, FigJam, TLDraw, and Visual Electric. Here’s a peek at Visual Electric’s canvas in action. Figma and FigJam also use this concept to inspire creativity. In one example, Julie W. Design is brainstorming with FigJam AI on an infinite canvas. Another example combines Claude’s Artifacts and TLDraw’s infinite canvas for nearly instant site-building capabilities. Voice Input While voice input isn’t new, it feels more natural within AI chat interfaces, popularized by OpenAI’s ChatGPT. David Lam points out that voice input works seamlessly with this mental model of a chat interface. Dot by New.Computer integrates voice input elegantly, alongside its text-based interactions. Notably, the interface includes a “pinch-out” gesture to access a hidden card view, showcasing Jason Yuan’s mastery of fluid, innovative UI design. Visual Interface AI tools are also embracing visual input. For example, OpenInterpreter uses a webcam to “read” a sticky note held up by Killian, then connects to Wi-Fi based on the written info. Side-by-Side Layout In this UI approach, a chat window appears on the left while results or outputs are shown on the right. This layout works well on desktop but requires swipes or tabs for mobile. Here are a few examples: Whole-Body Interface This example demonstrates how MediaPipe tracks body gestures to produce results. While it may rely on machine learning more than traditional AI, the outcome is undeniably cool! Like Related Posts Salesforce OEM AppExchange Expanding its reach beyond CRM, Salesforce.com has launched a new service called AppExchange OEM Edition, aimed at non-CRM service providers. Read more The Salesforce Story In Marc Benioff’s own words How did salesforce.com grow from a start up in a rented apartment into the world’s Read more Salesforce Jigsaw Salesforce.com, a prominent figure in cloud computing, has finalized a deal to acquire Jigsaw, a wiki-style business contact database, for Read more Health Cloud Brings Healthcare Transformation Following swiftly after last week’s successful launch of Financial Services Cloud, Salesforce has announced the second installment in its series Read more

Read More
FigJam AI

FigJam AI

Recently Edward Chechique explained FigJam AI, an AI flowchart generator. Below is a summary of this article originally published at uxdesign.cc Over the past three years, the author has extensively researched and tested how product designers can use generative AI technology to improve efficiency and accuracy in their design workflows. Although this journey is still in its early stages, designers must integrate AI into their design processes today. This integration will enable them to work more efficiently and with greater precision. Common AI tools on the market include ChatGPT, Gemini, and Midjourney, showcasing key features of artificial intelligence technology. Additionally, many new tools are launched daily. Apart from the new AI tools, there are tools not originally AI-based, like Figma and Miro. These tools have started to add AI capabilities, enhancing their utility. This article aims to show how designers can use FigJam AI, an efficient AI flowchart maker, to create flowcharts. In the words of designers: “Stop moving rectangles and invest in creativity.” This encapsulates the author’s goal. What is FigJam AI? FigJam AI is an AI tool that Figma added to FigJam. It helps cluster information, generate design thinking workshops, organize information, summarize information, and more. For a more detailed look at this AI feature, check out the author’s article about FigJam AI. Step-by-Step Introduction to Figjam AI for Better Design Collaboration Enhancing Design Team Workflows with Figjam AI The Importance of Detailed Prompts When teaching students how to use AI, the author emphasizes the importance of providing the AI with exact instructions. Without this, the desired results may not be achieved. This highlights a significant difference from traditional work processes. Often, traditional methods don’t start with a clear end solution but involve experimenting, adjusting designs, and refining the vision over time. In contrast, AI requires precise instructions from the beginning. The examples provided illustrate this point. During the process, small changes in the prompt can significantly affect the results, demonstrating the importance of clear and specific instructions. Generate Flowcharts from Text The author conducted several tests with FigJam AI to illustrate the process. Starting with simple prompts and gradually moving to more sophisticated approaches, here are three key tests: Test 1: Happy Flow The author began with a simple flowchart for buying a T-shirt in an online store to see if the AI could generate a complete flow from it. Prompt: Act like a product designer and create a Flow chart for the process of buying a T-shirt in an e-commerce store: Create only this flow. Do not add anything else. Result: The AI created exactly what was asked, making the creation process more efficient by eliminating the need to manually adjust “rectangles,” streamlining the diagram creation. Test 2: Flow with One Error The second test aimed to see if the AI could add a condition to the flow for cases where something does not work correctly. Prompt: Act like a product designer and create a Flow chart for the process of buying a T-shirt in an e-commerce store: Take into account the error case: Promo Code does not work. Create only this flow. Do not add anything else. Result: The AI accomplished the task exactly as requested and added the error case to the flowchart creation. Test 3: Flowchart with Three Errors The next step was to see if the AI could handle three error cases. Prompt: Act like a product designer and create a Flow chart for the process of buying a T-shirt in an e-commerce store: Take into account these error cases: Create only this flow. Do not add anything else. Result: The AI added all error cases but with issues: To address these issues, the author revised the prompt: Revised Prompt: Act like a product designer and create a Flow chart for the process of buying a T-shirt in an e-commerce store: Create only this flow. Do not add anything else. Result: The AI added all error cases correctly, creating a more legible and easy-to-understand flow. Key Insights from the Tests: To Summarize: This insight demonstrated how to use FigJam AI as an AI flowchart tool. The author shared three tests: a happy path flowchart, a flowchart with one error case, and a more complex flowchart with three error cases. After refining the prompts, the desired results were achieved. Key insights from the process were also discussed. Like Related Posts Alphabet Soup of Cloud Terminology As with any technology, the cloud brings its own alphabet soup of terms. This insight will hopefully help you navigate Read more Guide to Creating a Working Sales Plan Creating a sales plan is a pivotal step in reaching your revenue objectives. To ensure its longevity and adaptability to Read more Salesforce Artificial Intelligence Is artificial intelligence integrated into Salesforce? Salesforce Einstein stands as an intelligent layer embedded within the Lightning Platform, bringing robust Read more CRM Cloud Salesforce What is a CRM Cloud Salesforce? Salesforce Service Cloud is a customer relationship management (CRM) platform for Salesforce clients to Read more

Read More
gettectonic.com