When is a Figma Prototype the Right Choice?

When we create large demos for our clients, we usually build them from the code base of the system we’re going to demonstrate. This approach allows our team certain efficiencies as we build out a demo and access to features that only the code base can provide, but there are times when a design/prototyping tool may be a better solution.

There are a variety of tools in the market today to help teams prototype their digital experiences. One popular tool right now is Figma. Figma allows teams to layout screen designs, provide feedback on designs, develop reusable components, and pattern libraries, and generate prototypes of the design files to mimic how the screens will function once the interface is developed.

There are several reasons to consider a prototyping tool like Figma.

Some examples include:

1. We can’t get access to the source code of the application we are trying to demo
2. Only design files of key screens are available for us to build from
3. A component or pattern library has been already been created in a tool like Figma

Benefits of Using a prototyping tool like Figma

• Brand updates an be applied automatically to the prototype if our client has an existing component library
• The prototype can be easily converted into a sales demo by removing collaboration access to the Figma’s functionality

Considerations

• Demos generated from a prototyping tool are not ADA compliant. If this is a requirement then consider an HTML demo instead (See below)
• The code is not responsive. Components and code generated from an application like Figma are not responsive and will be optimal for either mobile or desktop, not both.

 

If you have a complex application with a number of requirements such as ADA compliance and the need for the demo to work on mobile and other devices, consider a code based demo using HTML and other source code.

A code-based demo provides some advantages over using a prototyping tool if:

• There is access to an existing code base of a content heavy site
• The demo site or app needs to be ADA compliant or responsive
• Your team needs to be able to quickly generate custom versions of the demo to respond to a specific RFP or client request

Benefits of a code-based demo

• Complex interactions can be mimicked more closely. Using code to build a demo can more efficiently show certain types of interactions.
• The demo can be more easily made ADA compliant. Prototyping generated from an application like Figma often rely on static screens rather than code and screen readers will miss key elements.
• More flexibility for on the fly customization. Many of our clients have us create a baseline demo that can be copied, modified and customized specifically for a prospect customer. A code based demo makes it faster, more accurate and efficient for us to generate demo versions that feature products and use cases that are specific to that customer’s needs.
• Offline versions can be created. Ond of the biggest advantages of a code based demo is that you don’t need an internet connection to run the demo.

Considerations

• HTML demos are a better choice to demonstrate something that already exists like  a member portal or browser based software application.
• The site that we are demoing needs to have a solid code base. The more solid and well executed the code base is the faster we can build and customize the demo.
• Keeping up with releases and changes to the live site. Once we build the demo, if there is a change to the live site, those changes are not automatically reflected in the demo.

If you are not sure the best way to approach building a sales demo or prototype, we can help you determine which approach will be the most effective based on your goals. Get in touch and we can discuss which approach is right for your situation.