If you are thinking about the wonderful world of UX/UI design or you are one of the lucky ones that is already dedicated to this, then you should know that we are in the best moment to be able to transform our ideas into real designs thanks to these 3 different design tools (and many others that come out every day).
Before I begin, I want to say that I will only talk about the basics of these tools, and not the more advanced features.
The analysis structure will be the following one:
1. Layers // 2. Pages // 3. Property panel // 4. Unique features // 5. Prototyping // 6. Cloud // 7. Plugins or similar
This we could say is the most consolidated UX/UI design tool and very well known to all of us designers.
For new users, Sketch gives us a trial version of 15 days after which, we must pay a subscription of $99 per year. Once this license is acquired, we will have access not only to the desktop version but also to cloud, which we will talk about later on.
Its layout is very similar to any other design software:
1) Starting with the menu on the left side, we can see its Layer panel with the hierarchy of our layers & groups (the hierarchy is made up of Artboard/Group/ Element).
2) Different pages in the same file (including the symbol page created automatically where all your “master” symbols are organized).
3) The right side menu is reserved for all the properties of both the elements and all the overrides of your symbols. This helps to update your designs in a very simple way.
5) In the upper right corner, we can find the option “Preview” to preview our prototypes. The options we have for these prototypes are too simple (or not so simple if we use the Anima plugin) but good enough to get rid of the old Invisionapp. If you want to know more about the more advanced prototyping tools, pay attention to part 2 of this article.
6) Next to the preview option, we find our Sketch Cloud, one of the most interesting features of this tool, where we can share our designs with customers or create collaborative libraries with all our symbols. This means when we update one of them, we can change all of our designs in a very fast way. On the other hand, in case you are wondering, we can not use this cloud for version control — for that we will need to use external software such as Abstract.
7) As you can see from my previous points, a very good use of Sketch is the possibility of adding plugins, which can give you “superpowers”, but the bad part of this is that they are independent to Sketch, which means that they can be removed, not updated or they can cost extra money. One of the best plugins would be Zeplin (handoff tool).
CONCLUSION: Sketch is still the most used design tool because it is a really powerful tool + its plugins (super powers). It will never disappoint you.
Figma is the new fashion software with an operation similar to Sketch but with a clear differential value, it is Cloud-based, this means that not only do we not need to install any software but we also don’t need to keep our files since they are self-saved in the cloud (this means however that you will need internet connection at all times).
If this does not seem enough, I’ll tell you something you’re going to like, you can use Figma for FREE! It has its limitations of course but if you are a student or freelancer, you do not need anything else than to create an account and start using it.
When we open a file in Figma, we see a layout similar to Sketch:
1) On the left side panel, we find something similar to Sketch, where we have our layers with the hierarchy created by us (Frame/Group/Element).
2) We have the option to add different pages in the same file and in the case of creating components, these will appear as a list in the lower tab, something very useful for drag and drop.
3) On the right side we find the property panel, but with an added value since we have different tabs where we can find our prototyping and coding (handoff for developers) options as well.
4) Multiplayer editing is one of the most interesting features in Figma, where a few users are able to work in the same file at the same time. In order to communicate with our clients or co-workers, we have the option of sharing our design file or prototype with just one link or even leaving comments on them to have conversations inside our designs.
5) In the prototype tab, we find simple prototype interactions but with a little more detail than Sketch, so we can create micro interactions such as modals, pop-ups or sidebars, something that together with the Figma mirror app is very useful for our user testing.
6) As long as it is a cloud-based tool, all our designs are going to be not only auto-saved but also uploaded to our unlimited cloud space, so we (or anyone in our team) can access them from any computer just with our internet browser.
7) With Figma, we can also use its integrations: Zeplin, Dribbble, and Avocode. We have no plugins but there is a new functionality to create arrays or replace elements (stack groups) very fast and I am sure you are going to love it.
CONCLUSION: Figma is a great tool to work with teams or share your projects with your clients in a fast and in a very effective way but remember that in order to use all its potential, you need to be connected to the internet.
In Framer, we find a new tool somewhat different from all the previously mentioned. This tool comes with a bigger learning curve as it’s not only a design tool but a coding tool as well! A tool for Designers and Developers to collaborate together. How is this possible? Thanks to React (here is an interesting article about it), but this is something that we will get into in the next post about advanced prototyping tools.
With the trial period, you can try Framer X without any restriction for 15 days after which you will have to pay a subscription of $144 a year.
1) Starting with our layer panel, we can see an automatically created layer hierarchy — something that as soon as we get used to, is going to make our life easier. Although the design structure does not have artboards (canvas) where we can place our designs, we have frames (containers) where we can nest frames with more content and more frames inside. (Inception).
2) We do not have the option to add more pages in our file, something that is not necessarily bad but it is something we will miss if we are used to it.
3) On the right side menu, we find the property panel with a new interesting category — code — where we can inspect, edit or import our own code to create code components for our design system.
4) As special uniques features go, we can design using different interactive tools as “stacks”, “scrolls”, and “pages”. Something else I really like is how easy it is to share my prototypes either with a link on your browser or a QR code so you can mirror it on your device.
5) About prototyping, Framer is probably the most powerful tool right now on the market, but only if you have coding skills or you work with developers so you are going to be able to build your prototypes with real code, not only visuals.
6) Here we have some bad news, in Framer, we don’t have any cloud service (yet).
7) Last but not least, Framer has an in-app store where a lot of designers or design teams upload their work so you can use them in your designs.
CONCLUSION: Framer is a really promising design and coding tool in order to create powerful prototypes and react design systems. Great tool to collaborate with developers. Maybe it’s not a tool for beginners especially if you know nothing about coding.
Follow the steps of more than a thousand career changers and entrepreneurs that launched their careers in the tech industry with Ironhack's bootcamps.