Let’s talk about design tools.
It’s 2020 and there’s a lot of app options out there today for designing UI and prototypes.
Sketch and Framer X
Sketch has been around for some time now, and it’s probably one of the most popular and common design tools known today.
Framer X, on the other hand, is pretty new, and you’ll see lots of features that no other design tools offer, and in fact companies like, Google, Facebook, Uber use them for product design & development.
They’re both competitive tools. What I’m not gonna talk about is, “who’s the winner”. There’s no such thing as a win or lose, but what I’m going to do is give you an idea of where these products are positioned in terms of the capabilities, and what consequence you should expect when you choose one over the other.
Also, while many reviews talk about the difference in the ease of use or preference they have over the other when doing certain tasks. I won’t be talking much about that. Instead, I wanna talk about how do they fit into a real life product development workplace, and does it have a future?
Let’s get into it.
SKETCH
Sketch in One Word, “Orthodox”
First, I wanna talk about Sketch
If I were to describe Sketch in one word, I’d have to choose the word “Orthodox”.
What do I mean by that? When I say “orthodox”, I mean “conforming to what’s generally accepted as right, or that it’s established and approved by the general.”
I say this because Sketch is like a template for today’s many design tools, or the most expected skill from UX/UI designers. Many new design tools out there, like Figma, Adobe Xd, are very much like Sketch. In fact, I think they’re built similarly because Sketch established the standard for the typical UI design tool. It’s also that these new players want users to easily transition from Sketch to their own.
In other words, among tools like Sketch, Figma, Adobe XD, I don’t think there’s much of a consequence in choosing one over the other, because the nature of work for these tools are pretty similar, and on top of that, missing features can always be compensated by third-party plug-ins or apps.
In fact, Sketch has probably the biggest community among all the prototype design tools, and there’s a very good chance you can find features you’re looking for, either in a form of free plug-ins or a separate app that works well with.
If you take UX/UI classes, there’s a very high likelihood that they’re going to teach you in Sketch as well. If you’re looking for a job in the field, you may see a mix of Sketch & Adobe XD, but again, if you can use either one of them, then you likely won’t get rejected for not knowing the other tool. It’s that minimal of a difference.
Why Should You Choose Sketch
Let’s talk about some of Sketch’s attractions.
- Sketch is made very easy for designers to do their designer thingies. Like create & organize layer styles, text styles, and use them systematically. There’s plenty of features to help you get elements justified and lined up, and achieve pixel perfect design, if you put in that effort.
-There’s a relatively new feature called “Library” that allows you to save assets like symbols or styles into separate files, then import them to use globally. This helps modulate symbols and isolate the concerns of components from page designs. It’s great when you’re building a design system.
If you’re wondering, what about Figma? or what about Xd?
Here’s the deal.
Figma is
- Free
2. Browser-based
3. Allows multi-users to edit the same file at the same time (like google doc)
so if you just don’ wanna pay, if you’re using PC, or if you wanna poke the files around together with your buddies, then Figma’s great to try out.
Adobe Xd is
like, you took Sketch and Invision, and few other plugins and jammed them together. So if you’re company already has Adobe suite license, then great! , you can try out. Xd is also supported in PC.
Again, in my opinion, if you wanna general design prototyping tool, then whether Sketch, Figma, or Xd, they are all great, and once you get used to one, you won’t even care for the differences that much
So, what about Sketch?
But going back to Sketch, Sketch isn’t the most flashy tool with hip colors and marketing, but sketch respects its community and is widely collaborative, so it allows you to choose from a wide source what additional features or apps you want to introduce to fit your team’s workflow.
Does Sketch Have a Future?
Finally for Sketch, I wanna talk “Does it have a future?
While Sketch has created sort of the standard for design tools, it’s at its pretty high maturity level, at least today.
Sketch sure is the safest place to be today as a UX/UI designer, and you won’t feel like you’re short of anything. However, that could potentially change in the next 5–10 years.
Just the way a 2017 Macbook can already feel dated in the year 2020, technology and products born from it grow extremely fast. UI development can be said exactly the same thing. When automation becomes more and more common, there may be less and less demands for designers who can only push pixels.
UI design, different from tools like Photoshop, the output of the design tool is not the final output of the product, because once you’re done designing, now you have to hand off it to the engineers to have them build it. UI design stage, in other words, is vulnerable to the changes around it. Where constant changes are expected, prototype tool of the future needs to know how to protect it self in the product development. Does Sketch do that? It did 5 years ago, but what’s the next plan? or is it only staying as the standards of the 2010's?
While I believe Sketch will stick around for another 5 years with its extensibility and wide community, we have not seen any noticeable shift in their product direction nor have they released any new product. As designers, this tells us to always keep our curiosity outwards and discover new ways to design things.
FRAMER X
The New Generation Design Tool?
Framer X in one word…or few, is, A Production-ready UI design tool.
Framer X allows the designer to actually develop production-ready UI using codes. Now when you hear that, you may think, “oh god, I don’t touch code, that sounds far off my reach…”
BUT let me tell you.
when you open the app, it’s surprisingly simple and familiar. In fact, you can do the majority of the things you do in Sketch, right in Framer X. In fact, while Framer X expects some coding knowledge to be used in full capacity, it comes with unique tools that allow you to do animated effects without coding like Stack elements, Scroll within a frame, carousel, even effects like modals and fly-outs.
-Now, the Sketch-like part is just the visual tool. Again, with its coding compatibility, Framer X can literally build any UI components that function however we intend them to. We can even use existing code libraries, packages, or UI kits built and shared by others. If you go nuts with it, you can even build a working app UI just in Framer X.
For those who don’t plan to learn to code, don’t use it. You’re better off with Sketch. It’s not for you.
-For those who’re openminded about it, I know it still sounds a bit overwhelming but if you’re a designer, or plan to be a designer, then there are 3 good reasons why Framer X can be appealing to you.
1. Framer X saves you and engineers so much time
-Until not long ago, UX/UI designers and software engineers were kinda in their own separate space doing their respective works, ‘ designers designing experience and visual, and engineers coding UI.’ But in an ideal world in product development, these two roles were supposed to understand each other more than anyone, because though the actual skills and tasks are different, they’re both supposed to be building the same thing. So, for this reason, year after year, their distance inevitably got closer and closer, and now today, designers and engineers are just about to have an overlap with what they do.
This is where Framer X is credited its value. Framer X, in product development, allows both designers and engineers to develop UI referencing the same source of truth.
Why is that a value? because it gives designers reassurance that what they use is the updated and correct design. Traditionally, design tools only output visual art and slides, and at most, styles and size specifications. These get handed off to the engineers, and engineers had to build the UI from scratch, based on these designer centric handoffs. When engineers build them, the finish UI isn’t 1-to-1 with the hand-off design. This was unavoidable because designers and engineers speak different languages. So, designers had to find the discrepancy, create a ticket for the engineers to fix the UI, then review the fixes, and repeat these rounds of times. Often, in reality, discrepancies get overlooked and gradually, designers UI library and production UI library turned inconsistent. Framer X on the other hand allows designers to build UI that’s virtually close to production UI, so hand-off is smooth. In addition, when engineers updated the UI and components, designers will see the changes in their library.
To give you a lego analogy, it’s like designers design illustrated instructions for how to build a lego house, and engineers had to read this flat instruction to create the physical lego blocks and build the house . You can easily see how this instruction can get misinterpreted or short of information. But with Framer X, it’s like, designers can now create the 3d model of the lego blocks, build the virtual house, and hand-off the 3d file. Once engineers update the blocks, designers can see that update to their virtual blocks!
This ultimately means both you and engineers gonna save so much bandwidth maintaining the design systems, and stay happy together.
AirBnB was trying to do something similar by developing their own Sketch plugin, but with FramerX, it’s natively supported.is
2. Framer X makes a great place for you to start learning front-end coding.
While traditional front end classes put you on software like visual studios and teach you from the very basics starting with HTML, CSS, what’s a DOM and all that, Framer X allows mixing both codes and vector tools to design UI. This helps us to selectively learn and apply codes as needed, so you can decide how high to set your bars.
Framer still has few communities and resources due to its short presence, but Framer provides many very well-designed resources like instructions, actually readable documentation, step-by-step video tutorials, it’s one of the first platforms that’s both educational and powerful as a tool.
3. It’s super future proof.
Framer X supports a language called Typescript. Typescript is like an evolved & improved version of the popular Javascript, and it’s also an approved internal development language used at Google. Typescript is a very future proof language, and basically all you need to know to be a technical UI designer.
And with this Typescript, you’ll be likely using React. React , as of today, is the most popular and effective javascript library made for UI development. React is developed by Facebook, and it’s very likely gonna stick around for a while, so whether you use FramerX or not, you wanna learn about this.
And Framer X, with its constant update and added features, is definitely gonna stay as the strong candidate to be the next-generation standards. And hey, if they cant sell in, still what you learn from using it is going to be the most valuable and the future-proof skill.
So again, Framer X shouldn’t be out of your scope just because it asks for coding skill for these three reasons.
- It’s time-saving for both designers and engineers
2. It’s a perfect entry point for learning front-end codes
3. It’s super future proof.
Conclusion
Let me speed summarize what I talked about today
Sketch is :
An orthodox design tool that’s high demanded and large user population.
Pros
- Designer-friendly features and low learning curve.
- The ease to look for resources thanks to the widely established community.
- Great extensibility with a wide range of plug-ins and 3rd party apps.
Cons
- Rather low future proof.
- You need to manually maintain consistency with the production UI.
Framer X is :
A new design tool that empowers you with the ability to code components in addition to the traditional vector tool.
Pros
- Ability to effectively manage UI updates between design and engineers. This is achieved by allowing both designers and engineers to reference the same source of truth.
- It provides amazing educational resources for you to self-learn useful coding languages.
- The skill you acquire by using the app is super future proof.
Cons
- Somewhat steep learning curve if you wanna take full advantage.
- Relatively small community and limited resources.
Last but not least, I personally love that Framer X is a step forward into the future, and trying to solve a known problem in the real-life product dev environment.
While it’s currently a bit technical tool to leverage, a day may eventually come when they figure a way to take a step back and deliver the same function with an easier interface.
None the less, again,10 years from now, coding may be a common language. Gen Z on average already knows way more than my generation, and they’re now joining the workforce. The answer could be that it’s better off to start from what we have and what matters today than to wait for the right time.
