One of the things I learned in the recent year while working on Salesforce projects is, it’s essential to develop a user interface that meets the customer’s purpose, as end-users will interact with the system via UI, not us (as in developer or Architect).

In the fast-changing world, it’s difficult for Salesforce Consultant or Architect to bring the ideas to life. Often we get the requirement we jump into the solution design and start building it. We never emphasize or understand the need for a good user interface.

As Salesforce beauty is low code, it is straightforward to build a user interface, which doesn’t mean this will fulfill every customer’s requirement. Sometimes we realize this later stage in the project. Now imagine how much it cost to change the user interface.

What is a prototype?

The prototype is an art where you understand the words of your client and make a design. Prototypes can range anywhere from a low sketch created on a paper or, like the example below, a highly interactive clickable design that closely represents the final product. 

It will be worth investing if you prototype the UI in the design phase and have meetings with customers to ensure everyone is aligned.

The Benefits of Prototyping

1. A good draw by which the client can understand how the outcome will look and interact. 
2. Receive feedback from customers and end-users to identify improvements.
3. Early discovery of design problems.
4. Correct Estimation on user stories or features, as you get the clarity on development, code vs. click.

This article will share my experience with different tools I have used recently to prototype. These tools will help you and make your drive easy to create mock-ups/prototypes.

1. Avonni App
2. Sketch
3. Figma

Avonni Creator – Prototyping tool for Salesforce Lightning

Bring your Salesforce Lightning creative ideas to life; Avonni helps teams to design, prototype, and build Salesforce Lightning Applications and Components. Prototyping is a relatively quick and modest process that offers vital benefits for application development. Here are some advantages of using the Avonni App:

1. It is a web-based application, not requiring any installation.
2. Easy to learn and use.
3. Drag-and-drop tool, anyone can quickly build a prototype.
4. Can import metadata from your Salesforce into the Avonni App. No need to recreate everything from scratch.
5. It provides Lightning-web component, Aura Component, and HTML Code. Here means you can directly use this code to build the front-end.
6. Easy to design front-end of Desktop, Tablet, and Mobile.
7. It does give you .png & .jpg files, which you can use in your solution or technical design document.  
8. The best part is sharing a prototype with your customer by enabling a public URL.

You can explore more about the Avonni App here.

Sketch – Build an Interactive Prototype in Minutes

Sketch is a unique design app for macOS. You can use it for UI prototype, mobile, web, and even icon design. My thoughts after using it for a few projects:

1. Very simple and easy to use; it’s easy to pick up the basics
2. You can invite members to your Workspace as an editor or viewers.
3. Allows you to override the attributes of components, drag on your Sketch artboard.
4. You can easily preview your designs and navigate between artboards.
5. Sketch mirrors can be used to demo the prototype on the device it was designed for.
6. It exports your artboard as a PDF; everything can be exported as .png files.
7. You can export your code in CSS and SVG.
8. It is only available for Mac computers.
9. Superb integration with other apps and plugins.

Design Next Generation Prototype using Figma

Figma is a cloud-based design & prototyping tool. It’s made so that you can collaborate on projects and access them from anywhere. You can use it to do any kind of graphic design work, starting from wireframing websites, designing mobile app interfaces, prototyping designs, and crafting social media posts.

Like Sketch, Figma is also a vector-based design tool that is highly scalable. It works for both individual and enterprise projects. The browser-based design is smart enough to auto-save your work as you go and even keep up if you momentarily lose an internet connection.

Key advantages of Figma:

1. Modern pen tool that lets you draw in any direction.
2. Support open Type font features.
3. Create design systems and components.
4. Drag and drop accessible libraries.
5. Embedded commenting.
6. Salesforce has Lightning Design System for Figma.

What Next?

Browse the following URLs to learn more:

• Lightning Design System Plugin for Sketch
• To help you get started with Sketch, check out the Trailmix in Trailhead.
• To help you get started with Figma, check out the Trailmix in Trailhead.

I would love to hear about your experience. How do these tools help you on your ride of prototyping?