- Design tools, there are a lot of them, right?
And I don't know about you
but I often feel a lot of pressure
to keep up with the trends of what
everyone else is using in our industry.
So I like to try new tools out,
just you know see how they function.
But for the most part in my design career so far,
I've been pretty reluctant to switch tools completely.
I think there's a big learning curve that comes with
completely learning a new tool
and fitting it into your work flow,
adapting it to suit how this new tool works,
it's a big deal,
and so I've not made too many major software switches.
About four years ago I made the switch from using
Photoshop for web designs to using Sketch
and it was an amazing decision,
it improved my design work flow immensely.
And I have made a video about my Sketch one on one intro
if you are interested in watching that.
After four happy years of using Sketch
as my web design tool of choice,
I've recently made the switch to Figma
and I wanna tell you why.
(slow piano music)
So unlike my switch from Photoshop to Sketch,
Sketch and Figma are very similar in that
they are both vector based tools,
they both have an infinite canvas where you create
like an art board or a frame and do your design on there,
the left hand side has all of the lays
and just like what I loved about Sketch,
in Figma when you click on an element
the right hand panel adapts to fit
what the properties are that you
can change for the element itself.
So all in all, as you can see, fairly similar,
but with Figma I've noticed a lot of really small details
that have been worth it for me to make the switch.
I first started using Figma when another designer
on our team was using Figma for a project
and shared a link with me to give feedback on it
and so that I could copy some elements from it.
I absolutely love that in Figma you can just share a link
with someone and they can have access to the project
to comment on it, to start editing it themselves,
to copy elements from it
into their own project of their own,
I love the collaboration aspect of Figma.
With Sketch if felt more like I would have to send the files
to someone via Slack to open up on their own computer
and it meant then if I made changes
that person's file would be out of date.
So in a team setting, those collaboration features
of Figma were what I first really liked about it.
As I was using it I started noticing little things
like if you delete all the elements from within a group,
the group itself would disappear because obviously
it's not a group anymore if there's nothing in it.
Really small thing but I would find that my Sketch files
would get quite messy with lots of groups where I'd
removed elements from them or whatever
but the group still existed.
Another nice touch is in the color picker,
you can use your arrow keys to make your color
lighter or darker based on the one that's already there.
I thought that was such a cool feature
and really came in handy for me
when I was creating our brand color palette.
Another thing is layers and moving them around.
I felt like in Sketch I was always having to find
the layer that I wanted and shift it up in the layers panel
because I could never remember what the short key was
for moving a layer forward or backwards.
I love that in Figma it is just the same
as it is in Photoshop, it's command and a bracket,
it's a super easy, short key to press,
and it makes it really fast to be rearranging layers
as you're designing something.
And I like that in their menus as well,
they show what the short key is in case you've forgotten.
That's not something that Sketch do and so that's why
I'd always forget what the key
for moving something forward or back was,
and in the end just go into the layers
and move them manually myself.
Something else I really like
is being able to copy properties.
So in Sketch you can copy the properties
of a shape or you know an object or whatever
and paste it onto a new one, but when you do that
you're copying all of the properties onto the new shape,
whereas in Figma you can also copy all of the properties
if you want to but you could also just copy the fill
or perhaps just the font or just the stroke.
It means if you've got something right in one place,
it's super easy to just apply it to other things.
You can comment on files in Figma too,
which has been really handy again for working
across a team and giving feedback to each other.
I know a lot of in house marketing or product designers
might sometimes share the Figma file with stakeholders
and get them to leave comments that way
but personally I still prefer using something like
Envision for that because I feel like then
people are seeing the design like full width in a browser
in it's intended state rather than being able to zoom out
and see all the art boards at once,
but that was just personal preference of mine
and how I like to give and get feedback.
But all in all the commenting feature is really handy.
And then possibly the best part is Figma is free.
With Sketch you pay for a license and I think you get
a year's worth of updates on that license and then you
stay on that version, the last version that you had
until you wanna upgrade again to get new versions.
With Figma you don't even need to pay for it at all.
They do have like professional team accounts or whatever
for if you want more projects, a bit more functionality,
but all of the things that you need to do,
to design a webpage,
you can do in the free version of Figma,
which I think is really cool
and a great contribution to design in general.
Another great thing is you can use it
whether you're on a Mac or a PC.
So for all those people who keep asking me
if there's a Sketch alternative for PC,
Figma is now my answer.
So while there are a lot of good things about Figma,
there are also some things
that took me awhile to get used to
and that I'm still not so sure about.
One of them is the way that frames resize.
The automatic state of it is that if you expand the frame,
it will try and like auto resize the content in it
and as a web designer that is not something that
I always want to have happen.
For example, I will lay out a frame but perhaps
I haven't made it quite long enough for all the content
I need to lay out on this webpage so I drag it down
and then all of my content goes to shit.
There are ways around this like you can hold the command key
as you're expanding it outward and everything will stay
exactly where it is but that just
took a little bit of getting used to for me.
Something that I struggled with at first,
but now I really like, is the way that Figma handles images.
In Sketch I just drag an image in and that was it,
it was like a bitmap image block that I could then
double click on to crop and you know
change saturation, things like that.
In Figma when you drop an image in, it actually makes it
like a rectangle with an image as the fill,
so if you want to crop it,
if you want to tile it or whatever,
you just come into the fill settings
and make your changes in there.
So that was a little bit confusing at first
but it's actually really handy because I would find
that in Sketch a lot of the time
I would be making a whole bunch of masks
to get my image to be the right size.
So it's much easier to do that if the image is already,
when you put it in, a fill of a shape.
Another thing is the way that Figma handles vectors.
So Sketch has notoriously not been great at vectors,
there are options and you can do most things
but I would find myself, for the most part,
going into Illustrator.
And in fact, I saw this Tweet the other day
that I thought was hilarious and very accurate.
Figma handles vectors in a completely different way
to what I've seen before.
They use what they call vector networks.
In usual vector programs, a point can really only have
two connections to it, but in Figma you can have multiple.
And it means you can create complex shapes,
it just takes a little bit of getting used to
the way that it works, but so far I've found
that I can do most things that I need to do
in Figma without needing to open Illustrator.
Then the last frustrating point that I've experienced
so far is that Figma is actually a web based tool
so it runs in your browser or it does have a Mac app
as well so you can essentially use that browser window
but have it as like an icon.
This is my first concern and main reason
for not trying it sooner is that I do a lot of work
without the internet.
Like say I'm in a cafe and the connection is bad,
I might just not even connect it to the WiFi,
or say I'm on a plane for example,
and actually wanna be able to work on my designs.
So you can access projects offline on Figma if you're
using the Mac app and you have
the tab open before you go offline.
So once you're offline you can't open up a project
and edit it from there but you can keep editing
any projects that you already have open.
So that is definitely a downside,
it means that you have to remember to open it
before you get on the plane,
before you go to that cafe without WiFi.
But so far for me the positive qualities of Figma
far outweigh this one and so I haven't found
that trade-off a bad thing yet.
In making the switch I found the learning curve
a lot easier than the Photoshop to Sketch
learning curve was, that was quite difficult for me.
But like I said, Figma and Sketch are pretty similar
in the way they work, it's just that Figma has these
little things that make the experience better for me.
So I've actually found myself having nice surprises
as I go about my process and find easier ways to do things.
To make the switch also you can import Sketch files
into Figma and they will convert them
into a Figma file for you.
What you can't do is copy an element in Sketch
and then paste it into Figma,
doesn't work that way unfortunately which has been
a little frustrating because it's meant sometimes
I've imported a whole big project with like you know
20 different iterations of an art board
just because I wanted this one element
to copy into a Figma file but hey ho.
So to wrap up, I would say that if you're a Sketch user,
it is definitely worth giving Figma a try.
I've found that all these small little improvements
have sped up my design work flow,
just made things easier for me,
enough that it has a real impact on the work that
I'm getting done at the end of the day
and that's what's important to me.
The switch is fairly new for me so I'm sure that I will
learn more about the tool
and have more nice little surprises to share with you
as I go about using it more and learning those things.
But for now I'm really happy with the switch
and I'm not missing Sketch at all.
I wanna be clear too that I don't think Sketch
is a bad tool by any means,
Sketch worked perfectly for me for years
and it's just that now I find that Figma suits me better.
At the end of the day the best design tool is the one
that you find fast and easy to use,
and the one that you feel most confident with.
I know that we designers love to talk about tools though
so I hope that you've enjoyed
watching this video and hearing my thoughts.
I wanna hear what design tool you use for web design,
what's your go to at the moment,
what have you tried out in the past
and not got on with so well.
Tell me about it down below in the comments,
let's have a chat down there.
If you're new to my channel as well,
then I make new design videos every single week
so hit the subscribe button
and I would love to have you back for the next one.
All right, I hope you have a good day
no matter what design tool you're using,
go create some good stuff
and I'll see you in the next video, bye.
(slow piano music)