Explore Diagram AI with AI Academy 1U and learn AI-assisted interface design, creative UI concepts, visual workflows, design automation, and practical techniques for turning ideas into clear digital experiences.
Explore all lessons in this catalogue and start learning at your own pace.
▶
1. What Was Diagram AI? ❌
Discover Diagram AI with AI Academy 1U as an AI design startup that became known for intelligent tools inside the Figma ecosystem before being acquired by Figma and influencing the direction of modern AI-assisted design workflows.
▶
2. Understand the Diagram → Figma Evolution ❌
Understand the Diagram-to-Figma evolution with AI Academy 1U by learning how many of Diagram’s core ideas transitioned into official Figma AI capabilities and became part of the platform’s broader intelligent design workflow.
▶
3. Understand the Current Figma AI Ecosystem ❌
Understand the current Figma AI ecosystem with AI Academy 1U by exploring Figma Agent, First Draft, AI editing, Weave tools, generative plugins, shaders, MCP, and how these technologies work together across modern design workflows.
▶
4. Understand Agentic Design ❌
Understand agentic design with AI Academy 1U by learning the difference between AI that generates a single asset and an AI agent that understands design context, modifies files, follows instructions, and performs multiple connected design actions.
▶
5. Build the Diagram-to-Figma Mental Model ❌
Build the Diagram-to-Figma mental model with AI Academy 1U by understanding Diagram as the historical foundation while treating modern Figma AI as the practical environment for learning current AI-assisted and agentic design workflows.
▶
6. Understand the Figma Design Agent ❌
Understand the Figma Design Agent with AI Academy 1U by learning how an AI agent operates directly on the design canvas, interprets natural-language instructions, and modifies visual elements within the context of the current file.
▶
7. Generate a Design from a Prompt ❌
Generate a design from a prompt with AI Academy 1U by describing a user interface, layout, or visual concept in natural language and using the Figma Design Agent to create an editable starting point.
🔒
8. Refine an Existing Layout ❌
Refine an existing layout with the Figma Design Agent and AI Academy 1U by requesting changes to spacing, hierarchy, alignment, and visual structure while preserving the broader design context.
🔒
9. Rewrite and Replace Content ❌
Rewrite and replace content with Figma AI and AI Academy 1U by modifying text directly inside a design, improving clarity, changing tone, and updating content without manually rewriting every text layer.
🔒
10. Ask for Design Feedback ❌
Ask for design feedback with Figma AI and AI Academy 1U by using the agent as a reviewer to identify potential issues involving layout, contrast, hierarchy, consistency, and other aspects of visual presentation.
🔒
11. Use Multi-Turn Design Conversations ❌
Use multi-turn design conversations with Figma and AI Academy 1U by refining the same design through multiple prompts, preserving context and making progressive improvements instead of restarting the design from the beginning.
▶
12. Understand First Draft ❌
Understand Figma First Draft with AI Academy 1U by learning how prompt-to-wireframe differs from prompt-to-image and why generated interface structures remain editable for continued design work.
▶
13. Generate Your First Wireframe ❌
Generate your first wireframe with Figma and AI Academy 1U by turning a short brief into a landing page, application screen, or other editable interface structure that can be refined later.
🔒
14. Generate High-Fidelity UI Directions ❌
Generate high-fidelity UI directions with Figma and AI Academy 1U by moving beyond basic wireframes toward more detailed visual treatments, interface styling, and specific design directions.
🔒
15. Explore Multiple Design Variations ❌
Explore multiple design variations with Figma and AI Academy 1U by using AI to quickly test alternative layouts, styles, and interface directions before choosing the strongest concept for further refinement.
🔒
16. Refine Generated UI Manually ❌
Refine generated UI manually with Figma and AI Academy 1U by treating AI output as a starting point and using designer judgment to improve spacing, hierarchy, styling, usability, and final visual quality.
▶
17. Understand AI Image Tools in Figma ❌
Understand AI image tools in Figma with AI Academy 1U by learning the differences between image generation, AI-based image editing, and vectorizing raster graphics into editable vector layers.
▶
18. Generate Images inside Figma ❌
Generate images inside Figma with AI Academy 1U by creating visual assets directly on the canvas without leaving the design environment or switching to a separate image-generation application.
🔒
19. Edit Images with AI ❌
Edit images with AI in Figma and AI Academy 1U by changing content, composition, or visual direction without rebuilding the original asset manually from the beginning.
🔒
20. Vectorize Raster Images ❌
Vectorize raster images with Figma and AI Academy 1U by converting bitmap artwork into editable vector layers that can be resized, recolored, and integrated into interface or brand systems.
🔒
21. Build a Mixed Raster + Vector Asset Set ❌
Build a mixed raster and vector asset set with Figma and AI Academy 1U by generating images, vectorizing selected graphics, adjusting colors, and organizing reusable assets inside a consistent design system.
▶
22. Understand Generative Plugins ❌
Understand generative plugins with Figma and AI Academy 1U by learning how prompt-to-tool workflows differ from prompt-to-design and how AI can generate reusable functionality instead of only visual output.
▶
23. Create Your First Generative Plugin ❌
Create your first generative plugin with Figma and AI Academy 1U by describing the automation you need and allowing the Figma Agent to generate a plugin that performs the requested task.
🔒
24. Build a Layout Automation Plugin ❌
Build a layout automation plugin with Figma and AI Academy 1U by creating reusable functions for tasks such as reordering layers, applying spacing, adjusting padding, or standardizing layout structure.
🔒
25. Build a Find-and-Replace Design Plugin ❌
Build a find-and-replace design plugin with Figma and AI Academy 1U by automating repetitive updates to text, colors, or other design properties across a file.
🔒
26. Add On-Canvas Controls ❌
Add on-canvas controls to a generative plugin with Figma and AI Academy 1U by creating interactive controls that make the plugin behave more like a native design tool inside the canvas.
🔒
27. Publish a Generative Plugin ❌
Publish a generative plugin with Figma and AI Academy 1U by preparing the tool for sharing through Community or private organization workflows so other users can reuse the generated functionality.
▶
28. Understand Figma Weave ❌
Understand Figma Weave with AI Academy 1U by learning how it provides a layer for creating reusable generative workflows that can later be applied inside Figma Design.
▶
29. Use a Prebuilt Weave Tool ❌
Use a prebuilt Weave tool with Figma and AI Academy 1U by applying an existing generative workflow to a design and observing how reusable AI logic can speed up repetitive creative tasks.
🔒
30. Build a Reusable Image Workflow ❌
Build a reusable image workflow with Figma Weave and AI Academy 1U by creating a tool that repeatedly generates images according to a consistent visual pattern or production requirement.
🔒
31. Build a Reusable Vector Workflow ❌
Build a reusable vector workflow with Figma Weave and AI Academy 1U by generating vector assets that follow a consistent visual system and can be reused across future design projects.
🔒
32. Publish Weave Tools ❌
Publish Weave tools with Figma and AI Academy 1U by preparing reusable generative workflows for sharing through Community so other designers can apply the same AI-powered process.
▶
33. Understand AI-Generated Shaders ❌
Understand AI-generated shaders with Figma and AI Academy 1U by learning how programmable visual effects differ from standard image effects and how shaders can introduce reusable visual behavior.
▶
34. Create a Custom Shader ❌
Create a custom shader with Figma and AI Academy 1U by describing a visual effect in natural language and using the agent to generate the shader logic needed to produce it.
🔒
35. Control Shader Parameters ❌
Control shader parameters with Figma and AI Academy 1U by exposing adjustable settings that allow the same generated effect to be modified and reused across multiple visual applications.
🔒
36. Apply Shaders to Brand Visuals ❌
Apply shaders to brand visuals with Figma and AI Academy 1U by creating gradients, distortions, surface treatments, and other reusable effects that fit a broader visual identity.
🔒
37. Share Shaders and Generative Tools ❌
Share shaders and generative tools with Figma and AI Academy 1U by preparing custom visual effects and reusable AI tools for team use or broader distribution through Community workflows.
▶
38. Understand AI in Design Systems ❌
Understand AI in design systems with Figma and AI Academy 1U by learning why AI should operate within defined components, rules, and constraints instead of generating unrestricted visual results.
▶
39. Use Existing Components as Context ❌
Use existing components as context with Figma and AI Academy 1U by guiding the agent to generate layouts and interface structures that align with an established component library.
🔒
40. Standardize Spacing and Layout ❌
Standardize spacing and layout with Figma and AI Academy 1U by using agents or automation plugins to identify and correct inconsistent spacing, alignment, or structural patterns across multiple design areas.
🔒
41. Standardize Colors and Content ❌
Standardize colors and content with Figma and AI Academy 1U by automatically identifying and replacing inconsistent visual properties or text patterns across a design file.
🔒
42. Build a Brand-Safe AI Workflow ❌
Build a brand-safe AI workflow with Figma and AI Academy 1U using Design System → Agent → Generation → Validation → Reusable Tool to keep AI-assisted design aligned with established brand rules.
▶
43. Understand Figma MCP ❌
Understand Figma MCP with AI Academy 1U by learning how Model Context Protocol allows external AI agents to access design context and use that information inside connected workflows.
🔒
44. Connect Figma to an External Agent ❌
Connect Figma to an external AI agent with AI Academy 1U by understanding how design context can be transferred from a Figma file into another intelligent system for further processing.
🔒
45. Use Design Context for Implementation ❌
Use design context for implementation with Figma and AI Academy 1U by passing interface structure and visual information into code-backed workflows that can support development and implementation tasks.
🔒
46. Work with Plugins and Shaders through MCP ❌
Work with plugins and shaders through Figma MCP and AI Academy 1U by allowing external AI agents to interact with generative plugins, shaders, and related AI-powered design tools.
🔒
47. Build a Design-to-Code Agent Workflow ❌
Build a design-to-code agent workflow with Figma and AI Academy 1U using Design → AI Context → Implementation → Review for a structured process that connects interface design to code-backed output.
▶
48. Design a Product from a Natural-Language Brief ❌
Design a product from a natural-language brief with Figma and AI Academy 1U by using Figma Agent or First Draft to transform product requirements into an editable starting concept.
🔒
49. Refine the Product with AI ❌
Refine the product with Figma and AI Academy 1U by improving layout, content, imagery, hierarchy, and visual direction through iterative AI-assisted editing while preserving designer oversight.
🔒
50. Build a Custom Generative Tool ❌
Build a custom generative tool with Figma and AI Academy 1U by creating either a generative plugin or a Weave workflow that automates a repetitive design task within the project.
🔒
51. Connect the Design to an External Agent ❌
Connect the design to an external AI agent with Figma and AI Academy 1U by using MCP to transfer design context into an implementation-oriented workflow outside the original design environment.
🔒
52. Final Project: Build a Complete Agentic Design Workflow ❌
Build a complete agentic design workflow with AI Academy 1U using Product Brief → Figma Agent → First Draft → AI Image and Vector → Manual Refinement → Design System → Generative Plugin → Weave Tool → Shader → MCP → Implementation-Ready Design.
ChatGPT is an AI assistant for writing, learning, research, problem solving, and creative tasks. Learn practical skills with AI Academy and discover useful workflows in our AI Library.
EXPLORE AI LIBRARY
Canva is a design platform for creating graphics, presentations, videos, and social media content. Learn practical design skills with AI Academy and explore creative workflows in our AI Library.
EXPLORE AI LIBRARY
CapCut is a video editing platform for creating and enhancing videos with AI-powered tools, effects, captions, and templates. Learn practical skills with AI Academy and explore workflows in our AI Library.
EXPLORE AI LIBRARY
Google Gemini is Google’s assistant for research, writing, reasoning, images, and productivity. Learn practical skills with AI Academy and discover useful workflows in our AI Library.
EXPLORE AI LIBRARY
Learn Google Veo with AI Academy 1U and create cinematic AI videos from text and images using powerful video generation, camera controls, visual storytelling, and creative production techniques.
EXPLORE AI LIBRARY
ElevenLabs AI is a voice platform for text to speech, narration, and voice creation. Learn practical skills with AI Academy and discover useful workflows in our AI Library.
EXPLORE AI LIBRARY
Claude AI is an assistant for writing, document analysis, reasoning, and coding. Learn practical skills with AI Academy and discover useful workflows in our AI Library.
EXPLORE AI LIBRARY
VideoGen AI empowers creators to produce engaging videos faster with AI-powered tools. Learn practical workflows, creative techniques, and production strategies with AI Academy 1U to create professional video content efficiently.
EXPLORE AI LIBRARY
HeyGen AI is an avatar video platform for presentations, narration, and multilingual communication. Learn practical skills with AI Academy and discover useful workflows in our AI Library.
EXPLORE AI LIBRARY
Microsoft Copilot is Microsoft’s assistant for productivity, writing, research, and workplace tasks. Learn practical skills with AI Academy and discover useful workflows in our AI Library.
EXPLORE AI LIBRARY