Best Prototyping Tool FIGMA – For All Apps & Games

For all those people out there looking to create engaging and memorable products – and those looking for a prototyping tool that will blow you away then look no further that downloading https://www.figma.com/ . For those people unsure there is a free version that supports 1 project at the time of writing this. So sign up, register and download.

FIGMA – Woooowsers

I cant stress how incredible this online tool is and and it keeps getting better and more usable with every update (which seems to be about once every month at least).

Right OK where do I start? If you use vector based art packages such as Adobe Illustrator then you will definitely get on with this tool. Create a frame (pretty much an artboard) most containers and working areas use frames to design prototypes and containers inside of frames – sounds dauting but frames are so versatile and useful for creating responsive websites, games, mobile apps, watch apps, augmented reality apps, virtual reality apps and mixed reality apps and anything else that has interactive screens/spaces when you need to understand user journeys and prototyping interactions.

FIGMA uses vector graphics as it main base to create buttons, boarders, graphics, icons patterns etc. you can also import images pngs, jpegs, gifs etc if needed. but please be mindful of resolution and optimization when using rasterized images. There is a pen tool similar to Adobe illustrator and functions in much the same way, for simple vector line creating with Bezier curves.

There is a simple browser version that runs within the chrome, edge, firefox or whatever your chosen default browser is and there is also a desktop download version for Windows and iOS. which is the same as the browser but works more efficient on full screen and has better offline capabilities if you have internet problems. There is also a mirror feature for iOS and Android – so download the apps for your phones as well if your creating a prototype for a phone or tablet. Once youve got the Figma mirror app setup your project within Figma desktop/web browser and then select the frame u want to view on your phone within the mirror app then hey presto your mobile application can be simply viewed and edited in realtime while looking on your phone – seriously try this feature out its soooooo cool. If youve created linked interactions you can jump between pages simply – its not perfect but its a super cool feature for all you mobile app designers.

One main thing that I forgot to mention is that FIGMA’s main and most incredible feature is the collaboration element, where multiple Designers / Devs / Stakeholders and whoever else wants to have some transparency about what is being crafted can easily interact, view, comment or even modify in realtime FIGMA files. This is a massive game changer for collaboration at a level I’ve not seen implemented as successfully as FIGMA in any design prototyping tool. Work on your own if that’s what you like or work as a group and throw ideas and get different input and feedback from your team members.

If this seems overwhelming which it is to start with I can confess as I found my self very anxious and intermediated at first working on other peoples files and modifying and suggesting changes in real-time while seeing other peoples cursor flying around on the screen. But once you can overcome this fear of sharing and collaborating, as everyone intentions on the product team are to make great, engaging products. Ideas and productivity are massively improved when collaborating, as we’ve all done it as Designers sitting isolated and trapped in a creative design blocked feature loop when all your ideas seem to not fit or function as you intended. Sharing and collaborating is caring!!!

I’ve used Figma for prototyping Mobile phone games, Virtual Reality games/apps, Mixed reality apps, Mobile apps and some basic responsive websites. It’s such a versatile tool that it was very easy to use for prototyping for these apps and games. This is a HoloLens 2 application that I used Figma for prototyping and creating a design system that provided guidelines for creating a HoloLens 2 application – https://nealedesign.com/portfolio/traxr

Research and moodboards are also easily created shared and collaborated on to allow for team transparency – with the main foundations of Figma using web based canvas – figma files can be easily shared in Atlassian Confluence pages, so when changes are made in the file the updates are automatically updated if referenced in other online project documentation.

Online help and community – There is a lot of online help and support for Figma – it is worth looking at the various free plugins Figma has to offer there are lots. They are all designed to make your life easier and more efficient, a few starter ones to mentions are Figmotion – this lets you create simple animation states between pages and works really nicely. There is also Google Material Design – this lets you use google material templates that can be easily edited to suit your project. Content Reel is another really nice plugin that lets you generate dummy content like usernames, lorem ipsum text, icons, names etc which can quickly populate your application. Iconify is another great plugin with lots of free icons to be quickly added to your projects and prototypes. There seems to be a forever growing community with a real desire for people to help one another so please embrace this and become an active member. Search inside Figma to find the plugins for most of your needs, no point in re-inventing the wheel!!!!!

In conclusion I cant sing Figmas praises enough, I use Adobe XD, InVision, Marvel App, Axure, and a few others and can honestly say that Figma is the most intuitive and most impressive for rapid prototyping mobile apps, websites, VR, AR mixed reality applications and anything else that requires designers to create a flow or user journey. To cap everything else off, now that we live in COVID world Figma allows you to collaborate (in realtime) and share designs easily with Co-Devs, Designers, Stakeholders, Product People and whoever else to get input before the application is built. You can even use the Figma files/designs for user testing to help craft a great UX and application that will please end users.

There is also a newish feature called FigJam – which is a brainstorming whiteboard – type of feature that I haven’t actually used yet but it looks great for group collaboration before and during product developments projects. https://www.figma.com/figjam/

Please download Figma now and give it a whirl – trust me you’ll love it – https://www.figma.com/downloads/

Leave comments below let me know what you think if you’ve used it already or if you’re thinking about trying it out.

FacebooktwitterpinterestlinkedinmailFacebooktwitterpinterestlinkedinmail