Figma Prototyping

Creating a AR enabled prototype with Figma.

View the original post

Creating an AR-enabled prototype with Figma.

Tools Used: Figma, Vectary, AR compatible smartphone

Step 1: Creating the interface

Create your mobile app interface on the Figma. For this example, I used a plant shop template from figmacrush and tweaked it out a little bit.

Add a call to action to trigger the AR workflow, here I added a view in the 3D button so the user will be able to see the plant in the real world.

Step 2: Creating the 3D model on the Vectary

You can import the 3D model or create one yourself in vectary. For this example, I am using a free 3d model.

To import just drag and drop the 3d model.

Once your done importing, click on the viewer tab in the top bar.

In the viewer, window click on the generate button and then copy the generated URL.

Step 3: Bringing the 3D as a 2D image into your prototype.

To do this you need the Vectary 3D plugin installed on your Figma account.

Open the plugin, paste the copied URL and load the model into your Figma prototype. You can use the best view that fits your prototype by rotating the model before you save it as an image.

Step 4: Adding the AR viewer to the prototype.
Open the copied link in a new tab and click on the AR button on the top right.

Right-click on the displayed QR Code and copy the image address to copy the URL with a decoder or use a QR code scanner to get the address.

Now add this to link to the View in 3D button on the Figma prototype.

Step 5: Testing

Now open this prototype on any AR-supported phone and click on the link to see it opening the AR viewer and you will be able to see the 3D object in the real world.

Tada, your first AR-enabled prototype is ready.

Figma File for reference:—Reference-File

Creating a AR enabled prototype with Figma. was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.


Prototyping tools in 2021

View the original post

Photo by Amélie Mourichon on Unsplash

Prototyping is a key part of the UI and UX design process. Designers can create either a high or low fidelity prototype depending on their purpose, allowing them to test a feature, application, or website. The goal of prototyping is to test ideas before they are fully developed and to develop a better user experience.

There is no shortage of ways to showcase the design’s interaction with the numerous prototyping tools available to designers. We’ll be taking a look at the top 10 latest tools that can help UX/UI designers develop the ideal interactive model for their


How to Create Clickable Prototypes

View the original post

Interactive prototyping helps ensure that your product works exactly as you plan. If you cannot test your prototypes before releasing products to the public, you could receive unexpectedly negative feedback. Learn how to create clickable prototypes so you can control the narrative and keep your users coming back often.

Interactive features have psychological effects on users

Some of the most successful apps rely on interactive features to keep users engaged. The social media industry, for example, has learned how to tap into numerous psychological traits that encourage people to keep using their apps. Instagram and Facebook have


Powerful microinteractions to improve your prototypes

View the original post

Prototypes are, by their nature, designed to be less polished than the final product. However, that doesn’t mean you shouldn’t finish the prototype as much as possible. You want to give the user a good idea of what the finished app will be like, which means adding in those little interactions that make all the difference. This gives the best possible look at your product and ensures people know exactly how it will work. But which microinteractions are the most important to focus on? Let’s take a look.

There are infinite microinteractions that you can add to a

Prototyping Virtual Reality

VR UI/UX Design — Tutorial to Quick Prototyping

View the original post

I’ve been interested in AR/VR experiences for a while. I think this technology enables us to create richer experiences. It has depth, you…


Getting agreement on big decisions, versioning prototype routes, pair writing

View the original post

Getting agreement on big decisions, good reception for my new article, how making things open made things better (for me), and pair writing a new article.

# Getting agreement on big decisions

I’ve been trying to help my team make a decision on whether the collection of services we’re responsible for should be separate applications that live on multiple (sub) domains or just a single application that lives on one (sub) domain.

There are different views within the team but we need to decide as quickly as possible. Fortunately, I saw Marc O’Connor’s talk about how to make sure the


Prototyping versioning, ConCon8, beyond screens

View the original post

Concon8, prototype versioning, perseverance and article updates.

# Concon8

I went to Concon 8 this year and it was brilliant (as expected). I went to 2 workshops and 6 talks. The highlights for me were:

The content mapping workshop that Gabrielle Acosta, Katherine Dunne and Matt Clear ran. In a very short space of time we mapped part of the learn to drive journey people go on. We quickly learnt that getting down what you know about a map is more important than making the map neat and tidy, at least early on. And that the process of mapping

Design Systems Prototyping

Prototype versioning, namespacing design systems, discussing a header component

View the original post

Versioning prototypes, design system bits and article updates.

# Versioning prototypes

In the past 12 months I’ve created 5 different prototypes using the GOV​.​UK Prototype Kit. At times, due to the rapid pace of iteration, I’ve not been the most hygenic when it comes to versioning.

That means different versions sometimes share layouts and different journeys where the journeys have been developed in separate sprints.

And on one particular prototype where we are using a lot of data to make things realistic, I decided to use Git to version things which makes it harder to go back in time to


Prototype kit extensions, small checkboxes and radio buttons, multi-select autocomplete

View the original post

So last week I missed doing my weeknotes so I’m going to combine the last two weeks together. But I do have the best excuse—much better than the dog ate my homework.

# I lost my vision

My 18 month old baby girl poked my out so badly that I couldn’t see out of my one good eye.

My bad eye has been bad all my life as I have Daune Retraction Syndrome.

And while there is never a good time to get your eye fucked by your baby daughter, I had to spend the entire next day visiting two