A new chapter for Avonni

Introducing Avonni Next-Gen projects, our biggest release yet for prototyping Salesforce Lightning Applications.

Avonni Creator is a beloved product used by over 2,000 companies today to create high-fidelity prototypes for Salesforce Lightning. We introduced Avonni Creator to the Salesforce ecosystem in 2017. At that time, we transformed an inefficient yet ubiquitous design process where business users used paper prototypes or spreadsheets to create Salesforce proof of concepts.

Over the past two years, there have been a lot of new features and improvements on the Salesforce Platform. Lightning Web Components (LWC) and all the new Salesforce products (Health Cloud, Financial Services, Vlocity….) were introduced. Despite these enhancements, Avonni Creator still had its limitations because the Avonni Creator you needed in 2017 is not what is needed today. In addition, there was also a gap within Avonni Creator as many developers had to write a lot of code in order to translate designs and ensure it’s working once live on Salesforce.

Now we have designed and built a completely new Avonni, based on the collective feedback of more than 2,000 users and on recent Salesforce enhancements. We have totally reimagined Avonni, making it easier to use and more powerful for the prototyping and creation process. In fact, we wanted to ensure that everything you create in Avonni actually matches all Salesforce improvements. The Lightning Web Components are now the foundation as you can design, prototype, build and deploy a working Lightning Web Component without writing a single line of code. 

Next-Gen projects

Next-Gen projects are the backbones of the new Avonni Platform. By creating a Next-Gen project, you’ll have the choice between creating prototypes (prototype project) or visually building Lightning Web Components (Experience Components Project).

Prototype Project

A Prototype Project gives you all the flexibility to create your prototype the way you want without any constraints from Salesforce. Prototyping is supposed to be fast and painless. The Next-Gen Platform is easy to use, loads instantaneously and has a distraction-free user interface that you can share and collaborate with your peers. 

Experience Components Projet

It’s all about creating Lightning Web Components visually. An Experience Component project will give you the ability to design, prototype and build  working Lightning Web Components that you can deploy on your Salesforce Org with the click of a button. 

Classic projects (formerly Avonni Creator)

We rebranded Avonni Creator as Classic projects by keeping all the same UI and features. 

5 new features that make Next-Gen projects better

We’ve rolled out an entirely new Avonni experience with Next-Gen projects. Here’s the top features you don’t want miss:

  • Open-source Avonni Components
  • Responsive Visual CSS Editor
  • Customizable Templates
  • Easy Salesforce integration
  • Accessible Source code

Open-source Avonni Components 

We’re engineering true Lightning web components to give you access to a rich set of customizable pre-made components and extend the possibilities of what you can create on the Salesforce platform. With Avonni Components, we want to ensure that everything you create within Avonni actually works on a Salesforce production org. That’s why the Avonni Components are completely open-source and follow the LWC standards. Developers can now spend time developing core functionality, not UI components.

Here are some of our key Avonni Components:

  • Profile Card
  • Avatar
  • Pagination
  • Relationship Graph
  • Visual Picker

Responsive Visual CSS Editor

The Next-Gen platform now comes with a brand-new visual style editor. Simply click on an element and start visual editing. Edit fonts, colors, sizes and more without the need to code the look and feel of your creation. Apply any specific styles to phones, tables and desktop to control how your components display on different devices.  

Customizable Templates

We don’t want you to reinvent the wheel, so we built hundreds of templates to match usual cases or industries. Templates are ready-made components or groups of components that serve as inspiration. These templates will help you to think more creatively. All the templates are fully customizable and ideal for rapid prototyping. Simply search for the template that suits your needs and start building a fully customizable design.  

Easy Salesforce Integration

Wouldn’t it be great if you could deploy all the Lightning Web Components created using Avonni directly into your Salesforce org? Deploying directly into Salesforce is now part of your reality with Avonni Next-Gen projects. From the Experience Components Builder, simply click on the deploy button to push your work on your Salesforce org. All the customization, settings and overall look and feel will stay exactly the same. The new Avonni can now begin to close the previous gap between the business users and the developers.

Accessible Source code

With the Lightning Web Components as a trusted foundation, Avonni Next-Gen projects give you direct access to all the source code for your components. Source code from markup, javascript, CSS style, and metadata is now directly accessible. Developers will enjoy more productivity as everyone shares the same source of truth. 

Best of all, developers can edit the code directly from within Avonni thanks to our new integrated code editor.

The new Avonni begins now

We hope you love the Next-Gen experience we’re announcing today. We are far from finished and we are still working hard to bring more helpful new features to this brand-new platform. Until our next announcement, everything is in place to finally close the gap between design and development, ensuring quicker buy-in from stakeholders, and more useful feedback during the planning phase.

We're always listening to your feedback and making improvements to Avonni based on your suggestions. If you're keen to help us shape the future of Avonni, hit the Give Feedback button in the project menu. To find out what features are coming next, check out our Product Roadmap

Here’s a more detailed breakdown of the differences between Classic and Next-Gen projects.


What happens to the existing Avonni Creator?

Users will have the choice to select between Classic (formerly Avonni Creator) or Next-Gen to start a new project. We will continue to support Classic projects for the foreseeable future.

Who will be able to use the new Next-Gen projects?

Anyone will have access to Next-Gen projects. Access to certain features will vary depending on your plan. 

Can I convert my Avonni Creator design into a Next-Gen design?

Unfortunately, no. Next-Gen project is our new platform completely built from the ground-up.

Interested in what's coming next?

Please visit (and contribute to) the public roadmap.

Related Articles