Is Sketch catching up to Figma? — Transcript

Full transcript

1. 0:00Oh, hello there. I didn't see you come
2. 0:02in. So, today I'm looking at the latest
3. 0:06release of Sketch. It's finally out of
4. 0:07beta. This is their first release of
5. 0:092025. It's called Athens. It's probably
6. 0:11the biggest release they've ever done.
7. 0:13Nay, I think the largest. Uh, and what
8. 0:16makes this really cool is um they've
9. 0:18gained so much ground in a single
10. 0:19release. It's actually kind of
11. 0:21staggering. It's a very, very, very long
12. 0:24um list of features. I'm going to go
13. 0:27over some of these. 64 improvements
14. 0:30uh and 28 changes and 22 fixes. It is
15. 0:34bloody massive. And um yeah, they've
16. 0:36gained so much ground and it's a really
17. 0:38good statement of intent for where they
18. 0:40think they want to go next and really
19. 0:42becoming a much more competitive tool.
20. 0:44Let's say if the tool used today for UI
21. 0:46design is run by a hideous corporation
22. 0:49who really hate you and do lots of
23. 0:50anti-consumer things at the moment and
24. 0:52also have completely decided that they
25. 0:54no longer focus on their core market of
26. 0:56making tools. So, not only are there
27. 0:59naming no names, not only are there some
28. 1:01big features in here, there's some
29. 1:02really good quality of life
30. 1:03improvements, some great polish uh and
31. 1:06some nice UX features for the end user.
32. 1:09Sketch is already a really uh pleasant
33. 1:11tool to use and this is the most
34. 1:13pleasant version ever. It's actually
35. 1:15really quite lovely. Um but without
36. 1:18going over it any more than we need to,
37. 1:20I'm going to put this on the other
38. 1:20screen. Uh I'm going to do a quick fire
39. 1:22around. I'm definitely not going to be
40. 1:23able to get to all the features, but I'm
41. 1:24going to hit some of the most important
42. 1:26ones and it'll start the most important.
43. 1:28I'm going to go into here and yeah, we
44. 1:30can change the icon in real time and it
45. 1:32just updates on this is probably the
46. 1:34biggest feature and it just updates on
47. 1:35on the No, I'm I'm joking. The biggest
48. 1:37feature is stacks. Um stacks are what
49. 1:41are stacks. They're basically it's auto
50. 1:43layout, right? Or actually it's closer
51. 1:44to stacks inside inside of framer. So it
52. 1:48behaves I'm not going to spend too long
53. 1:49on this. It behaves the way expected to
54. 1:51behave. So I can create a rectangle.
55. 1:52Let's give it a lovely color. Let's make
56. 1:54it that green. It's a Charlie X thing.
57. 1:58Is that still a thing? Hello. And then
58. 2:00what we're going to do is press command
59. 2:02L and it will turn that into a stack.
60. 2:04Give us an a corner radius thing.
61. 2:06probably make it a size that people can
62. 2:09use. That would be good. Um, let's make
63. 2:13our text so it is like sitting
64. 2:16vertically inside our little space.
65. 2:18There we go. Um, is that
66. 2:21broken? Center. There you go. It's not
67. 2:25broken. I'm just thick. Anyway, that's a
68. 2:28stack. It's It's auto. It does the
69. 2:30things you expect autos do. So, if I
70. 2:32have two next to each other, they
71. 2:34overlap. Press command L to create a new
72. 2:35stack. I can set space between. So,
73. 2:38let's just do like Oh, that's my
74. 2:40padding. My space between. Set that to
75. 2:4212. And it's 12 pixels. Imagine that. We
76. 2:44can set padding on it. Either like this
77. 2:46or we can grab the handles. It does. It
78. 2:50does auto layout style things. It's very
79. 2:52good. But it does have some fun tricks
80. 2:54up its sleeve. Let's do this vertically.
81. 2:56Some fun tricks up its sleeve that auto
82. 2:58layouts don't. So, let's say I've got
83. 3:01this vertical stack of things inside the
84. 3:03stack. I can override the horizontal
85. 3:05position and they just fix. There we go.
86. 3:08So, you create something like a message
87. 3:09thread or something. I don't know,
88. 3:10whatever you want to do. Um, you don't
89. 3:12have to create multiple nested stacks to
90. 3:14do stuff like this. It works both
91. 3:15vertically and horizontally. It does
92. 3:19auto layout style things, but that's
93. 3:21done with frames. So, previously, um,
94. 3:25Sketch used to have artboards. It now
95. 3:27has frames, and these work like frames.
96. 3:31So what you're doing for frames in
97. 3:33Figma, you can do now in Sketch. You can
98. 3:35have frames. You have frames and frames
99. 3:37to a frame in a frame. Let's get a
100. 3:38frame. Put that frame in the frame.
101. 3:40You've got frames in the frame. What
102. 3:41else could you want besides frames in a
103. 3:43frame? There's also a new type of other
104. 3:46thing. Let's make ourselves a lovely
105. 3:47shape. Let's make ourselves a lovely
106. 3:49triangle. It's a warning triangle. And
107. 3:51because it's a warning triangle, that
108. 3:52means it's going to be blue. Um because
109. 3:54that's the scariest that's the scariest
110. 3:56color. And oh no, no. And we want to
111. 4:00make this an icon. So, we'll put a
112. 4:02border on it. Uh the border is going to
113. 4:03be red because, you know, red and baby
114. 4:06blue are the most terrifying colors. And
115. 4:09we're going to put in a group, but
116. 4:10instead of a group, we're going to put
117. 4:11we're going to put it in a graphic. What
118. 4:13a graphic is is a special kind of thing.
119. 4:17It's a special thing for icons and
120. 4:19stuff. So, it has some default
121. 4:20behaviors. Basically, it scales in the
122. 4:23centers. So, you know that thing in
123. 4:24Figma where you create an icon, you set
124. 4:26it to scale scale, and you piss around
125. 4:27with it for ages. This just does that as
126. 4:29a as a container type. So if you've got
127. 4:31an icon, set it to be a graphic. You can
128. 4:32jump between groups, graphics, and
129. 4:34frames. It doesn't have the layout
130. 4:36options that frames do, but yeah, it
131. 4:38behaves like a icon would, but those are
132. 4:41graphics. Another one, which is
133. 4:42something I banged on about for a while,
134. 4:44is you can set background colors on a
135. 4:46canvas or multiple ones per page. Page
136. 4:49two, they've got two different colors.
137. 4:50Imagine that. That's crazy. That's
138. 4:52another feature. What else have we got?
139. 4:55Let's keep going. Let's keep going.
140. 4:57Command bar. So the command bar is a
141. 4:58thing. I think it's on S now where this
142. 5:01is like you know your little menu inside
143. 5:02Figma which has always kind of been a
144. 5:05little bit rubbish. Uh the command bar
145. 5:07is much better. So if we've got a what
146. 5:09they call in uh Sketch symbol. So press
147. 5:12command Y will create one. And this
148. 5:14one's called gray. And I'm going to
149. 5:15spell like that because it's 1998. And
150. 5:18if I want to put a new one I just do
151. 5:20gray. And there we go. I've got I've got
152. 5:22two in here already. Box and oval. Don't
153. 5:25know where they've come from. I think
154. 5:26I've set up a library somewhere. But
155. 5:28yeah, that's how you insert uh symbols
156. 5:30inside Sketch. It's very nice. But also,
157. 5:33you can do the same thing as text
158. 5:34styles, layer styles, colors, frame
159. 5:36templates, and graphics templates. So,
160. 5:38if you've got a icon size graphics
161. 5:40template, if you've got one, which I
162. 5:41don't, you can just pull it out like
163. 5:43that. And you can do that all by
164. 5:44pressing S or command K to get to that.
165. 5:47But also, command K does other stuff,
166. 5:49right? It does all of your plugins. It's
167. 5:51just a command runner. You know how
168. 5:52these work. Applications have them. But
169. 5:54it's just very slick inside of Sketch.
170. 5:56Uh, one thing that's really useful,
171. 5:58right? Let's say gray. Let's pull out
172. 6:00gray. There we go. Go to gray. We go to
173. 6:02the source of gray. We do this the same
174. 6:03way we do everywhere else. We go into
175. 6:05here and we go to edit source. And
176. 6:06gray's got a variant, right? So gray has
177. 6:09gray, but it's gray blue,
178. 6:11right? Don't know why, but let's say
179. 6:14gray blue and gray uh green because
180. 6:17although it's called gray actually
181. 6:19because it's sneaky uh Gren. That's
182. 6:22cool. That works. This one is No, it's
183. 6:24not blue. It's purple. And this one is
184. 6:26green because it likes to mess with you.
185. 6:28It's it's it's like
186. 6:30that. Don't trust your eyes. They lie to
187. 6:32you. We come into here and we've got our
188. 6:35nested instances. We've got gray. Drag
189. 6:37this out. And we've got these options
190. 6:38for blue and green, which are red and
191. 6:42purple respectively. I don't know why
192. 6:44I'm doing this. Maybe want to see the
193. 6:45world burn. Anyway, the point is you
194. 6:47have this view over here, which is
195. 6:48fantastic in Sketch, which is your
196. 6:50component view. And what we can do now,
197. 6:52not only we can go over here and we can
198. 6:53set a different thumbnail background. So
199. 6:55that one's light. Look at that. Exactly
200. 6:56the same. One is dark. So you can change
201. 6:59how they display, but also let's say
202. 7:02these variants are never things you want
203. 7:04to pick out. You just they just live as
204. 7:05a subcomponent because that's how um
205. 7:07symbols work inside Sketch. It's nesting
206. 7:09all the way down. It's actually quite
207. 7:11nice. Get over it. It's good. Don't
208. 7:13worry about it. It's fine. It's not
209. 7:14perfect. It's pretty good. But yeah,
210. 7:16what you can do is turn this off to say
211. 7:18available to insert, which means now if
212. 7:20I go back to here, press C, I only get
213. 7:23gray. But the fun doesn't stop there. So
214. 7:25if I've got a frame, look at that. Isn't
215. 7:27that wonderful? Let's make this a more
216. 7:28interesting color. Let's go with uh that
217. 7:31one. Uh yeah, and if we move this
218. 7:33around, we can see how it pins. So yeah,
219. 7:35great. If you look up here, we can see
220. 7:37it comes up with suggestions for how you
221. 7:39might want to pin it. And if you want to
222. 7:40do that, you just do that, and it saves
223. 7:42you a bunch of clicks. And there's a
224. 7:44keyboard shortcut for this. I haven't
225. 7:45bothered learning it. I'm I'm sure it's
226. 7:47fine. Whatever it may be, that's that's
227. 7:49a thing that you can do now. That's
228. 7:50really good. I like
229. 7:51that. Also, finally, you've got paste to
230. 7:54replace. So, if we've got this guy,
231. 7:56we've got um you know, this guy, and
232. 7:58then we got this guy. Command C, command
233. 8:00shift R. There we go. We've got paste to
234. 8:02replace. That's a thing that exists now,
235. 8:04just like inside of Figma. Apart from I
236. 8:06don't think it works on multiple things
237. 8:08at the same time. Let's try that again.
238. 8:09Let's do another triangle. This one's
239. 8:11beautiful. We're going to do this
240. 8:12outside of the frame because, you know,
241. 8:14again, watching the world burn and all
242. 8:17that. Create a duplicate over here. This
243. 8:18one's going to be green. Yeah, that's
244. 8:22technically green. Control shift R. It
245. 8:24only does one. It should do multiple.
246. 8:26Sketch team, sort that out. That'd be
247. 8:29great. So, what else is there? Let's
248. 8:31stop demoing stuff now. Let's just do
249. 8:33some talky time. So, what have we got?
250. 8:35Let's There a tongue. Right.
251. 8:37So, composing the command bar. The
252. 8:40command bar is really, really good. The
253. 8:41component workflow is really really
254. 8:43lovely. You can also navigate up and
255. 8:45down the um this this guy with a
256. 8:48keyboard and then dig through all of
257. 8:50your things. Also doing override. So I
258. 8:52think it's Yeah. Uh command alt R. So if
259. 8:55you want to do uh swap to swap a
260. 8:56component, you can just let's
261. 8:59just Oh, is that playing? That's playing
262. 9:01some music. Let's leave that on. Hey,
263. 9:03it's Freddy from No, let's let's not
264. 9:04let's not let's not let's not let's not
265. 9:06let's not abort. We'll make a square.
266. 9:09We'll call this one, I don't know,
267. 9:10whatever. Uh,
268. 9:12uh, Pete. There we go. Pete the square.
269. 9:14We'll create another one. And we'll call
270. 9:16this one, uh, I don't know, uh, Chris.
271. 9:20And then if we come into here, press C,
272. 9:21drag out Chris, we can press command,
273. 9:23oops, command, alt R, and then replace
274. 9:26him with Pete. Great. And if we want to
275. 9:28keep the um, yeah, that toggles whether
276. 9:31you keep it the same dimensions or not.
277. 9:32Also, you can navigate up and down
278. 9:34through various bits and bobs via there
279. 9:37or use keyboard shortcuts or go back out
280. 9:38and do that with text styles. So, it
281. 9:40works with text styles, layer styles,
282. 9:41all that kind of crap. You can just
283. 9:42replace stuff directly from the command
284. 9:44bar. It's very, very cool. What else do
285. 9:47we have? Text and typography. So, uh you
286. 9:49can use markdown inside text. So, for
287. 9:52doing override. So, if you have like a
288. 9:53bunch of text change, you copy and paste
289. 9:55over it, you can mark it up with um with
290. 9:59markdown style syntax and it it just
291. 10:01works. and and stuff. A lot of these
292. 10:04popovers are also super duper mega
293. 10:06awesome. There's a bunch of stuff. So,
294. 10:08the popovers for uh swapping things out.
295. 10:10So, if I come into here and I've got
296. 10:12this little guy here, all those they're
297. 10:14they're wicked. They're good. They're
298. 10:15fun. Then skinning and skinning sizing
299. 10:18and pinning. So, yep. Relative is
300. 10:22basically Yeah, relative size. Scale
301. 10:24this proportionally to the size of the
302. 10:26frame that contains it. Fix is now fixed
303. 10:28size. You can get your head around that.
304. 10:29Um, they've got a bunch of stuff for
305. 10:31automatically applying pins. I showed
306. 10:33you that a little bit earlier. Uh,
307. 10:34styling. So, arranging stuff. This one
308. 10:37is uh it sort of it sort of um starts
309. 10:41off a bit like I don't know why I like
310. 10:42this, but then eventually you do. So, if
311. 10:44I've got like let's get rid of these
312. 10:46these wonderful chaps. Come into here.
313. 10:48We'll create a
314. 10:50circle. Um, we're just doing such such
315. 10:53amazing work here today. Uh, that and
316. 10:56then this one in yellow. And then if we
317. 10:58move these back and forward, it doesn't
318. 11:01move up and down based. So if I press
319. 11:04command shift, it will move it to the
320. 11:06back, but also it moves relative to the
321. 11:08thing you have. So it moves Oh, delete
322. 11:10that one. It moves relative visually
323. 11:13through the layers rather than by the
324. 11:15layer order, if that makes sense. Let's
325. 11:17let's read this aloud to ourselves. Uh
326. 11:20where are we?
327. 11:22Uh
328. 11:25uh.
329. 11:32Um. Oh, shift X to swap borders.
330. 11:36Um, bring forward. Yeah. Go. Bring
331. 11:39forward send backward. Now move select a
332. 11:40layer relative to the layer visually in
333. 11:42front or behind it in the current
334. 11:43container. Saving if you're moving it
335. 11:44multiple times to get a visual outcome.
336. 11:46So, if you've got something over
337. 11:47something else and you want it to be
338. 11:49behind, you just press back once instead
339. 11:51of 37 times. It will just do it in one.
340. 11:53Takes a little bit getting used to, and
341. 11:54then once you're used to it, you're
342. 11:55like, "Why hasn't it always been like
343. 11:57this? What's wrong with you? Why don't
344. 11:58you all do this, silly
345. 12:01goose?" Productivity.
346. 12:04Um, yep. So, there's a button at the
347. 12:06top. So, you can do this to open up your
348. 12:08command bar. That's a thing that exists.
349. 12:10I'm not sure how I feel about it. Uh the
350. 12:12the comments tool has a detachable panel
351. 12:14showing comments and replies in your
352. 12:15document. I can't show you that. I
353. 12:16haven't got any comments, but there's a
354. 12:18thing. Basically, there's a whole bunch
355. 12:20of stuff here, but the bottom line kind
356. 12:22of is general
357. 12:23improvements really. Um to to go through
358. 12:27all of these features, let's just scroll
359. 12:29through it again to give you an idea how
360. 12:30much is in here. It's more the statement
361. 12:32of intent, right, of of how much they
362. 12:34have done in just a few months is pretty
363. 12:37bananas. and they fixed lots of bugs and
364. 12:40made lots of improvements and I've got a
365. 12:42feeling of where they're going next and
366. 12:44I think it's really good. They're
367. 12:45catching up very fast and like back in
368. 12:48the day big thing was one of the big
369. 12:50tentpole missing features were frames
370. 12:53and uh auto layout. Well, it hasn't now.
371. 12:57Um there's a few things missing in terms
372. 12:59of variables. I hope they do something
373. 13:01with variables soon. That would be
374. 13:02really good. Recently um the prototyping
375. 13:05has had a massive glow up. The
376. 13:06prototyping is actually quite nice in
377. 13:08Sketch now. I think it had a reputation
378. 13:10for not being really a thing. Uh it is
379. 13:13definitely a thing. It's actually pretty
380. 13:16pretty good. So, we're going to drag
381. 13:18that. And then I like the thing you're
382. 13:19rubbing corners and you can then link to
383. 13:21different frames and stuff without
384. 13:22having to reach all the way across the
385. 13:23thing. It's quite nice. That goes back
386. 13:25all that sort of stuff. It's just is
387. 13:27quite slick. It's quite good. Let's move
388. 13:28that around. Whoa. Anyway, the point is
389. 13:32they are catching up. they're gaining
390. 13:33ground really quickly and I think a lot
391. 13:35of the core features of the other bits
392. 13:37of software have on top of that um
393. 13:39Sketch is really performant. It runs
394. 13:42really well. It's a native application.
395. 13:44Yes, it is Mac only but I don't think
396. 13:45that's as big a deal as people make out
397. 13:47it is. And the client part of Sketch
398. 13:49lives on internet already, right? Um so
399. 13:53for people who aren't using the tool,
400. 13:54you have a very simple delineation
401. 13:56between who can edit thing and who can't
402. 13:58edit thing. If you have application on
403. 14:01putter, you edit thing. If no
404. 14:03application on computer, you no edit
405. 14:05thing. You you review thing. And also
406. 14:07things like the development tools, the
407. 14:08handover tools, which I should have
408. 14:10prepared ahead of time, what they call
409. 14:12dev mode inside Figma is free in Sketch
410. 14:14and it works in pretty much the same
411. 14:16way. Um, you have like the
412. 14:18multicoloration thing and now you have
413. 14:21the majority of the big features. The
414. 14:24thing with the workflow of how symbols
415. 14:26work versus components with variance and
416. 14:28overrides in Sketch is not quite the
417. 14:30same. In some ways, it's kind of better
418. 14:32in Sketch. In other ways, it's worse.
419. 14:34I've spent enough time in Sketch now to
420. 14:35get used to the workflow. Um, it is not
421. 14:38as flexible as the one in Figma.
422. 14:40However, in terms of getting yourself in
423. 14:42a little bit of a mess, it's kind of
424. 14:44better because you're more intentional
425. 14:45about how you construct these nested
426. 14:48things. And I actually really quite like
427. 14:49it. Um, for big design systems, it's
428. 14:52probably slightly worse. But for single
429. 14:54applications, which is what most people
430. 14:56have, it works really well. Uh, I
431. 14:59actually really quite like as a
432. 15:00workflow. In my day job, I work across
433. 15:03multiple tools. I have a design system
434. 15:04that works on multiple tools eventually.
435. 15:07And it Figma is still better at that
436. 15:10today, but I think Sketch are gaining
437. 15:12ground. And the main reason why I back
438. 15:13them, I'm not some sort of paid shill by
439. 15:15this company. I don't, you know,
440. 15:17whatever. The point is independent
441. 15:19company that is not doing things as
442. 15:21evil. I feel like all of the videos I do
443. 15:22at the moment have this weird anti-
444. 15:25capitalist thread weaving weaving
445. 15:28throughout them. Uh I guess but the
446. 15:32point is they're not doing anti-consumer
447. 15:34things. The pricing is very transparent.
448. 15:36The pricing is very fair. They are a
449. 15:39less evil company. And um as much as we
450. 15:42tell ourselves we need a certain set of
451. 15:43tooling actually the amount of people
452. 15:44who suggest to me why don't you try out
453. 15:46Penpot? Penpoint isn't as good as
454. 15:47Sketch, but simply it's the fundamentals
455. 15:49are worse. Sketch is really smooth. It's
456. 15:52really fast. It's really, really
457. 15:53polished. Really, really polished.
458. 15:54There's lots of little nice uh things
459. 15:57you do day in day out which make it very
460. 15:58quick. Uh it's a really pleasant tool to
461. 16:01use. And the main reason to support them
462. 16:03is they're not doing
463. 16:05initification. You don't even have to
464. 16:07have a subscription if you don't want.
465. 16:08You can just buy it and like have
466. 16:12it. That's cool.
467. 16:15I like buying things and having them
468. 16:16forever. That reminds me of times before
469. 16:18the world was so dystopian. And I like
470. 16:20the idea of supporting companies that do
471. 16:22that as well. Penpot's really cool. I
472. 16:24don't think it's there yet. It's really
473. 16:25kind of slow and really janky. They've
474. 16:27got a long way to go. They're adding
475. 16:29features and they're not really
476. 16:30finishing them yet. And um it's all a
477. 16:32bit work in progress. Sketch is there.
478. 16:34It's polished and there's something you
479. 16:36get from a commercial company which
480. 16:37means they generally put out features
481. 16:39when they're ready. Um which is
482. 16:41reassuring. And if you want to do work,
483. 16:43that's also quite
484. 16:45reassuring. Um, that's why I'm doing
485. 16:48this stuff sketch. I have no real agenda
486. 16:51apart from you should probably support a
487. 16:53company that cares a little bit more
488. 16:54about you and be less about fashion and
489. 16:56think more about what the things you
490. 16:58need are and what things actually matter
491. 17:00to you. In a lot of cases, this will do
492. 17:02a lot of things you need it to do. Why
493. 17:04am I whispering? I don't know. Anyway,
494. 17:05that is the end of the video. I would
495. 17:07highly recommend you get yourself a
496. 17:08trial, even if you're just curious. I'm
497. 17:10not saying this is even the best tool in
498. 17:12the world. I'm just saying it's they've
499. 17:13done a lot and I think they're going to
500. 17:14carry on doing a lot and this is such a
501. 17:16great step forward. Uh read through this
502. 17:19this release notes. It's it's absolutely
503. 17:21bananas. I've literally only just
504. 17:23scratched the surface some of the things
505. 17:24you can do here and I've done a very bad
506. 17:26job of it as well. That is the end of
507. 17:28the video and uh um yeah I mean you
508. 17:35know bye.