shiben.tech

Figma – Know Your App Before Developing it – Free UX Tool

Sunday, 09 February 2020, 03:09 PM
# tech design

There are two things that make a product developers worry. What is the technology that you are building, is it efficient enough, does it function well, is it innovative, etc.. And second, what is the user experience of it? The tech may be killer, but does the experience justify it. UX’ importance has increased many folds in this decade. It is well understood that the only thing, if the user really has of your app, is its experience.

Gone are the days when we will take certain liberties in the interface because the software doesn’t allow some workflows. We used to develop software and then make the UX. We can’t do that anymore. All the right paths need to align properly, all the messaging needs to be perfect, and thus the UX design should be driving the software development. This calls for a tool where you can design the UX of the app before the software development is planned.

There are quite a few such available online. I use figma.com as it is a free online web app. Follow these simple steps to get started and feel comfortable with it within minutes.

Build Simple Ok Cancel App

Step 1 – First create a project and bring yourself to this screen. Use the top left tools to create a frame and choose it’s dimensions. Now create a rectangle, and a text box inside it. Select them both, and group them together.

Step 1 – Create a “frame” and add a rectangle with some text which can look like a button. Group them together.

Step 2 – This is where magic starts happening already. Select your group and right click on it, and select “Create Component”. This will create a package or a unit of your group, which can be repeatedly used in the rest of your project.

Step 2 – Now right click on the group and do “Create Component”. Rename your component to something meaningful.

Step 3 – Now your button unit is ready, duplicate it and create a “Cancel” button. Note the cancel button’s icon. It is an instance and carries all properties of the source button, unless you override something, for e.g. here the text. Wow!

Step 3 – Duplicate your component, and you have an “Instance”. Change the text to “But I am Lazy”.

Step 4 – Great. Now let’s create two more screens. You can do so by duplicating the existing screen. Make them in a way that they represent what happens through your two buttons.

Step 4 – Create two more screens by just duplicating the current. Treat them as two flows of your Ok and Cancel buttons

Step 5 – Interesting stuff now! Select the main button and Choose Prototype. You can point that button to navigate to one of your screens. Amazing.

Step 5 – Select any button, and like shown, direct it to go to a screen of your choice

Step 6 – Map all the buttons to the screens you want them to go. Fantastic! Your UX prototype is ready for testing.

Step 6 – Now map all the rest of the buttons like above

Test Simple Ok Cancel App

Click on the top right “play” looking button and you will get a test run of your UX in another tab. And it should work like below.

Your prototype now navigates around different screens through your button according to how you have mapped them

All that was possible within 10 minutes, and you have a functioning user experience of an OK-Cancel app ready to test. How awesome is that?

I have not even mentioned the effects like shadows, strokes, rounded corners. You can also add images, and put things inside a scroll area. Basically you can design your entire app before even thinking about what libraries you want to use for development. Even better, the functioning prototype can be handed over to the programmers to make their life easier. Hope this was of help, let me know your thoughts in the comments. Thanks!