diagramming

3 posts

figma

Think Outside of the Box—with Claude and FigJam | Figma Blog (opens in new tab)

Figma and Anthropic have integrated FigJam with Claude so teams can turn AI conversations into editable diagrams. Users can generate flows, timelines, architecture diagrams, and other visual artifacts from prompts, PDFs, images, screenshots, documentation, or code. The integration is intended to make AI-assisted thinking more collaborative by moving ideas from a private chat into a shared workspace where teams can refine and act on them. ## Turning Conversations into Diagrams - Claude can create editable FigJam diagrams directly from written prompts and uploaded materials. - Product teams can generate user flows from PRDs to identify friction, edge cases, and missing steps. - Visualizing ideas reduces copy-pasting and context switching while making abstract concepts easier to discuss. - Teammates can comment, react, and build on the generated diagrams in FigJam’s shared canvas. ## Supporting Product Planning - Product managers can use Claude and FigJam to create initial project plans and Gantt charts. - Generated timelines can map milestones, dependencies, and sequencing. - Early visual drafts help teams spot planning problems, unblock work, and align more quickly. ## Helping Engineers Explain Complex Systems - Claude can generate diagrams from technical documentation or uploaded code files. - Diagrams can represent: - System architecture - Services and APIs - Databases and dependencies - Request and response flows - Sequence and state transitions - These diagrams provide shared context for front-end and back-end teams and help reduce implementation risk. - Claude can compare system patterns and suggest suitable visualization styles. ## FigJam as a Collaborative Workflow - Ideas generated in Claude can move into the broader Figma ecosystem: - Refined in Figma Design - Shared through Figma Slides - Translated into code - Figma is also improving FigJam with more advanced shape collections and connector types. - Anthropic has released a UI kit for designing Claude MCP apps in Figma. - The workflow connects brainstorming, planning, refinement, and execution in one process. ## AI as an Ongoing Collaborator - Multi-turn conversations let teams iteratively develop user journeys, prioritization strategies, and implementation plans. - Claude can propose alternative solutions and recommend chart formats such as decision trees, Gantt charts, sequence diagrams, and state diagrams. - FigJam diagrams become shared, evolving artifacts rather than one-off AI outputs. - Figma presents this integration as a step toward making complex systems easier for teams to understand and improve together. Teams can access the feature through the Figma Connector in Claude’s browser or desktop apps, with support listed for Claude Opus 4.5 and Sonnet 4.5.

figma

Turn Your ChatGPT Brainstorms Into FigJam Diagrams | Figma Blog (opens in new tab)

Figma’s new ChatGPT app turns brainstorms, sketches, uploaded files, and technical documents into editable FigJam diagrams. It supports flowcharts, sequence and state diagrams, and Gantt charts, helping users move quickly from exploration to collaborative artifacts. The feature is powered by Figma’s remote MCP server and is available to logged-in ChatGPT users outside the EU. ## Turning Conversations into Diagrams - Users can mention Figma in a prompt, such as “Figma, make a diagram from this sketch.” - ChatGPT can recommend the Figma app when diagramming is relevant. - Photos, drawings, PDFs, and other files can provide context. - Generated diagrams can be revised, expanded, or represented in alternative formats. - Figma plans to add more diagram types over time. ## Accelerating Design Iteration - Hand-drawn sketches can become shareable FigJam files. - Designers can ask ChatGPT to update diagrams or explore different visualizations. - Dense documents can be uploaded so ChatGPT can produce an initial draft. - This helps teams move ideas from informal notes or whiteboards into a collaborative workspace. ## Clarifying Technical Systems - Developers can use uploaded documentation and screenshots to create or update software architecture diagrams. - ChatGPT can research technical approaches using blogs and case studies, then visualize them. - Screenshots, such as a pricing page, can be used to map likely React component structures. - The resulting diagrams support system design discussions, technical communication, and interview preparation. ## Planning Products and User Experiences - Product managers can visualize tradeoffs, such as simplicity versus power in a permissions flow. - PRDs can be converted into user journey or process flowcharts. - Product, engineering, and design requirements can be combined into Gantt charts for launch planning. - ChatGPT supports individual exploration, while FigJam enables teams to review and iterate together. The feature is currently live for logged-in ChatGPT users outside the EU. It offers a practical workflow for using ChatGPT to generate a first visual draft and FigJam to refine, discuss, and collaborate on it.

figma

What’s new in Figma: February 2022 | Figma Blog (opens in new tab)

Figma’s February 2022 updates focus on making design collaboration easier, from finding files to brainstorming in FigJam. Search now offers previews and file-type filters, while FigJam—now out of beta—adds more flexible editing and clearer collaboration tools. Overall, the release aims to keep teams aligned and help ideas move smoothly from brainstorming to implementation. ## Updated Search and Discoverability - Search results now include file previews, making it easier to identify the correct design. - Users can filter recents, team pages, and search results by Figma or FigJam file type. - These changes reduce the time spent locating current designs and resources. ## FigJam Collaboration Improvements With FigJam available to all teams, Figma added several refinements for brainstorming and diagramming: - **Centralized resource menu:** Components, templates, widgets, and other resources are now accessible from one simplified toolbar menu. - **Flexible font sizing:** Text can be resized to any size by dragging the corners of a text box, supporting clearer hierarchy and emphasis. - **Persistent stamps and highlights:** Reactions and highlights stay attached to the objects they reference when content is moved. - **Faster color and shape changes:** Updated toolbar icons make it easier to swap colors and shapes while building diagrams. - **Image borders:** Users can add borders to images to draw attention to selected visuals. - **Simpler selection borders:** Thinner borders and larger selection corners make objects easier to select and resize. Figma’s release reinforces its broader goal of bringing more people into the design process while keeping collaboration organized, discoverable, and visually clear.