Keeping up with the latest web design tools in 2018 is getting increasingly difficult. Web design is ruthless, it is an ever changing and growing medium that will leave you in the dust if you don’t adapt with it. The tools readily available for it is a good indicator of this. Here at Slate we are constantly keeping up with the latest tools and seeing what they have to offer and how they can potentially help us design and collaborate more effectively. We have compiled the four web design tools that we have experimented with this past year that we feel are worth analysing and talking about.
Adobe XD
Pros
Repeat Grid Tool
The repeat tool grid is just so smooth and useful it deserves a pro point just on that tool alone.
Familiar
The adobe UI and design process that we’re all familiar with is present in XD, so the learning curve is something that comes almost naturally with XD. XD also works really well with its native siblings, and integrates well with the Adobe CC family.
ITS FREE!
Does anymore need to be said about this point?
Cons
Barebones
Adobe XD feels very skeletal in relation to its counterparts. It still has a lot of work to do with it’s lack of layout options such as pinning and layering
Slow to rollout updates
In comparison to Figma, Sketch and Framer, it’s no contest that Adobe XD is the slowest at playing catch-up. Although with the recent updates being dished out, this could be set to change.
Sum Up
Although still in its infancy, Adobe XD is taking the right steps in putting its name in the hat, with the upcoming update allowing the integration of community built plugins a la Sketch will undoubtedly help the growth of XD.
Figma
Pros
Collaborative
incredibly useful if multiple designers are working on one project
Familiarity
Familiar style and layout to Sketch so transition from Sketch to Figma will feel almost seamless
Browser version!
Figma has a web browser version as well as a desktop version, this makes it extremely useful for remote designing if your laptop.
Active and responsive team
In Figma they have a very open policy and listen to a lot of community feedback, to which they have been known to later implement.
ITS FREE!
The fact that a tool this powerful is free is truly amazing. I really don’t need to expand on this anymore.
Packed
Design, Prototype and Coding info all tightly packed in one lightweight program. Figma completely bypasses the need for balancing multiple softwares which can sometimes cause you to lose your flow.
Cloud based
Figma is incredibly quick, it’s comforting knowing that if your program crashes you never have to worry about losing your data. As well as the massive added bonus of being able to work on your designs remotely if you’re away from your computer, this is an extremely powerful advantage.
Sketch integration
Figma does a relatively good job of successfully reading and translating sketch files into figma. Although If you are planning on cross-platforming I’d recommend switching out early to avoid anything going haywire or missing.
Cons
No offline mode
you need an internet connection if you want to be able to use the application. For a lot of designers this is a deal breaker as in some areas of the world internet connection is not as readily available at reliable speeds. Especially if you are on the move a lot. We’re still not sure what the .fig file really does since if offline it still wont let you edit anything until you go online.
Sum Up
Figma’s approach to abandoning software service and switching to a cloud service is risky in theory but has worked wonderfully in practice, all you need is an internet connection and your figma account and you can work on your designs anywhere around the world without even having to carry a USB stick.Figma’s willingness to listen and apply community feedback only strengthens its position and Figma offering its services for free as well as being cross-platform will give it large edge over the other alternatives.
Sketch
Pros
Support
Sketch has a massive plugin community that adds a shedload of amazing features such as Dynamic buttons, content arrays, mapbox as well as direct imports for tools like Zeplin and Abstract, which are already incredibly powerful tools on their own. As well as cross-workflow programs like . Sketch has an incredible amount of support from it’s community that continue to tap into Sketch’s potential.
Nativity
Sketch being native to MacOS gives it a huge added bonus of being incredibly responsive and stable on its OS. No web design software can quite compare to Sketch on Mac
Simple UI
Sketch has a very streamlined and fluid UI that makes it very easy to pick up.
Cons
Only available on MacOS
Although it does run incredibly well on MacOS it’s also at the cost of designers that are window users.
Poor Vector Network
I think most web designers can agree that when it comes to making vectors, Sketch is seriously lacking. I personally find myself always opening up Illustrator if I feel the need to mess with vectors.
Sum Up
When sketch hit the ground, it hit the ground running, completely revolutionising web design making it THE best web design tool available for a long time. Sketch’s transparency and warming approach to open-source plugin applications makes it a very developer friendly software which means it heavily depends on a strong support base and community to keep it alight. Although it is definitely facing strong competition, it is still an extremely powerful tool that has a stronghold on the Web Design community and it will take other applications a lot to loosen that grip
Framer X
Pros
Familiar Properties
If you’re thinking about switching to Framer, don’t worry too much about coming to grips with an alien UI. Framer, similar to Figma, uses a familiar UI that we’ve all come to know and love which should make the transition to Framer that little bit easier.
Coding!
This tool can be very refreshing if youre a web designer who has a knack for coding but never gets the opportunity to code often.
in-depth prototyping
Due to the nature of framer being a code-heavy design toolkit, you are given a large amount of freedom to incorporate many dynamic options in the prototype stage that the other design tools don’t. Want to have a video player embedded in the landing? No problem! Want to see an interactive graph? Why not!
Cons
Coding!
Not every designer wants to learn how to code for the prototyping stage of a design. This can be quite intimidating for designers looking for alternative web design tools
Time-consuming
Because Framer X approaches design differently, it can take some time coming to grips with that, which means if you’re on time-limited project, it might be best to use a more familiar and visual design tool like Sketch, Figma or XD
Sum Up
All in all Framer X is in it’s infancy so it still has a lot of issues it needs to sift through. But it’s potential is limitless and even in its infancy its shaking the foundation that the current design tools are comfortably rooted in
For consideration
And I haven’t even scratched the surface of all the other web design tools that shouldn’t be underestimated — Fuse, InVision Studio and Origami Studio are still some tools that we haven’t even had the time to tinker with yet.
Posted: October 2018
Author: Slate
