Generate Design Systems and Forms with AI: Angie in the Atomic Editor (First Look with Roi)
Elementor 4.1 brings Angie into the Atomic workflow. In this First Look, Roi walks through what's new, including how Angie now helps generate Variables, Classes, and Forms natively inside the Atomic Editor.
We also look at the latest atomic foundation updates: the unified Design System Manager that brings Variables and Classes into one place, new atomic form elements like Select, Date and Time pickers, File Upload, and Radio buttons, plus quality-of-life improvements for scaling design systems - class limit raised to 1,000 and exporting Variables and Classes across sites.
Whether you're new to Angie or have been building with her since launch, this is a practical look at what's possible now and how to get the most out of it.
Try it for yourself!
1. Update to the latest Elementor version.
2. Go to WP Admin, Elementor, Editor, Settings, Atomic Editor, Activate.
3. Open the Elementor Editor.
4. Click the Angie icon on the left side of the Top Bar.
5. If Angie isn't installed yet, follow the install steps.
6. Set up your AI context, and start prompting.
Read the full breakdown - www.elementor.com/blog/angie-in-the-atomic-editor
0:00 Intro
0:17 - 1:21 Angie enters the Atomic workflow
1:22 - 1:55 Setting up AI context for better results
1:56 - 4:24 Generating Variables and Classes
4:25 - 5:09 The new unified Design System Manager
5:10 5:44 Exporting your design system
5:45 - 6:31 Generating Forms
6:32 - 7:11 New atomic form elements
7:12 Outro