Design to Code: Using AI to Build Faster
1h 21mBeginner2023-12-18
Authors

Drew Falkman
Architecting sites for large companies using Java, PHP, and WordPress
Course details
It seems like new artificial intelligence tools are arriving every day, and even if you’re interested in using AI in your work, figuring out where to start may seem like an overwhelming undertaking. In this course, Drew Falkman shows designers the ways that AI can help you to build designs faster, make your designs smarter and better, and even improve your dev handoff. Drew surveys the current tools like Figma, Magician, and Sprout, and details their strengths and weaknesses. He also looks at some full-featured design suites that can help you get to prototypes quickly, like Wondershare Mockitt, Visily, and Uizard. He explains how you can use these tools to go from paper sketch or screenshot to wireframe in seconds, or use a prompt to generate an entire prototype. Finally, he shows you how you can use AI to automate the process of turning your designs into code.
Skills covered
FigmaArtificial Intelligence for DesignProgramming FoundationsArtificial Intelligence FoundationsVideoPhotographyGraphic DesignArtificial Intelligence (AI)Animation and IllustrationSoftware DevelopmentDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Using AI to be a faster, better, stronger designer
1. How AI Makes Design Faster
- 02 - Why AI and why now
- 03 - Code generation and automation
- 04 - The problems with AI
2. Fast Design and Prototyping in Figma
- 05 - Using AI in Figma
- 06 - Design planning and more with Figma Jambot
- 07 - Design content and icons using Magician in Figma
- 08 - There are so many AI plugins
3. Using AI Prototyping and Design Suites
- 09 - New prototyping tools are all-in-one
- 10 - Creating prototypes in Mockitt
- 11 - Uizard for wireframe, mockup, and final designs
- 12 - From sketches to designs using Visily.ai
4. Generating Code
- 13 - Making the dev handoff better
- 14 - TeleportHQ code generation
- 15 - AI website development with Durable
- 16 - Translate wireframes using Anima
- 17 - Translating designs to code using Locofy
- 18 - Translating the back end with AWS Amplify
Conclusion
- 19 - Next steps