YT YouTube2Text

YouTube2Text → Transcripts → I quit Figma.

I quit Figma. — Transcript

by ManyLearn · 14,244 words · 1,943 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00recently I've moved all of my personal
0:02UI work into sketch from figma and uh I
0:05know some people might think I'm crazy
0:08but it's been an adventure so I thought
0:10I'd uh show you some differences between
0:12the two in terms of workflow what's
0:14different what's the same if you're
0:16thinking of also moving back to sketch
0:19um a kind of honest breakdown of of
0:22where it's better where it's worse and
0:23what is different and also why it
0:25matters so it's going to be quite a
0:26loose video if you've been to my channel
0:28before I tend to just talk I'm not very
0:31good at structured thinking so it's
0:33whatever I remember offand and if you've
0:34got any questions put them out in the
0:36comments and I'll address it in a future
0:38video I might do a part two on this uh
0:41and maybe do some more prep work or
0:42research because you know that's
0:44diligent anyway so here we are with
0:48figma and here we are with Sketch now
0:52for those who are not old like me uh
0:55obviously sketch was a big deal before
0:57figma came along and kind of took over a
1:00lawful lot of
1:01um uh the user base of sketch but figma
1:05effectively started out as pretty much a
1:07copy of sketch it like it sort of a Ono
1:10one it was like if you remember back in
1:12the day when Doom was a thing and they
1:13called fpss Doom clones fig was the
1:17first Doom clone and sketch was Doom if
1:19that makes sense um wow makes me sound
1:22very old but what I'm trying to say is a
1:25lot of things will be familiar and some
1:28things are better so for example if we
1:30create a rectangle oops do this again
1:32this there we go create a rectangle in
1:35sketch sorry figma the keyboard short
1:37cuts R and sketch it is also R imagine
1:41that and the same goes to most of the
1:43the creation stuff so in terms of
1:45creating shapes it all works in the same
1:47way as you might expect so we've got our
1:50object creation stuff down here and in
1:52sketch you've got all of it here so
1:54shape rectangle oal rounded
1:56Etc one key difference in shape creation
2:01um see all these these Basics are pretty
2:02much the same the difference being
2:04inside figma when you have a circle it
2:07has this Arc tool which is very handy
2:09which sketch does not have so we go and
2:12create an oval here it's just a
2:15circle so there's one key difference in
2:18terms of editing shapes it's very
2:19similar so let's just do a new oval
2:22could have kept the other one standard
2:24thing um of you know
2:27whatever let just split these side by
2:32side oops hang
2:36on painful I know let's just do this
2:39side by side and we can see a difference
2:42so sketch by default for some reason
2:44inserts a border by default I think it
2:45might be where to turn it off but shape
2:48creation's basically exactly the
2:51same you see the sidebar Works in almost
2:55exactly the same way there's a few
2:57differences um but broadly speaking if
3:00you understand this you can understand
3:01this the information density is a little
3:04higher on sketch which I think if you're
3:06a beginner or whatever or very used to
3:08figma um for the record I've not used
3:11sketch for uh five years I think four
3:15five years up until recently um you get
3:17used to it really quickly and also
3:19there's some things it does better um by
3:21having more buttons and a dens UI it has
3:23faster access to tools if we're talking
3:26UI 2 um there's a little hack to use ui3
3:29early for figma uh actually um the
3:33problems only compounded in figma in
3:35terms of hiding stuff sketch actually
3:37surfaces thing a bit better and an
3:38overall takeaway for me would be I think
3:40sketch's interface is actually overall
3:44better is it the better tool no uh does
3:47it do something about it for sure um but
3:50there's there's there's more Nuance to
3:52this and just oh my God sketches the
3:54past man quit living the past it's a
3:56very reductive mindset I think so let's
3:59go to a rectangle so we just do R create
4:02one there do R create one here now in
4:04terms of things like changing radius
4:06that works the same way in both so hold
4:09down command do a single Corner same in
4:11figma oh no was it was it figma Al it's
4:14alt in figma and command in
4:16sketch the color Pickers work very
4:18similarly the shortcut to pick Let's
4:20create a new one let's create a new
4:21rectangle let's make this one I don't
4:22know red eyes is the color pick a
4:25shortcut inside figma the same thing in
4:29sketch see the color Pickers are
4:30extremely similar almost have one's
4:31based on the other the keyboard shortcut
4:33is contrl
4:35C which is very nice you still have
4:37things like uh copy style I can't
4:40remember the default shortcut but if you
4:41go into I think it's edit copy uh yeah
4:46copy style you can copy i' this keyboard
4:48shortcut you can copy and paste Styles
4:50the same way as you can in figma the
4:52basic drawing stuff is all
4:54extraordinarily similar there's one keyy
4:56thing that sketch has that figma doesn't
4:58which is kind of sick is
5:00and I know you've been on the the
5:01feature list for a very very long time
5:03or the the request list for a very long
5:04time oh my God it's multiple borders
5:07well they call them borders and sketch
5:09they call them strokes and figma it's a
5:10common thing and something people have
5:12bitched about including me in figma for
5:14years uh also quite like you've got the
5:17draggy thing here you've got a little up
5:19and down arrows and sketch for the same
5:21thing but yeah you can add multiple
5:23strokes and figma but you can't do much
5:25with them because there's only one width
5:27so you can do some limited stuff so like
5:29oh no yes you no you can't actually so
5:31yeah independently in um sketch you can
5:34set independent centers and also
5:36independent widths on borders youve also
5:39got underneath here we have blend modes
5:42which is also I think in here where is
5:43it where is it in figma it's
5:46under there so that's one see that's
5:49another example where it's one click
5:50closer in terms of the Color Picker
5:53again the figma one was based on the
5:54sketch ones they work the same way so
5:57you've got gradients in fact actually
5:58sketch has more gradient
6:00you've also got the ability to create
6:02color variables um we'll get into
6:04variables later that's one of the
6:05negative sections um where as in you
6:08know we've got this on this page section
6:11we haven't got anything to find here so
6:12it won't find arbitary colors the only
6:13ones you've defined so it won just sort
6:15of say here's the cards in your document
6:17that's one thing I think figma does
6:18better but otherwise there's a few
6:20things it does differently for example
6:22let's uh yeah we've got things like uh
6:25what's this A that grad I think does
6:27figma do that then yeah it does do an
6:30angular gradient huh I'm on the stroke
6:32here so you can't really see it do that
6:34linear angular there we go so things are
6:38a little bit more direct I think if
6:39memory serves the image fill stuff you
6:41can't fill with um yeah so you haven't
6:44got these edit TOS in terms of like
6:46exposure all that kind of stuff they are
6:48lacking in sketch which is kind of sucky
6:50but what I think is better though if you
6:52do tile I it works the same
6:55way works better
6:58shocker but yeah um this all works in a
7:01very similar way you've got some
7:02predefined stuff here it's quite useful
7:05checkerboard noise pattern whatever and
7:07you've got the same options here in ter
7:08of tiling and you've got the size for it
7:10but you don't have these exposure
7:12contrast Etc controls which would be
7:14very nice uh if you click here you get a
7:16list of all of the things used inside
7:19the document already which is quite nice
7:21and also go here we've got data
7:24population um which is integral and
7:26sketch but we'll get into that in a
7:27minute so there's a lot of your sort of
7:30Basics covered over um in terms of shape
7:33creation assigning colors but let's talk
7:36a little bit about grouping and
7:38duplication so there's some differences
7:40here but some things are similar so one
7:42thing we do a lot in figma so if I've
7:45got let's say I've got four of these I
7:47grab all four I've got this button here
7:48which is tidy I put those into a grid
7:51and I've got you know controls to set
7:55spacing and if I change the color in one
7:56of these let's make this one red so we
7:58can see all of them grab it by the dot
8:01we get to swap over oops put that back
8:04up there we go you get to swap over and
8:05move around the instances well there
8:08never used to be in sketch it's one
8:09thing I've noticed that you that you
8:11have now hang on do that let's just do
8:13that same thing tidy and the controls
8:16are the same in
8:18fact see that all works the same way in
8:22fact actually the one in sketch feels a
8:24little more precise um which is kind of
8:27kind of cool kind of cool I kind of like
8:31it so that works the same way there's
8:34one other thing sketch does that I think
8:35it's stolen from XD which figma doesn't
8:38if you have two objects that are the
8:39same selected I think if you have
8:41multiple objects that are different
8:42selected it might also do it who knows
8:44that you can do this little draggy
8:48thing and uh create copies in a grid it
8:51doesn't do different objects has to be
8:53the same object let's do that grab these
8:56if I drag it this way and this could be
8:57anything this can be you know
9:00symbols components
9:03whatever figma does not have this after
9:06the box so there you go I'm not going to
9:09too much today um but the
9:13penil is slightly different it's a bit
9:15more fully featured than the one in
9:17figma you don't have the network thing
9:19so you can't do like this and it will be
9:22part of the same Vector this is more
9:23traditional in sketch where if you let
9:25let's do draw that same Arrow there we
9:28go and we do that press Escape click
9:30there we're out of the tool go back in
9:32and we're going to create see we're
9:34going to create a new shape this
9:36personally doesn't really bother me that
9:39this is different um because this is
9:41like illustrator Affinity whatever they
9:43all work this way it's a unique um figma
9:46thing but also um just again because of
9:50my like how much I use things like like
9:53uh Affinity design still the tools here
9:56just feel so they've always felt so
9:57annoying
10:00and minimal and kind of fiddly there's
10:02times like if I've got for example a
10:04common thing you know if you're a vector
10:06person going to do this and the keyboard
10:08shortcut is p in figma or V for Vector
10:12in in sketch you can change sketch
10:14keyboard shortcuts but back more than
10:15that in a minute so all the snapping
10:17similar and what's really common right
10:19let's say say press go back in here
10:22change handles but like what if I want
10:24to break this handle I don't get much
10:26control right it's just sort of like a
10:28crap sheet so if I do the same thing
10:29again but if I create a uh go done if I
10:33create myself an oval and then I go like
10:36this and like okay delete this handle
10:38what happens there um sketch is a bit
10:41more predictable and it's a bit closer
10:43to the meat and this works the same way
10:44I just press enter to go into edit again
10:46these ideas came from um sketch all the
10:50ideas in figma so yeah the same
10:51operation there deleting an anchor point
10:54I get kind of what I expect um this has
10:56always been a little bit of a crap sheet
10:57in figma I think the base vector drawing
10:59experience with the exception of the
11:01sort of like the network thing the node
11:03Network thing which I don't think is for
11:04me I've never been it's a bit of a here
11:07nor there thing for me to be honest um I
11:09think it's better in sketch to be honest
11:11with you so that's a thing um but
11:17yeah uh another thing is and this is
11:20getting worse in the new
11:23version editing the workspace um figma
11:27you can't um because it's a native Mac
11:30app you can you get this native so if I
11:33don't like the way it's organized I
11:34think I'm not going to use this tool I
11:36that is not going to use that not going
11:37to use that I'm not going to use move to
11:39back not use that data thing but I am
11:41going to want quick access to oval
11:44rectangle uh triangle and then uh oh
11:49let's just say yeah the artboard tool
11:52who knows there we go and I can also you
11:55know customize all this very nice so
11:58another thing which is good fun just
12:01this does do it on side yeah so one
12:03thing that's inherited from sketch is it
12:04doesn't have the resizable right hand
12:07bar which is a ui3 feature inside figma
12:10the sketch never implemented either so
12:12let's jump in quickly to components or
12:16in sketch's case they're called symbols
12:18same thing so if we just go and create a
12:20lovely rectangle once
12:22again I you just thought we do that just
12:25uh corn
12:27smoo we're doing corn smoothing there
12:29you go there we go and this all works
12:32the same way as well let's create the
12:33same rounded rectangle apart from this
12:36is I don't know if it's better or worse
12:38if we change into separate Corners you
12:40get a pop over this just flips the UI
12:43around also you've got a little drop
12:45down with different kinds of squaring
12:46off that kind of thing again there's a
12:49thing with the general tone is sketch
12:51exposes more controls to you quickly and
12:53actually it's a little bit faster to
12:54working and things like if you've got
12:57ends stuff like that they're just a
12:58little less hidden so if we go into
13:00stroke and then we go into three dots
13:02we've got the joins we've got the stroke
13:04style I think we've got ends which are I
13:06think underneath where are the ends
13:10let's just do this let's just do a
13:11little line and we go yeah we go so only
13:14on line you get the ends you get to
13:15choose the end cap or if it's got a
13:17whatever um sketch does it a little
13:19differently so ends are right here joins
13:21are right here and then you've got your
13:22dash and dashing stuff here so it's just
13:24more information dense but that does
13:26make it quicker um you do have to click
13:29around a little less
13:31also um in sketch you've got a command
13:34bar which is like let's just grab this
13:36command K and do rotate so rotate jump
13:40straight into a tool same thing in in
13:42figma I guess but I find I don't know
13:44why but I find this more useful in
13:47sketch compared to this in figma so you
13:51rotate I I just I find myself using this
13:54Less in fig more in sketch and I don't
13:56know why it feels more conducive to
13:58speak and sketch where figma is just a
14:00little bit more it's a looser interface
14:02this feels a little more focused you get
14:04the feel once you're in there now let's
14:06move into what saying second go into
14:07symbols let's create this again and
14:09we'll recreate our rounded pill-shaped
14:12rectangle guy amazing so command
14:18k
14:20whatever we've got ourselves a um symbol
14:25sorry a component and then we do this
14:26same thing we get a different thing you
14:28can just I think there's a way to bypass
14:30this I can't remember what it is you
14:31don't have to name it necessarily um but
14:34you get an option here so I can re well
14:36I can rename this the same way this all
14:38works the same of course rectangle and
14:39it says send symbol to symbols page so
14:42by this used to be default Behavior it
14:44creates a page and it keeps them all
14:45separate which is fun let's go back a
14:48little bit if we don't do that we're
14:50going off script a little bit we're
14:51going to create that symbol again
14:53uncheck this rectangle it will stay in
14:56place and it will create a duplicate of
14:58it where is sketch sorry figma this is
15:01getting very complicated figma
15:03doesn't it just has the the master one
15:06there and then a copy just doesn't have
15:08the you know the notation across the top
15:10let's do this quickly doesn't have the
15:11notation across the top spoiler for
15:13later
15:14on whereas yeah uh sketch does l this
15:18and also yeah it works the same way it
15:20just looks kind of kind of different
15:23basically it's all good it's all good we
15:25can see we've got the same thing here
15:27where we have definition and we've got
15:28distinction saying I an artboard I'm
15:30purple because I'm a
15:31symbol and uh one more thing I'll jump
15:34in here quite quickly is you can't do
15:36this double click on the title to rename
15:38which press command R and it just
15:39renames it's not the end of the world um
15:42and actually sometimes I find it kind of
15:43annoying when I'm trying to drag because
15:45I've got a habit of um there a an
15:47overlapping frame thing that happens in
15:50figma sometimes so when I I'm selecting
15:51frames and proper designs um I'm always
15:54very careful to actually select the
15:56artboard so I don't get things I don't
15:57want if I want to move stuff around
15:58because sometimes things end up in
16:00frames and if you're doing things
16:01quickly um they'll be over the frame but
16:04not inside it sometimes I don't know how
16:06it happens I work I don't you know I'm
16:10I'm too I'm too slap Dash to to pay
16:12attention sometimes but the way I've
16:13worked around is like get the the the
16:15habit of clicking the title of a of a
16:18frame um instead of just dragging a box
16:21around it so when I'm clicking the title
16:22of the frame sometimes I accidentally do
16:24this and it's kind of annoying so
16:25sometimes I've got um I'll do this right
16:30loads of loads of frames any that so
16:32actually in a way I don't really care
16:33that that's not there and Commander just
16:35I mean that I think works also in no it
16:38doesn't actually command I can't command
16:40does replace I think so that's another
16:43thing as well past to replace is not
16:45there by default inside sketch but there
16:47is a um a plugin that does it by a guy
16:51called Daniel Eden there's lots of
16:52plugin the sketch we'll go we're getting
16:55off track here we'll go back so we're in
16:57a situation we we got thing here we got
17:00two of these
17:02so we're not going to go too deep on
17:04this it's a big topic but this is where
17:06these two applications diverge quite a
17:07lot and the biggest way in which figma
17:10kind of
17:11wins um
17:13is yeah uh components and also the
17:16dreaded Auto lout dreaded everyone loves
17:18Auto I personally don't I think it's
17:21overrated um as a tool um I think like
17:25the first thing people go like oh the
17:27first thing I do is always click this
17:28button straight away I'm like oh well do
17:31you do you need it do you always need
17:34it I I code so I me pretty quickly I go
17:39from doodle into just doing it in CSS
17:42rather than like a version of CSS that's
17:45worse so then going into CSS if I'm
17:47working alone that is I'm not if I'm I'm
17:49working with other people it's different
17:50but if I'm working on a personal project
17:52or freelance project um I don't actually
17:55use Auto layouts that often occasionally
17:58mostly the basic version where you have
18:00like a list of things and you pop a new
18:01thing in the list and it maintains
18:02spacing spoilers later on sketch does
18:04that basically that's that's kind of the
18:06bit the sketch can do but anyway we're
18:09talking right now about components
18:10themselves versus symbols so um symbols
18:13have overrides uh and you manage them
18:15this way so here we go allow override
18:17rectangle fill anything inside this this
18:20component let's just do a little um a
18:22little thing in here little circle look
18:25at him isn't he lovely we'll make him
18:27red cuz he's and yeah we can we can
18:30determine which things get override I
18:31like this is very explicit um and a
18:34little faster I guess than the way you
18:36work in in figma if you do the same
18:38thing inside here we'll just go in we'll
18:40go and we'll make him
18:42red look at that that these are
18:45identical you can't tell them apart one
18:47other side note actually is the snapping
18:49look at that look at that space into the
18:50edge that's perfect that's not going to
18:52give anyone an aneurism let's just let's
18:54just do that let's just 29 oh well the
18:56wrong size anyway whatever
18:5919 that that's close enough that's close
19:01enough so the snapping in sketch uh is
19:04better than there's it's a weird feel
19:06thing I remember when I first moved to
19:08figma my first observations was snapping
19:11felt worse in this really intangible way
19:13it might be a feel thing I don't know
19:15but um snapping an object placement on
19:18on in the workspace feels Tighter and
19:20sketch and again that's another General
19:23thing where although sketch is lacking a
19:25lot I'm trying to be nice to sketch here
19:27because I'm going to be scathing soon
19:28don't worry is um there's a there's a
19:32Polish and tightness to sketch that
19:34figma doesn't have where it's an older
19:36application but also where it has fewer
19:38features and they haven't exploded in
19:39growth so much uh there's not saying
19:41it's polished across the board there's
19:43lots of little low hanging fruit bits
19:44there's lots of things that can be
19:45improved but in general sketch feels
19:47more together in a lot of ways you know
19:49in terms of like some of the the meaty
19:51things you do all day kind of feel
19:53better moving things around having the
19:55snapping work really well I don't know
19:58there's there's of it that just feel
19:59better you know feel more refined feel
20:01more polished and also it runs faster
20:03that's another big thing because figma's
20:05ultimately uh it uses lots of um like
20:09decent uh was it uh web assembly there
20:12you go lots of web assembly to make it
20:14run really quickly in the browser But
20:17ultimately it's it's a browser based
20:18application which has memory limitations
20:20and also it means doesn't have access to
20:22lots of lower level things you get
20:23inside desktop applications which can
20:26deep Drive deeper into into the OS and
20:28and leverage some things that browsers
20:30just can't ultimately so there's always
20:31going to be some seiling on what figma
20:34can do performance- wise and
20:36functionally that um sketch does not
20:38have um I guess but the big trail of
20:42obviously is sketch is only on Mac
20:43anyway we're getting off topic sorry get
20:45up again so one thing is I do this a lot
20:49is under properties we have Boolean you
20:51know sort of thing we have instances we
20:52have text whatever you so this works so
20:55let's let's make a button here let's
20:56call this like button that text is is
20:58appropriately sized isn't it how big
21:00have I made any of this let's just make
21:02that 20 see how well prepared I am uh
21:06yeah whatever oh look at that color it's
21:08selected oh baby poo brown let's make
21:11that a little smaller I think I'm not
21:14going to replicate that part in fig
21:15let's just do this quickly uh
21:18button button one which button and then
21:20we'll make the fill no let's go with
21:23let's go with that no let's go go with
21:24that let's go the same thing let's do
21:26the same thing let's make it baby poop
21:27brown and then uh what What's our font
21:31here I don't care my font is these have
21:32to be identical let's just uh do that
21:36also let's keyboard short cuts the same
21:37for for scale again this an idea that
21:40they took
21:41from sketch same thing works the same
21:44way press K and then you go to scale
21:46same thing here you get your scale
21:48factor it's all pretty much the
21:51same right so we have our two things
21:54there so yeah if we go properties and I
21:55do text name text or call this one like
21:58button name value button whatever oops
22:03property and I have to come in here and
22:06I have to go to there we go button there
22:08we go sound so now if we create a copy
22:10of this and we've got
22:13our hang
22:16on yeah button
22:18name there we go and then we go to here
22:22we've got our Linked UP thing sorry Che
22:24me a second
22:25hello so this process is actually a
22:28little quicker so we've got the same
22:29thing here and you just go well whatever
22:32and then we just create a copy drag out
22:35rectangle and then we just
22:38get it's faster um again you lose some
22:42flexibility so on this base layer I
22:44prefer this workflow to to this for
22:46individual overrides it it varies but
22:49then also this goes so much deeper in
22:51fig it's not even funny so things like
22:53variants I'm a big user of
22:55variants I love them I don't like over
22:57complicating things
22:59so a lot of the times I work in variance
23:00and I just do variant switches so if we
23:03just grab out let's just grab out
23:04rectangle one let's just go and just do
23:08assets hurry up hurry up local
23:11components button there we go and then
23:14we'll just do variant I they look the
23:18same there we go let's make that green
23:20and make variant three like and new blue
23:23there we go look at this beautiful work
23:24we're doing here and then you name the
23:26variant you probably know this already
23:28right that just does not exist in sketch
23:31um variants aren't the thing which which
23:34kind of sucks and then the properties as
23:35well we got things like Boolean you can
23:37turn things on and off so I can change
23:38Val you know whatever you can also
23:40create booleans for variants as well all
23:43this sort of stuff U and instance
23:44swapping basically this is your option
23:47in sketch is this one thing here text
23:49obviously and color overrides are a
23:52thing um so if we do the same thing here
23:55inside sketch the workflows basically
23:57kind of old school
23:59um so we'll do rectangle copy and we'll
24:00do another rectangle copy I should have
24:02renamed these first whatever and then
24:04we'll call this one rectangle for slash
24:07one and you know how this works putting
24:10the a for slash in to a name puts it in
24:12a group
24:14two and uh I'll call out when these
24:17things are are figma Originals it's not
24:19like Told You So sketched it at first
24:22thing well it kind of is but it's it's
24:25useful context to see um where sketch
24:28has may be grown since you might have
24:30used it or or where it may not have
24:33grown spoilers it's more of the second
24:35one yeah and like basically the workflow
24:37is um yeah I'll pull out this version
24:40and I've got this option to to swap them
24:43right and this actually shockingly is
24:47and here's here's where things get
24:48contentious because like this goes so
24:50much deeper over here I can I can build
24:52a prototype with in a component which
24:55makes it like interactive Within
24:58itself um do you I mean like there there
25:01this goes so much deeper we've not even
25:02touched on variables yet right I mean
25:05let's touch on variables
25:08no just they aren't here the exception
25:10of color styles and tex Styles not a
25:13thing um variables are awesome in figma
25:16they just don't exist in sketch but
25:17here's the question right here's the
25:18thing with all of this
25:20is a lot of the times and this is the
25:23the adjustment um I'm not saying this as
25:25a as just a blind defense of of one
25:27product over another is um how often do
25:30you need to and and it's it's a semi-
25:33rhetorical question I do know right
25:35about all the scenarios where this is
25:37useful but there is uh the idea of a
25:40tool and leveraging a tool because it's
25:41there or leveraging it because you can
25:44right and uh in
25:46reality and again this I think this
25:48comes a lot from my sort of like semi-d
25:51developer background there's a very
25:53strongly held concept there's a handful
25:55in development but one of them is
25:56premature optimization there's dry don't
25:59repeat yourself uh and there's there's
26:02uh premature optimization and they're
26:04enemies of each other so a common thing
26:07a lot of developers hold there is the
26:08idea of don't repeat yourself that is
26:10basically if you can do something once
26:12do it at one time and then redo it right
26:14so that's the idea of if you make
26:16something just make it an auto layout
26:17straight away make it a component
26:19straight
26:20away you'll use it again and uh I mean
26:24on paper yes but also can of no and um
26:29the way a lot of the tools in figma and
26:32lean you to go is to make really
26:34complicated structures I've been guilty
26:36of this myself right and that leads into
26:39the opposite end of that Spectrum which
26:40is called premature optimization that is
26:43you've made a system so um brittle and
26:47um in a in in an attempt to make it
26:49robust you've chosen the wrong time to
26:54abstract parts of the system so if you
26:56change a rectangle into a component
26:59that's an abstraction right if we create
27:00a variant that's an abstraction If This
27:02Then becomes a subcomponent that's
27:03another abstraction we've created a tree
27:07of
27:07dependency from one to the other to to
27:10the other right we're just like doing
27:13this I know I'm doing this the most
27:15stupid way ever we're just doing this
27:16right we're just creating a thing and
27:18then we we've created a system right we
27:20know this this is this is what people do
27:22in figma the thing is where conceptually
27:25this is a younger or or less common
27:27concept for a lot of design people
27:29versus developers it's a less it's going
27:31to sound judgy but a less mature
27:33scenario where you as a developer
27:36because the systems get more complicated
27:38and and the the nature of of what you're
27:40doing is more intertangled and more more
27:43precarious it's a bigger topic um you
27:46get stung by it much quicker and where
27:48it's an older um an older career people
27:53have much more time to think about it
27:54and I think it's one of those things
27:57which is going to come to more design
27:58people soon but it's like picking the
28:00right time to say I'm going to do this
28:02or how complicated you make this I've
28:05seen people spending a lot of time
28:06saying I've got to update got update my
28:08design system they spend a day or two or
28:10longer or weeks depending on the size of
28:12the project um updating something which
28:15ultimately makes no material effects to
28:17their end work it's just maintenance
28:19Works they've created and they've not
28:21necessarily stopped and looked at some
28:23of the necessity of some of those things
28:25along the line that's that's
28:26optimization that is when you don't want
28:28to be dry and not and you do want to
28:30repeat yourself because sometimes it is
28:32better to repeat yourself and sometimes
28:34it is better to wait to optimize and
28:37sometimes it's better to keep the
28:38optimization simple um and you guarantee
28:42you will run into this and it's a very
28:44incent it's a very uh well internalized
28:46concept for developers not so much in in
28:49uxui people yet they'll get there I'm
28:52not saying no one does it but it's it's
28:53important and the core my point comes
28:55back to this comparison is you have
28:58fewer Tools in sketch and that's a bad
29:00thing objectively in some ways it's a
29:02good thing in others because you can
29:05create complexity and actually this can
29:07be just as brittle having fewer tools
29:09and having simpler ways of abstracting
29:12systems actually sometimes can be
29:13beneficial right you can build a very
29:16big comp complex multi-layered system
29:18and I've done it I've created window
29:19systems that allow for different
29:22configurations of things to go in there
29:23and floating panels that dock in certain
29:25and like this massive nested mess of a
29:28layout and I'm pushing up against the
29:30the limits of what Auto layouts are kind
29:32of supposed to do and all these Edge
29:34case scenarios and delving deep and all
29:36that spending all that time doing that
29:38which I'm sure again most people
29:39watching have done and then at some
29:41point I've kind of gone why because the
29:44end result is this gets redone in
29:47systems that are more capable than this
29:49right if we think about react or view or
29:51whatever your front end is built in they
29:53have much more uh powerful mechanisms
29:57for managing complexity in their
29:59component compared to figma and if you
30:02are the developer or if you have a good
30:04understanding about development process
30:06you can actually start backing off from
30:08some of those things because if they can
30:09be explained in another way instead of
30:11demonstrated in a very long- winded way
30:13VIA something which ends up being
30:15ultimately a picture that a developer
30:16looks at then red does the work you're
30:19duplicating work as well so that's a
30:22learn to code everyone should learn to
30:25code I think ux people should learn to
30:26code um just if we not going to do it
30:29just to get a good understanding of when
30:31to hand over and what to hand over and
30:32not um but
30:35also
30:37um yeah it's uh you can save a lot of
30:41time that way and save a lot of
30:42Heartache by not making the systems
30:43complicated and in a weird way getting
30:45back to my main point and stopping the
30:47the the the lecture
30:49about whatever the hell I just said
30:53having fewer tools and sketch doesn't
30:55necessarily materially make it worse
30:59universally this has a big caveat of it
31:01depends on what you're doing right if
31:03you're working across multiple Brands
31:05the way figma handles um Design Systems
31:09is just kind of better um the library
31:11system and sketch exists you can create
31:12a library of of stuff and save at the
31:15library in fact actually there's one
31:16feature in sketch I'll show you in a
31:17second which I really like and I wish it
31:19was a little bit more concise uh inside
31:22uh figma but yeah having fewer tools is
31:26kind of good so we have the base level
31:28here we have um nested variants and
31:32variant swapping these can also respect
31:35scale so if I come into rectangle three
31:38make the artboard um like that beautiful
31:42beautiful work and then come over here
31:45click on this swap at original size
31:47three will swap out at the correct size
31:49for three right it's it's pretty
31:52straightforward so it's actually very
31:54simple set of tools but you know
31:56shockingly a lot of the time it's kind
31:59of kind of all you
32:01need
32:03uh don't get me wrong it can be slower
32:05but in terms of coming back and making
32:07changes actually a lot of the time is
32:09not actually that much slower
32:11so again it varies as always things
32:14there's an asterisk in the corner saying
32:16all of this varies and your
32:19susceptibility uh and your your needs
32:22but just to say it doesn't have X
32:24feature it's out the window I don't
32:26think you're thinking hard enough um and
32:28you've got to we up as a pro and con
32:29list instead of just a well thing is
32:31missing me no U it's not that simple um
32:34and also there's the good the reason for
32:37using sketch sorry I'm still on like
32:38rant mode I'm get back to actual
32:40tutorial stuff in a second but is
32:42because you can buy this for $100 us
32:46once it's $100 a year for updates but
32:49you can buy this once and keep it
32:50forever it's a desktop application I'm
32:52going to talk in a second about
32:53collaboration because that's another big
32:54piece of this it's a desktop application
32:56it runs like a desktop application you
32:59get the choice of having multiple
33:01windows imagine that or tabs you have
33:03both you can save files locally if you
33:04have the cloud version of sketch it
33:06comes in two flavors you can have a
33:08mixture of local documents or remote
33:10documents and you have a lot of those
33:12collaboration features you have the best
33:13of both worlds in a lot of ways it's not
33:15just a this is worse because it misses X
33:18feature um some I think about more
33:20holistically they're just kind of
33:22different products it's not necessarily
33:25one is massively better than the other
33:26but that being said some things in
33:28sketch do my head
33:30in I'm not saying it's that is not what
33:33I'm saying here the main caveat is all
33:36this it depends let's get back to what
33:38we're talking about so yeah that is
33:40symbols versus components symbols
33:43technically worse but you know
33:46actually yeah there's some there's some
33:48good stuff here as well it's fine and
33:50the workflow for determining overrides I
33:52actually massively prefer because it's
33:54less long-winded um and one thing also
33:57if things are did I remember correctly I
33:59could get this entirely wrong I think
34:01this is a very early sketch thing again
34:03I've not been using sketch game for a
34:04while that's create component from here
34:05we'll call this one blob there we go and
34:09we'll put a instance of blob inside
34:12rectangle and then there we go and I
34:16think
34:18yeah yeah so I can s so if I come into a
34:21instance of rectangle let's just drag
34:23out one of
34:24these there we go yeah automatically
34:28nests um the children which I quite like
34:32because you've got that thing of in If
34:33You by default inside figma if we do the
34:35same setup we'll just do a rectangle and
34:37we'll do an oval and side right look at
34:40that beautiful beautiful stuff make that
34:43red and then what we'll do we'll create
34:45a component here Boop and then we'll
34:47grab this create component here Boop and
34:49then we'll grab this take this out come
34:50back to here make sure got selected and
34:52then what we'll do is we'll put that
34:54inside there we go nice you inside
34:58yes yes no you're not you're not
35:01H hold
35:03up how dare you defy me like this there
35:07we
35:08go put lips inside rectangle but
35:14what oh wait oh it's not it's not an
35:17instance forgive my stupidity there we
35:19go so I was like what am I doing wrong
35:22here right so we've got an instance of
35:23ellipse inside there and we come inside
35:24rectangle to and by default we have the
35:27options you know whatever for this but
35:29you know what we to to get to this we
35:31have to do this double click thing and
35:33we can still do this instance swap but
35:36it's on a double click and here it's
35:38just here and I remember when I first
35:40moved over I I massively preferred this
35:42from sketch and this used to piss me off
35:45and you can choose I think on this level
35:48uh am I lying no I can say get rid of
35:51ail and that just go ohang on BL not
35:54blob there we go and you just turn that
35:56off there I find this override workflow
36:00way faster uh inside sketch so it's like
36:02a case of like an efficiency thing I'm a
36:05big efficiency boy I like efficiency uh
36:08and there's certain things that that
36:09that kind of nicer I prefer this
36:10workflow this works nicer it's variable
36:13it all depends right so we've talked
36:14about sorry I know there a big aside and
36:18a deep topic um and we're gonna move on
36:20into the the the next deeper
36:23topic sorry which is auto layouts let's
36:26get rid of all of this crap don't need
36:27any this right let's do the same with
36:29here
36:31is auto you know how it works it's your
36:34best
36:34friend oh what we're doing do shape
36:36let's do
36:38a yep let's do a frame and then we're
36:41going to add an auto layout and then
36:43create a rectangle and we going to drag
36:44that in it's going to do that and then
36:45we're going to create a another
36:47rectangle and drag that in it's going to
36:49do that and you know how this works
36:51Direction spacing between the objects
36:53all this kind of
36:54stuff cool now
36:58um sketch doesn't have Auto layout
37:00basically it has something
37:02similarish um called smart layout I
37:05think apparently it predates uh Auto
37:07layout I think and um I think Auto
37:11layout wasn't quite I don't think it was
37:13out yet when I first started using figma
37:15um I got enticed originally I think by
37:17the the collaboration stuff but yeah
37:20there is no Auto lout inside sketch but
37:22I'm still getting my head around it
37:23because it's not it might just be muscle
37:26memory but I find it less in inuitive
37:28but here is my setup that I've
37:29pre-prepared for you which hey that
37:32looks like it does something quite
37:33similar apart from when it
37:36doesn't I'm still getting my head around
37:38this this is smart layout right and it
37:40works kind of the same but it's Dumber
37:43but also similar to what I saying about
37:45the the the symbols thing it's kind of
37:46like not necessarily Dumber in a bad
37:49way um but also kind of in a bad way so
37:52one thing I've not mentioned so far is
37:53the idea of artboards versus frames in
37:56sketch artboards are artboards you can't
37:58Nest them so frames frames inside frames
38:01and you have the whole frames versus
38:03groups debate um sketch it's either
38:06groups or and groups sit in artboards
38:07and that's the end of it and again where
38:10this this this delineation I think
38:12between um frames versus groups inside
38:15figos an extra layer of things to think
38:17about I think I've always thought kind
38:19of sucks um this is how they display and
38:22how they behave and there's different
38:24behaviors it's like well can't you make
38:25groups behave the way frames do
38:28and just get with the idea of nesting
38:29frames and you have a uh you have pages
38:32and then the main things you're looking
38:33at and everything else is a group but
38:34groups can do
38:35things that that's always spoken to me
38:38um you may vary it seems an arbitrary
38:41Line in the Sand really but
38:44um yeah that's just that's just an
38:47observation well if you do like that if
38:49you're like me and you think why why
38:52behave difference uh doesn't matter that
38:55much then welcome to SK sketch because
38:57sketch just has groups you don't you
38:59don't nest artboards and side artboards
39:00you just have groups or or or symbols so
39:03yeah we've got we've pulled out two
39:05predefined symbols here called rectangle
39:07one and I think this one's called
39:09rectangle one copy what's inside here
39:11yeah we go rectangle and whatever and
39:12we've set up some some um some variants
39:15in here or some some overrides in by
39:16through nesting so we've got one two and
39:19three this works the same way attaching
39:21and then editing zooms you over to here
39:23back to instance it all works it's
39:25nether be on a separate page or it can
39:27be on this page all works the same way
39:29you get color overrides which is fun one
39:33thing I forgot to mention earlier
39:34actually if we create a bunch of stuff
39:37well cre three stuffs we've got three
39:39rectangles we'll make one red we'll make
39:42another one uh that color another one
39:45this
39:46color whatever
39:48green we get Phill dot dot
39:51dot we do the same thing in figma if we
39:54create
39:55rectangle rectangle
39:58rectangle make one you see you see what
40:00I'm doing
40:02here
40:05do D I get selection colors I miss this
40:09I really that's one of those things I'm
40:11like no just straight up guys just just
40:13just just just steal that they've stolen
40:14everything from you just steal some [ __ ]
40:16back that's one thing to steal anyway
40:18I'm getting back to the point smart
40:19layouts versus Auto layouts you know an
40:20auto layout Works smart layouts like a
40:22dumber version of it but it's not
40:23actually that bad I've always getting my
40:25head around it now because I'm so used
40:26to the the used to the way of working in
40:30Auto layouts um it's a bit of an
40:32adjustment because it's kind of simpler
40:34but if you're not used to it it's feels
40:37counterintuitive that makes sense so in
40:41so a smart L can be applied to anything
40:44right it can be inside a group a symbol
40:46uh an artboard um so instead of having
40:48to worry about frames you just apply the
40:49state to a thing rather than having a
40:51certain type of object which can do the
40:53thing which is kind of if you're not so
40:56used to the Paradigm you're used to it's
40:57kind of better but yeah we've got our
40:59symbol here we've got our rectangle
41:01we're going to drag this in we'll drag
41:02in a second one look at those beautiful
41:05beautiful look at that lovely and uh
41:08we'll create a few more copies I do like
41:10this feature and then we'll come up to
41:12here and we'll do layout vertical now
41:15this pays attention to the gaps between
41:17all of these make sure they're evenly
41:19spaced they should be there we go and
41:21now if I go and create a new one it does
41:24the the figma thing I did that a little
41:26bit quick let's do that again we'll grab
41:31a and there's one thing also to be said
41:33so when I'm dragging these off screen
41:35I'm pressing
41:36C which brings up this symbol Searcher
41:39thing which I quite like um but one
41:41thing again it's a weird logical thing
41:44of just going straight to straight to
41:47the variant that I want the version that
41:49I want via nesting it's like that thing
41:52of that extra click you've got in the
41:53Fig where you go well it's a it's got
41:55all these conditional things set to it
41:56so let's drag one out and click all
41:57these buttons to make sure it's the
41:58right one there is something to be said
42:00for like well that's the one I want
42:02let's just use that one I don't know I'm
42:05not saying this is better or worse
42:06anyway once we've got I mean these are
42:08symbols this could be anything this
42:09could be a rectangle if I drag this in
42:11we see we can either ignore the spacing
42:14so just stick it up
42:16or we can just do that and it will
42:19respect the spacing of everything around
42:20it but you can break these rules if I
42:22change this everything will move out the
42:24way without any of the constraint
42:27things inside Auto layouts which is both
42:31a blessing and a curse it means the
42:32setup of this is is less flexible but
42:35simpler and your base level of what you
42:37do your basic version of an auto layout
42:40uh this is probably actually going to be
42:41quicker also when it comes to like let's
42:43say I want this one to be like this if I
42:45do this still it it respects it you know
42:50and I don't have to set this as as
42:52absolute or really do anything I just
42:55just do I create the thing and then add
42:57a new thing to it it'll just work the
42:59same way and if I make in the artboard
43:01scales correctly and if I I can let this
43:03like over scroll or something it it's
43:06just kind of yeah you know and if I want
43:08to override it I just just kind of can
43:10same as well as I've got like a variant
43:12which changes size it respects that as
43:15well
43:16so and this works ins side groups so
43:18it's like it's it's the the the remit of
43:20smart layout is really uh these
43:23positions where there's a pattern pay
43:26attention and uh yeah and if there's not
43:30a pattern if something is different Let
43:33It Be Different it's it's not bad it's
43:37uh it's a different way of working that
43:39I'm not I'm not really used to yet I'm
43:41still getting my head around it but
43:42actually it's it doesn't seem that bad
43:45and for you know if what we saying
43:47earlier about that really crazy
43:49convoluted nesting thing of of of uh
43:52Auto layouts is this breaks apart pretty
43:54quickly I think when it comes to that
43:56there's certain things just doesn't
43:57really do
43:59um but for what you do about 65 70 80%
44:04of the time with a lot of Auto lout
44:06things of just have thing in place I
44:07think what I said earlier is most of my
44:09usages for autolayout is
44:12basically when I have a like again where
44:16I'm not a massive fan of that I mean I
44:18don't have anything against alloud but
44:19like most of the time I'm just doing
44:21just doing
44:24this right A lot of the time I haven't
44:27menu or I have a list of objects and I'm
44:28going drag in and make sure it fits
44:30correctly this does that um so that that
44:33covers an awful lot of Auto again like a
44:35lot of the time if it's a solo project
44:37or freelance project I am often the
44:40developer or I speak very closely to the
44:41developer and we SP speak developer very
44:44well so I can just give them code for
44:46something right or you know whatever so
44:47this part of being super explicit in
44:49terms of Auto allows doesn't apply to me
44:51as often as it does to other people
44:52that's a big caveat but for the yeah for
44:56the extent to which the my most often
44:58usage of aut layout this actually covers
45:00it a lot of the time not all the time
45:01and it is worse it just it's just worse
45:04however as of recently sketch are
45:06actually adding their version of Auto
45:08layout uh and they've sort of confirmed
45:10that that it's coming it's their next
45:12big feature I think they've recently
45:14published a road map and it's on there
45:16and I think they're going more for a pen
45:18poot style of Auto layout rather than a
45:20figma style so penp basically isn't
45:22really Auto it's just it's just Flex box
45:26if you know CSF I mean most of you will
45:27know what Flex box is but um it's
45:30basically just Flex box which is
45:31brilliant it's the right way to do it
45:33because it's a direct representation of
45:35figma's close that's not bang on pen
45:38pot's much closer they're going that
45:40direction so actually Auto lout is
45:41coming to sketch uh and I do hope they
45:44keep this idea of having it being just a
45:46a tribute you apply to a group or or
45:48component rather than limiting saying
45:50having a frame versus the group I don't
45:52think this ever necessarily made sense
45:53it's just a thing that was a limitation
45:55in figma andone used to so everyone just
45:58carries on you know I don't know anyway
46:02we'll go into some some some
46:03miscellaneous stuff here so we've got
46:06our asset view here which is it's fine
46:10um what I do like inside sketch is this
46:13guy it's got an entire page and you have
46:15this entire sort of like brand bookes
46:18thing so let's just come back over to
46:20here we'll create a rectangle and uh
46:22we'll just create a color there we go we
46:24do create color variable of course one
46:26red there we go we go fine come over to
46:29here and we've got these individual
46:30Pages where we can have uh little layer
46:32Styles we have our defined colors we
46:35have defined artboard templates that we
46:37can have and also all of our symbols I
46:40just kind of like this it's a searchable
46:41you can add stuff from here whatever
46:43it's a nice little touch I find it
46:45really digestible and it's a really good
46:47way or impromptu you way of just having
46:49a little brand Booky you know thing to
46:52refer to it's quite a nice little
46:54feature also the C button I quite like
46:56it works really well um I like it I like
47:00it quite a lot so what we just touched
47:02on there is the assignment of um colors
47:06so that's the only design token style
47:08thing it's got there are no you know I
47:10can come to figma and I can be like well
47:12rectangle what's the radius well what's
47:15the height let's do the radius let's do
47:16it this way why not and we'll just
47:17create like I don't know I've got this
47:19right I have already a uh extra small
47:22that's not
47:23useful uh let's do extra L there we go
47:26so I've got
47:27these these variables for things like
47:29Corner radius width height color Etc
47:31doesn't exist um and this is just one of
47:33those features where it's like I think a
47:36lot of because I think a lot of the
47:38features again my Coda mindset a lot of
47:40the features inside figma that are
47:42simple um are made pretty obsolete with
47:46the existence of of of variables and I
47:48don't especially love their
47:50implementation of variables I think it's
47:52it's come really late uh and it's not as
47:55comprehensive as it should be for
47:56something which is fundamental in any
47:59language uh there's so many more complex
48:01constructs that you can create inside
48:02languages I want to see a lot of those
48:04represented visually as well um so fig
48:07feels a little bit late to the party
48:07with it obviously then much earlier than
48:09sketch who doesn't have them um and I
48:11really wish I could just be like yeah
48:13just set this to you I mean that element
48:17I think makes a lot of the features and
48:19side figure Superfluous once you've got
48:22really robust variable support variables
48:24are such a big deal in figma if I was to
48:26say this sketch put in any one feature
48:29even above Auto layout variables it's
48:32one thing where it's just straight up a
48:34downgrade uh I can't paint it any other
48:36way besides that I think there was some
48:38plugins a while ago which which um which
48:41de janked it but I don't know what
48:44happen to those who knows so going back
48:47to miscellaneous stuff so yeah there is
48:48that that's how you you find colors it
48:50works basically the same way the other
48:52thing is data this is a feature I like
48:54quite a lot inside let's grab out this
48:56where it oh chuse a stand up one which I
48:59like quite a lot inside sketch so I can
49:01be like
49:03uh what's that on there we go
49:06Dave let's make that a little bit
49:08smaller let's make you let's make you 30
49:12Dave oops 30 there we go nice look at
49:17that hello Dave right so what we can do
49:20here is let's just make a copy of Dave
49:23and let's just zoom out actually a
49:24little bit and we'll make a few more
49:25copies of Dave yes that never never gets
49:27old and we've got data this is built
49:29into fig it's a first sorry sketch it's
49:32a first party thing data and you have
49:34these data sources you can Define these
49:35yourself they can be either adjacent
49:37objects with Rich data so it could be
49:39like name surname
49:41Etc Avatar or they can just be simple
49:43text list or they can be image arrays so
49:45let's just use sketch data
49:47names oops hang
49:50on that shouldn't be doing what oh I
49:52just did insert let's do it this way
49:57have I told you I been using this again
49:59for about a week or two where is it what
50:02are we looking for here what we doing
50:04guys let's go into there we go data drag
50:07that and that doesn't get old either and
50:09we go sketch data names and then we go
50:12we've we just done that um and I one
50:16here for Faker which is very nice there
50:19we go and there's something else which
50:21is a big thing a big elephant in the
50:23room which is where when figma took over
50:26a lot of the
50:27um Community went with it and a lot of
50:29plugins so was a huge number of sketch
50:31plugins around back in the day and a lot
50:33of them um aren't maintained anymore
50:36it's very sad because obviously they
50:37lost a lot of customer base and for
50:40those out there thinking no one uses
50:41sketch I've done a bit more research on
50:43the topic um and that's not true
50:47basically um because you know when I was
50:50saying you know there's that knj thing
50:52of saying figma's done something I don't
50:54like and I've been unhappy with the
50:55company for a while to be honest but fig
50:56has done something I don't like I want
50:58to support this independent company who
50:59are less bad much less bad but no
51:03company is good let's not pretend that
51:05companies are good things they are but
51:08um you've got to do a bit of due
51:09diligence because you can't just make it
51:11an emotional thing and cut your nose to
51:12spite your face again I do a lot of
51:15development I don't have to do massive
51:17complex I don't work on massive massive
51:19Brands and have these huge Design
51:21Systems that's just not I like startups
51:24I like small companies I like technical
51:25companies and I like doing development
51:28in front end Dev as often as I can I'm
51:30not every user right that's that that's
51:33it I have my own set of needs that yours
51:35may differ right let's just get that out
51:36of the way but you do still need to make
51:39sure you're making a logical decision
51:41rather than an emotional one because
51:42otherwise you can just it's a stupid
51:45stupid
51:47so um let's get back to my point here
51:50was my point again oh my
51:52God you tell don't script these just
51:55yeah make sure you're thinking this
51:56through before you make before you make
51:58a swap but let's go back to the thing I
52:00was talking about what was the thing I
52:01was talking about a second ago it was
52:04hold up aha plugins so when a lot of the
52:09um the community went you've got a lot
52:12of plug-ins and pigma in fact actually I
52:14don't say too many but um yeah the
52:17interface I don't like and it's going to
52:20sound really silly you can save them but
52:22like this always felt kind of clunky to
52:24me I don't know what I've got not I'm
52:26not not saying I'm right or wrong here's
52:28the ones I've saved you can just search
52:29for a thing and let's say for example I
52:31want to do that if I want to do like
52:33unsplash right that's going to be there
52:35and I can run it and then I get like a
52:38there we go I got like a window thing
52:40and I can like do a very similar thing
52:42if I want to do data I could do a data
52:43thing like this works the same way in
52:45sketchart it's a bit more native so I
52:46get like a rectangle and I go like this
52:49uh and then do UNS Splash hang on let's
52:52do
52:53uh unsplash random pH
52:58there you go it's a little more direct
53:00in in sketch but that's not my point
53:01though the point is how plugins work so
53:05plugins in um the API is better in figma
53:08just
53:09is um and also like I know a lot of
53:12sketchies just started bending the rules
53:13a lot when it came to what they could do
53:16but the way that sketches plug-in
53:19systems better is because every plugin
53:22inigma is isolated quite heavily in
53:24terms of UI Wise from the rest the
53:26application whereas sketch that's not
53:29necessarily the case if anyone remembers
53:31craft back in the day which was a un uh
53:34Invision plugin which had a bunch of
53:35stuff like this data thing before it
53:37became native um and a bunch of other
53:40bits and blbs I can't quite remember
53:41things like duplicating
53:43frames um sketch plugins go into uh
53:47let's go into manage plugins we've got a
53:50window here so you just install them
53:53which I always prefer Runner Pro which
53:55is a very famous One view no plugins
53:59Runner Pro
54:02settings uh Runar there we go show R is
54:07that working so new
54:08file there we go it's buggy so yeah
54:12we've got our Runar showing this does a
54:14few things it's got like a bunch of
54:15anyway this basically we've got we've
54:17got a company that's actually extended
54:21sketch uh and scan the interface and we
54:23can do things like we can add buttons so
54:25we go to add toolbar items we've got an
54:27extra row of functions get rid of that
54:29remove these we've got an extra row here
54:32of of things we can add more
54:35functionality here and it's got loads of
54:37other this is cool right you can't do
54:38this in figma i' like to see a return to
54:41this this is really awesome um massive
54:43aside once
54:44again um yes so we're getting kind of
54:47towards the end of it now I think the
54:48last major pillar to kind of talk about
54:50and this is still like a Whistle Stop
54:51tour there's lots of devil in the detail
54:53with all of this is collaboration which
54:55is the one thing I can't actually show
54:56you cuz I'm on my own but long story
54:58short collaboration you know having
55:01multiple curses knocking about doing
55:03stuff it's the same uh it's not as
55:06robust broadly speaking in sketch it's
55:08not as flexible but they have an opinion
55:10which is something I quite like so if
55:12you've got multiple users and you're on
55:13a cloud account you get the same thing
55:15where and these people are just working
55:17they're not working from the web they're
55:18working in in the native app you have
55:19another person in your team um and
55:22they're doing their thing you can see
55:23that you know same way as in figma you
55:24can see that their cursing around Etc ET
55:26Etc fine when it comes to sharing though
55:30um and distribution there's a there's a
55:32difference in approach with Sketch
55:34versus figma and I kind of like the way
55:36sketch does it so if we're honest with
55:38ourselves right if you're working in a
55:40team and you've got product managers
55:43developers uh and the other people in
55:45your team do you
55:47always work in the same file or do you
55:50keep a copy of the file work there then
55:53copy and paste your work into the one
55:55that other people can see when you're
55:56happy for them to see it and don't lie
55:58to me now I know you do it because
56:00everyone does it you do that and the
56:04always on collaboration means that being
56:06like yeah I mean it's a feature that i'
56:07I'd like and it's the probably the
56:09biggest thing that I uh work in
56:10collaborative it all saves the cloud
56:12which sketch didn't do at the time you
56:14had to transact files back and forward
56:15it was very annoying um with working
56:17with teams and that was the biggest draw
56:19for everyone I think at the beginning in
56:21figma was that collaboration and having
56:23just not worrying about virgins having
56:25you know these are living things right
56:26these files um that was a big draw and I
56:30found myself saying like you know when
56:31it comes to having seeing other people
56:33working in real time especially when
56:35it's not people who are your peers
56:36directly like other other ux UI people
56:39product
56:40designers I found myself doing things
56:42like if I had a junior I would
56:44inadvertently find myself just like
56:46paying attention to what they're doing
56:48it's like well that's not cool you know
56:49like I'm not doing this intentionally
56:51but you find yourself almost spying on
56:53them and it's like and a couple of times
56:55very early on i' be like i' I'd be oh we
56:57should do this and they're like dude I'm
56:59not finished I mean of course you're not
57:01finished why why the [ __ ] am I even
57:03watching you I'll leave you the [ __ ]
57:05alone it's not cool um and then the
57:08other happens with product you know
57:09whatever so here's the point
57:11right in sketch you can work in secret
57:14much more easily so the way it works is
57:18I wish I could demonstrate this with
57:19another person if I was more prepared I
57:20could have done it but the way this
57:22works if you've got a file let's just
57:23save this to uh
57:28hang
57:30on let's save this to workspace and
57:32we'll call this
57:34one
57:36that sick now it does the update thing
57:40and if you've got third parties that the
57:42the web component inside sketch is
57:43basically just for review leaving
57:45comments viewing prototypes Etc so no
57:49one gets to see anything until you say
57:50they can there's a feature here where um
57:53if you do press save for example command
57:56I you drag the say press command s it's
57:58going to say hey it change things
58:00automatically when you're ready to share
58:01create a version I missed the the window
58:03let's do that again create version you
58:06do a description you can do this in in
58:08fig as well you save history but there's
58:09this button here which says stust
58:12version that viewers only see starred
58:13versions including this one which means
58:16the people reviewing it are
58:19spoonfed by default they just see what
58:22you want them to see and there's it's
58:24not sound conspiratorial or whatever
58:26like but I prefer that man like that's
58:28just better where you don't want and
58:32also like they don't get to touch the
58:34application and it's this is the again
58:36this is the polar opposite in terms of
58:37and this is a big deal I think this is
58:38the the polar opposite of the way figma
58:40does it where it wants to bring more and
58:41more people into the application sketch
58:43is saying n you know what if you're a
58:45developer if you're a product person you
58:46don't need to be using figma you need to
58:48be learning that [ __ ] you can if you
58:49want and figma's leaning into that with
58:51the new UI and all these new features
58:52that aren't of any use to most designers
58:55and they're mostly used to to lay people
58:57to be like hey well I've generated these
58:59frames I've done the hard bit I've got
59:00the idea I'm the ideas guy there we go
59:04it's like that and then that bits like
59:06that and I pressed the the generate
59:07button it's made this thing do a ux on
59:10that do a ux on it make it make it a ux
59:12do do it I I did do the Prototype look
59:14you click that and it goes to that I've
59:16done I've done I've done the hard bit by
59:18the way prototyping didn't touch on at
59:20all uh tldr it's worse in figma in
59:24sketch but yeah like oh I've I've done
59:26the hard bit you designer D that that's
59:28the way figma is leaning with with what
59:30they're doing in their app and it's not
59:31accidentally it's intentional and by by
59:34simplifying the application it's making
59:35it simpler for for Lay people to to
59:38understand the
59:39application um and by generating you
59:42know crappy mockups and stuff that's
59:45their their they will say otherwise but
59:47their motivation is to bring more people
59:50into that process AKA have more more uh
59:53take the idea away from you in terms of
59:55whether you designed by by committee or
59:56not thus diminishing your input on your
59:59own career that thing that pisses off
1:00:02all designers of all and all cre people
1:00:04who make stuff of thing is person sees
1:00:07the thing they reason about it and
1:00:08they're a lay person and they go well I
1:00:10can reason about this I can understand
1:00:12this just do the thing just do the thing
1:00:13let we reduce your entire career your
1:00:15entire experience down to just do this
1:00:17thing just do the thing there's no
1:00:18design thinking here there's no
1:00:20experience here what are you doing just
1:00:21do the thing you know no one likes that
1:00:24and being in a world where being
1:00:26encouraged by your primary software
1:00:28vendor who supposed to be making tools
1:00:30for you it's Prof it's profoundly uncal
1:00:33it's not about gatekeeping the design
1:00:34process I I kind of hate that [ __ ] where
1:00:36it's like you get a design person you're
1:00:38like no I'm the Arbiter of what goes
1:00:39forward guys I know everything you don't
1:00:42there's everyone's got feedback but it's
1:00:43like a case of like you don't you don't
1:00:45sit in powerbi right and tell data
1:00:49people what they're doing okay because
1:00:51you don't know anything about that [ __ ]
1:00:53they do that it's the same thing you
1:00:55have you have ideas you deal with data
1:00:57you deal with customer feedback but you
1:00:59aren't that's not your specialty what if
1:01:01they like there's a special powerbi mode
1:01:03now for design Jo no they don't do that
1:01:06because it's it's stupid because it's a
1:01:07thing that's that's easy it's easier for
1:01:09people to see visual things and make
1:01:11assumptions about how it works because
1:01:12that's how humans work they they see
1:01:13things they recognize and if it's
1:01:15something they can quickly digest
1:01:16they'll have an opinion on it the
1:01:18relevance of that opinion goes in that
1:01:20that that Dunning Krueger thing of
1:01:23there's no correlation between the
1:01:24amount of opinions and of those opinions
1:01:26they just have an opinion because they
1:01:27can understand it sketch isn't doing
1:01:30that that's the point um they keep that
1:01:32separate and I really like that and I
1:01:34hope conceptually and they've kind of
1:01:36said as much they've alluded to it I
1:01:37don't think they've made a big deal of
1:01:38it they might have done but they've kind
1:01:40of said no here's we believe this is the
1:01:42this is a good separation of concern and
1:01:44I like that I really like that
1:01:47separation of concern for the reasons
1:01:48I've just
1:01:49said anyway let's wrap up this video
1:01:53because it's it's a it's a sprawling
1:01:54mess and and uh the last thing we
1:01:57quickly talk about is prototyping you
1:01:58kind of know how this works press I
1:02:00which is the Color Picker what am I
1:02:03doing press I I got this thing here you
1:02:07draw it whatever you've got interaction
1:02:10this is getting better
1:02:13um it's getting better they're doing
1:02:15smart anime so you know it's getting
1:02:18better basically and then you can you
1:02:21can view Pro I don't know why I've
1:02:22skipped prototyping I really shouldn't
1:02:25so yeah this button here if you press P
1:02:27sorry uh command P there we go and then
1:02:31if we go we've got our views here let's
1:02:32just make rectangle copy one let's make
1:02:34this more obvious what it is there we go
1:02:35red beautiful command p and now if we go
1:02:39down to start point is Right
1:02:44copy let's go back here let's go into
1:02:46our
1:02:47interaction we forgot to link back to
1:02:50rectangle copy one guys make that make
1:02:53that bir
1:02:54directional we we forgot we forgot to do
1:02:56that important stuff anyway and if we go
1:03:00into here click this button this will
1:03:02set this is the start point you don't
1:03:03have multiple flows which I think just
1:03:05straight up sucks there's no multiple
1:03:06flows in here and then we can you know
1:03:09whatever is there interaction back here
1:03:10it works the way you expect so we click
1:03:12a trigger on
1:03:15whatever what's that there there say
1:03:17Target rectangle animation whatever you
1:03:20set animation Styles there's actions
1:03:22triggers whatever it's it's fine and the
1:03:26thing again in a mild defense of of of
1:03:28sketch I guess it's it's the the anime
1:03:30the the the the prototyping is worse um
1:03:33the main thing that that annoys me more
1:03:35than the um the idea
1:03:37of of um more than the idea of not
1:03:41having multiple start points or all that
1:03:42sort of thing is um the thing that that
1:03:46with with both them is they both suck at
1:03:48prototyping um they're both bad and um
1:03:52like things like Proto he's aure or aure
1:03:55or you pronounce it xor RP or you even
1:03:58use frame I me framer sucks but like
1:04:01you've got yeah framer you've got xor
1:04:02you've got the two big kitties at the
1:04:04minute origami studio and protopie
1:04:07protopie is insane origami is batshit
1:04:11like in terms of flexibility they make
1:04:13they make figma look silly in terms of
1:04:15their ability and they're the right
1:04:16place to do prototyping I don't think
1:04:19Beyond basic prototypes and this goes
1:04:20back to my entire thesis is people have
1:04:23accepted the idea that they should go
1:04:24into a different application to
1:04:27prototype increasingly and I've seen
1:04:29people do some crazy stuff with figma
1:04:30but it's slow and it's clunky and it's
1:04:32awkward um and there's better places to
1:04:35do it but it's where you put the effort
1:04:37right and that thing of thinking of like
1:04:40why do I need to do thing is thing
1:04:41important in this scenario how important
1:04:43is thing not just I have tool I will use
1:04:45tool you know
1:04:48so yeah basically if you're going a
1:04:51prototype don't don't use don't use
1:04:53figma a prototype it sucks if you're on
1:04:55a map which let's face it you probably
1:04:57are if you're not necessarily oh
1:04:59obviously the big elephant in the room
1:05:01is sketches is not on Windows and it
1:05:03won't be um they just basically rul out
1:05:07I think also because you know with the
1:05:09that aention thing of like mindset of
1:05:11like we keep the separate they've got a
1:05:13web view which uh if you've got things
1:05:15like developers or product managers or
1:05:17whatever other people in the business
1:05:18can have a greater diversity of of
1:05:21operating systems that they work on um
1:05:24when it comes to designers the majority
1:05:26not all but the majority do still use a
1:05:29Mac um so it' be a lot of work for them
1:05:32to take a native application Port it to
1:05:34Windows for what is probably less than
1:05:3820% of their addressable Market that be
1:05:41a huge overhead I can see why they're
1:05:43not doing it basically I honestly would
1:05:45would rather have it always been I mean
1:05:46I've never been this whole person's like
1:05:48oh it's a Mac only no if you can make
1:05:50something crossplatform you kind of
1:05:51should they've also leaned in pretty
1:05:53heavily on conventions inside Mac OS a
1:05:55really good example of a company that's
1:05:56done this and walked it back is Affinity
1:05:59um who actually at the time were a
1:06:02smaller team than sketch but it's a much
1:06:04newer code based than sketch that's not
1:06:06that much newer actually it's it's a lot
1:06:07bit new anyway they ported all their
1:06:10stuff to Windows um but also they leaned
1:06:12in a lot lots of Macos conventions
1:06:14things like this editable top bar is a
1:06:15very Mac OS thing when Affinity first
1:06:18came out they leaned into a lot of that
1:06:19and they ported it to Windows so now
1:06:21Windows the it's good it's a good thing
1:06:24I in an ideal yes sketch should run on
1:06:26Windows I can understand why they
1:06:28haven't done it um but also they've kind
1:06:31of said you know when it comes to the
1:06:32majority of people using it the people
1:06:33most likely to be on Windows interact
1:06:36with a part of this experience
1:06:38which isn't on Windows is on Windows and
1:06:41the other part isn't so it's like I get
1:06:44it I don't agree but H it's not the end
1:06:47of the world I
1:06:48guess but yeah long story short if
1:06:51you're prototyping don't use
1:06:53figma it sucks don't use sketch either
1:06:56for that matter just use just use
1:06:57origami which is also maon which is why
1:06:59I'm saying that anyway I'm going to wrap
1:07:01this video up there's probably loads of
1:07:03stuff I've missed um you can go on about
1:07:05this forever I might redo a more quick
1:07:07fire less waffly video if this gets
1:07:09enough views um but yeah I think the
1:07:12core thing to take away from all this is
1:07:14I'm not necessarily I'm an advocate
1:07:16ethically for what sketch is doing and
1:07:18I'm at a known low illusions of the
1:07:19state of the tool is it a better piece
1:07:21of software than figma no uh is it much
1:07:25worse no can you use it yeah probably
1:07:29should you use it yes definitely um the
1:07:33the statement of intent from figma and
1:07:34what they're doing at the moment I I
1:07:35find kind of kind of distasteful um it's
1:07:38not just like an anti- aai thing AI has
1:07:41some utility but the way they're you can
1:07:43see it's it's pretty clear to a lot of
1:07:45people what what the statement of intent
1:07:47is here and it's something I don't I'm
1:07:48not behind um you know right now what
1:07:51they're doing is a thing which will um
1:07:54it's a very easy to behind CU you'll get
1:07:56the the crowd that go evolve or die bro
1:08:00um you know like everyone be Zing with
1:08:03AI in a few spoilers or not but oh every
1:08:04was going to be ding with AI in a few
1:08:06years it's going to be take over the
1:08:07industry you've got to move no I mean
1:08:08you should your job will change and
1:08:10it'll adapt over time but shill style
1:08:14people aren't worth listening
1:08:16to um and you know people with alterior
1:08:20most something with listening to this is
1:08:21clearly just a move
1:08:22to uh effectively it's a move that is
1:08:25going to remove design jobs um basically
1:08:29you know the amount of people who will
1:08:30be you can argue the semantics of it all
1:08:32day long um and like oh if you're a
1:08:34proper designer and like I've been
1:08:36guilty of saying this like well if
1:08:37you're in a situation where the crappy
1:08:40Auto um generational tools inside the
1:08:43new version of
1:08:44figma represents everything you do maybe
1:08:47your job should be at risk which is a
1:08:49horrible thing to think it's it doesn't
1:08:51it's not necessarily untrue but also
1:08:53it's like well who am I to say that who
1:08:54am I to think that you know so it's like
1:08:57the point is there's a certain section
1:08:59of people who I think broadly it's not
1:09:01going to take over that's not the AI
1:09:03taking over and making designs redundant
1:09:05is not how this is going to go down it's
1:09:06just not how history has ever worked and
1:09:09AI is remarkably and roundly pretty
1:09:12underwhelming things change in
1:09:14increments not by big sways and in this
1:09:15way with this sort of thing it's not
1:09:16going to go that way I'll put money on
1:09:18that and I don't gamble but yeah there
1:09:20will be an awful lot of people who jobs
1:09:21will be displaced by um a changes the
1:09:25IND it's already happening Beyond AI
1:09:27itself AI is is a symptom of this not
1:09:29the cause um it's you know and also AI
1:09:34Generation stuff will also remove quite
1:09:35a lot of jobs some of them yeah some of
1:09:37them permanently um and buying into a
1:09:41company that's trying to hasten that
1:09:43process I don't think is diligent for
1:09:45you for me um and the only way I've said
1:09:50this a bunch of times to opt out of the
1:09:52AI training is not enough and if you're
1:09:54in a situation where you can um opt out
1:09:56of the company the only way a company
1:09:58will ever listen to you is with your
1:10:00wallet they don't care about anything
1:10:02else you can sell you want and they can
1:10:04say anything they want words are cheap
1:10:06vote with your wallet they'll soon start
1:10:07to listen so if you can even if it's not
1:10:10sketch the reason why I'm advocating
1:10:12sketch is because is the most mature of
1:10:14the Alternatives right um ex your's very
1:10:17expensive it's not bad pen pot's not
1:10:20there sketch is the closest the closest
1:10:22thing you've got and also in terms of
1:10:23familiarity and functionality sketches
1:10:25is is is actually closer than you think
1:10:27it is that's why I'm advocating for it
1:10:29plus there are smaller more independent
1:10:30business that aren't anywhere near as
1:10:32evil and sketch are fine doing some
1:10:35research on on the background and of the
1:10:37company is they've still got a healthy
1:10:39number of users I think from what I
1:10:40understand is as of 2020 sketch has uh
1:10:44as of 2020 announced they hit a million
1:10:45seats as of 2024 figma has 4 million uh
1:10:50also figma I don't if that includes fig
1:10:51Jam or not so whatever but figma that's
1:10:54that's Circa 25% in the four years since
1:10:57then we can assume the numbers gone down
1:10:59but it hasn't created looking at Google
1:11:01Trends the line does not Creator in
1:11:02terms of interest in sketch actually it
1:11:04pretty much scans with um what we hear
1:11:08in term of the data so I think actually
1:11:09sketch is has lost users it's not lost
1:11:12anywhere near the amount you think in
1:11:15fact actually most of that has been
1:11:17growth from new people entering the
1:11:19profession versus old people leaving
1:11:22lots of people love sketch I love sketch
1:11:23you love sketch but I think you know I
1:11:26would wager that number can't be any
1:11:27less than say even if it's 50% of of
1:11:30those people from 2020 which it probably
1:11:32isn't that's still half a million users
1:11:34let's say it's a quarter let's say it's
1:11:36250,000 users that's still a lot of
1:11:38seats and a lot of Revenue it means a
1:11:40company can still grow it can still
1:11:42improve they've got 100 staff the
1:11:44product is in fine shape sketch isn't
1:11:46going anywhere it's not dead plenty of
1:11:49people still use it anecdotally I've
1:11:50heard um you know not just security
1:11:53concerns that's a big one as well
1:11:54working flying is better for security
1:11:56but even beyond that um there's a lot of
1:11:59companies that do still prefer it a lot
1:12:01of big orgs apparently still use sketch
1:12:03intentionally not accidentally some want
1:12:05to move away the vast majority I think
1:12:07kind of don't from what I understand a
1:12:08lot of companies like no we're just here
1:12:10we're fine um not just because of the
1:12:12effort of moving away because they've
1:12:14built so much process around it and
1:12:16actually I think a lot of them find that
1:12:17it
1:12:18works um so yeah it's not it's not every
1:12:22time you hear news or the the the the
1:12:23news of my death have been greatly exi
1:12:25ated right you heard that phrase anyway
1:12:27I'm going to wrap this video up and yeah
1:12:30that's it bye

About this transcript

This page contains the full transcript of I quit Figma. by ManyLearn, generated from the public captions YouTube serves with the video. The transcript has 14,244 words across 1,943 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.