Master Spacing in UI Design with One Simple System — Transcript

Full transcript

1. 0:00What if I told you that there is a
2. 0:02secret weapon in UI design that
3. 0:06instantly create consistency,
4. 0:10clarity,
5. 0:12and most importantly balance. That
6. 0:15secret weapon is called spacing. And in
7. 0:18this video, I'll show you why spacing
8. 0:21matters so much and how you can master
9. 0:24it and basically in no time. So stick
10. 0:27around and let's jump in. I am
11. 0:31completely starting from blank and I'm
12. 0:34going to use 8 pixel grid system in this
13. 0:36case. But one little hack that I want
14. 0:40you to show is instead of clicking
15. 0:42variables and setting up a number and
16. 0:45starting from scratch, let's use a
17. 0:48system that already exist and try to
18. 0:51learn from it. Something like let's
19. 0:54close this. I don't have any variables
20. 0:57as you see. I don't have any styles,
21. 1:01nothing.
22. 1:02I only set the foundations. Well,
23. 1:06so here under this search panel, I will
24. 1:11be looking at this. Okay, I recently
25. 1:13used that. It's Keegan generate design
26. 1:16system variable style and document. In
27. 1:19this case, I will be eliminate all this
28. 1:23typography and everything else but I
29. 1:27will be focusing on these things. There
30. 1:30are three legs to spacing. One is
31. 1:32radius. We all know we can take the
32. 1:35edges and make them very soft or totally
33. 1:39sharp and size in general like the text
34. 1:42size. It can be a size of your card and
35. 1:45whatsoever.
36. 1:46And spacing. So spacing is let's say a
37. 1:50padding in your button or a gap between
38. 1:54two buttons. And let's go ahead and
39. 1:56create all these variables up front.
40. 2:00Boom. Done. So instead of you
41. 2:05doing from scratch, I now have three
42. 2:08collections.
43. 2:11For me, there's a there's one problem,
44. 2:13but I'll fix it right away, which is not
45. 2:17a major deal, but I kind of like it in
46. 2:20my own system. So, what else? If you
47. 2:24want to see everything right up front,
48. 2:27you can also go to present. Yeah,
49. 2:31radius, space, and size.
50. 2:34Present all. It says like it can take
51. 2:36some time, but I really don't mind about
52. 2:39this.
53. 2:41As you all know, documentation is taking
54. 2:44a lot of time as well. So, let's go
55. 2:47ahead and check it out.
56. 2:49Spacing tokens from zero to
57. 2:5372. These are radius cool from full to
58. 2:57none
59. 2:59and size as well. Good. Shout out to the
60. 3:04designer and the company like Keegan
61. 3:06Design. They are great.
62. 3:10How I would like to build a design
63. 3:12system is at least two two-level
64. 3:14systems. Something like the primitives
65. 3:17and the brand level. Like you at least
66. 3:20have to have a system with two branches.
67. 3:24A more scalable design system there are
68. 3:26like three legs to it. But let's start
69. 3:29with simple and let's start with two.
70. 3:33Let's close these things. Cool.
71. 3:37Let's play with variables. Right now, I
72. 3:41just don't like that they are all in
73. 3:44different
74. 3:46categories or they are all in different
75. 3:50collections. So, let's bring back all
76. 3:52the collections. But before I will set a
77. 3:55collection called you can call it
78. 3:58primitives. You can call whatever you
79. 4:00want. I will create something like base.
80. 4:04So let's start with
81. 4:07radius.
82. 4:09Copy them. Copy
83. 4:12and add it to my base. Yes. Okay. Cool.
84. 4:17But before adding more numbers on top of
85. 4:20this, what I'm going to do is I'll
86. 4:22select all of them and create a new
87. 4:25group and call it radius.
88. 4:30Done.
89. 4:32Let's go ahead and delete radius right
90. 4:34now. Delete collection. Nice. And the
91. 4:37second one is size. Select all.
92. 4:42Copy.
93. 4:43I can now also delete.
94. 4:48Go to base.
95. 4:52Paste.
96. 4:55And this group is size.
97. 4:59Nice.
98. 5:01And lastly space
99. 5:05copy
100. 5:07delete.
101. 5:09We are in the on the base all variables
102. 5:12paste.
103. 5:20Let's call this space.
104. 5:24Great. I have now three categories
105. 5:28[snorts]
106. 5:29and in total I have 36 variables. That's
107. 5:32great. I can add more or delete more,
108. 5:35change the names whatsoever. But one
109. 5:38single problem that I have here is let's
110. 5:42go ahead and write
111. 5:44zero to UI. Okay, let's say that I am
112. 5:50going to make a button or whatsoever.
113. 5:54Let's put them in an auto layout as well
114. 5:57and call it button for now.
115. 6:01And for this button, I might need let's
116. 6:04say a background color and
117. 6:09and also for the font size I want to do
118. 6:14something like 16.
119. 6:19What's what else is like I would like to
120. 6:23call it from so this is your number you
121. 6:26can change it manually write 20 but I
122. 6:29would like to use variables right now
123. 6:32click here
124. 6:34and as you see that this is a padding
125. 6:36but I literally see a radius and that's
126. 6:41definitely
127. 6:43not a good way to show. So let's fix
128. 6:46that issue very fast.
129. 6:49So for these ones, I want them only to
130. 6:52be appeared on the radius and nothing
131. 6:55else. So select
132. 6:59edit variables, uncheck these and just
133. 7:02check corner radius. That's it.
134. 7:06Coming back to this again. So when I
135. 7:08click here, select a variable, I don't
136. 7:12have this thing anymore. And if you want
137. 7:15to categorize even more, which I highly
138. 7:20encourage you to do. So size, let's
139. 7:23decide
140. 7:25things about size. Edit.
141. 7:29I would like
142. 7:31size to be width and height. Definitely.
143. 7:35Uh not this one. We will come back to
144. 7:37it. Text content from time to time. Size
145. 7:41of stroke. M. Yes, layer opacity
146. 7:47maybe but I will keep things simple as
147. 7:50of today. So font weight not but font
148. 7:54size yes
149. 7:57line height and letter spacing paragraph
150. 8:00spacing they are all part of
151. 8:04spacing. So I will keep size as these
152. 8:08four categories.
153. 8:11Cool. So for space again select all of
154. 8:16them right click edit
155. 8:20and
156. 8:21most likely space gap
157. 8:25also
158. 8:29what else line height
159. 8:32this paragraph spacing
160. 8:35I think that's it yeah again I can come
161. 8:39back and make uh major changes so These
162. 8:42are again in base level I have all these
163. 8:45settings. So
164. 8:48I how many minutes? Like 10 minutes in
165. 8:51general. And you already have everything
166. 8:54systemized which is kind of cool.
167. 8:59Let's use them uh right away by for
168. 9:03example
169. 9:05let's uh create some grids over here for
170. 9:09my desktop. This is 1440. And so I will
171. 9:13add um layout guide plus
172. 9:18columns 12 columns. Okay.
173. 9:22So normally I'll um leave it as 8020. I
174. 9:26have a metric for this one. Again I see
175. 9:29it here radius but uh I will double
176. 9:33check on that. It should not appear
177. 9:35here. This is going to be a space for
178. 9:39this. I will select medium
179. 9:43and let's say space again
180. 9:50if we have 80 or not. So we have 48
181. 9:53right now
182. 9:55and let's go ahead and fix that and add
183. 9:58it to um
184. 10:01to our variable.
185. 10:03Okay.
186. 10:10Uh, I have it here. Excel.
187. 10:15Okay.
188. 10:18Excel 7
189. 10:2280. Done. So, let's go ahead and make
190. 10:26this Excel 7. Boom.
191. 10:30Come here.
192. 10:33Space X7.
193. 10:35Cool. This is coming from space X7.
194. 10:40This is space medium. Cool. That is
195. 10:45done. And all I have to do is add this
196. 10:48one.
197. 10:50Sorry. Add it to my styles. And let's
198. 10:54say 12 columns
199. 11:00desktop.
200. 11:02so that I don't need to do it over and
201. 11:04over again. This is done. The second
202. 11:07example that I would like to give is so
203. 11:10as you see if if I look it in developer
204. 11:14mode
205. 11:15I see it maybe I don't but everything
206. 11:19set everything is coming from components
207. 11:21and the good thing about this thing is
208. 11:24let's come back to design mode once
209. 11:26again you remember that the the ones
210. 11:29that we set as XL 7 80
211. 11:35if I select this and make it one pixel.
212. 11:38Everything change right away. Regardless
213. 11:41if I have 10,000 different pages, which
214. 11:45hopefully you don't um it will change it
215. 11:49automatically. You can manipulate this
216. 11:51data whenever you want. That's the
217. 11:53beauty of variables. So the first
218. 11:56example is done. The second example is
219. 11:59let's say I need something like a a
220. 12:02button
221. 12:05uh button
222. 12:08default
223. 12:11and this is going to be again button
224. 12:15slashnavigation
225. 12:20and okay cool what can I do with these
226. 12:24things so first and foremost let's put
227. 12:26them under a component set so that this
228. 12:30becomes a button and these properties
229. 12:32becomes like navigation
230. 12:34and uh the default one and in terms of
231. 12:38property I'll write the type so because
232. 12:40this is the type of that button so what
233. 12:43do I have in general is let's say I do
234. 12:47not want
235. 12:50in general
236. 12:52uh padding
237. 12:54so space let's go to space and I zero.
238. 12:58Cool.
239. 13:01And what else? I would like to
240. 13:04go to space once again and say that I
241. 13:08would prefer something like base or base
242. 13:12is too much. Let's do XS
243. 13:16in general. That's fine. Again for this
244. 13:20one I don't need any
245. 13:24margin uh gap between child items since
246. 13:28in a
247. 13:30navigational level I I'm not going to
248. 13:32put any kind of
249. 13:36icons or whatsoever. That is done for
250. 13:40this one. again.
251. 13:44Uh first and foremost, I need something
252. 13:46like um a background fill.
253. 13:50Uh for now, let's make it something like
254. 13:53blue. We can change it all the way. And
255. 13:58uh what else? Let's set the radius. As
256. 14:02you see, I don't have any space. I don't
257. 14:04have any
258. 14:07size as well. So, I want like a full
259. 14:10one.
260. 14:12But this would be from space let's say
261. 14:17eight
262. 14:19and this would be something like 32
263. 14:24maybe
264. 14:25good for this button.
265. 14:30Let's do something like 16
266. 14:35and just check it out if my button works
267. 14:38well in this case or not. Yeah, eight
268. 14:40seems a little bit small. So, let's make
269. 14:43it 16 12.
270. 14:47So, that's not the point. I I'm getting
271. 14:50um extra
272. 14:53detailed here. So, you don't need it to.
273. 14:56So,
274. 14:58this one is basically ready. But I would
275. 15:02like to, of course, I can change it to
276. 15:04default whatsoever.
277. 15:08I would like to add um
278. 15:11property and that's going to be
279. 15:13something like the input
280. 15:17property for this one which is going to
281. 15:21be add one and text navigation or let's
282. 15:25say input navigation
283. 15:27and same goes to this one
284. 15:32input I can if I say uh if I select this
285. 15:36it's going to be also navigation.
286. 15:39So, let's go ahead and change the
287. 15:41default value for this.
288. 15:45Again, most of my classes here on
289. 15:48YouTube is totally off off the cuff. So,
290. 15:54I can make mistakes and I don't have any
291. 15:57plans to edit them or cut them right
292. 15:59away because this is the deal. So
293. 16:02obviously I can add like more buttons
294. 16:05and things like that but that is the
295. 16:09case. So this is let's say home.
296. 16:12That's it. And the spacing for each of
297. 16:15them works as follows.
298. 16:21Good. When I look at the in developer
299. 16:23mode,
300. 16:28yeah, the padding
301. 16:30radius full and things like that. So
302. 16:32that is going to make more sense to a
303. 16:35developer instead of and also they can
304. 16:37see the outputs like space X
305. 16:42um L2 things like that. We can take it
306. 16:47another step further. Something like
307. 16:52come back to design mode
308. 16:59something like as I right now know
309. 17:03spacing that is Excel 2 and this is SM.
310. 17:09I can go ahead and open all my variables
311. 17:14from base to another collection.
312. 17:18Create collection and called brand.
313. 17:23And let's go ahead and give like a
314. 17:25number. The first number should be
315. 17:29let's say for my button button
316. 17:34component and that's going to be
317. 17:39under space
318. 17:43or size. Yeah, let's name it space.
319. 17:47And um
320. 17:51let's do it something like space
321. 18:03under space. Let's categorize as
322. 18:08vertical
323. 18:11padding.
324. 18:12Okay.
325. 18:14And let's go ahead and check this is
326. 18:18space.
327. 18:20Uh I think it was XS.
328. 18:24We can change it after that. And
329. 18:28the shortcut to duplicate this thing is
330. 18:30shift and enter.
331. 18:33For this one, I would like to do
332. 18:35something like
333. 18:37okay, it's it's padding again, but this
334. 18:39time this is horizontal.
335. 18:45Soal padding
336. 18:51something like this.
337. 18:54Good. So let's go ahead and check it out
338. 18:59instead of this one because as you see
339. 19:02it is space Excel fine but we can do it
340. 19:07better.
341. 19:09So let's go ahead and say button.
342. 19:14This is horizontal padding. Good.
343. 19:17Nothing has changed since the values are
344. 19:19the same. Again for
345. 19:23my button this is going to be vertical
346. 19:25padding. Done. So the vertical padding I
347. 19:29accidentally select eight. So let's do
348. 19:32ahead go ahead and make it small. Boom.
349. 19:35It's now 12. that kind of power is on
350. 19:40you with these tools. So when I go ahead
351. 19:44and select my home button and go to
352. 19:47developer mode,
353. 19:50as you see,
354. 19:52we have button space, vertical padding,
355. 19:56horizontal padding, whatsoever. That's
356. 19:59definitely making more sense now. And as
357. 20:02you see, it's been 20 minutes so far. So
358. 20:05you are already as applying these things
359. 20:08to your design up front you are already
360. 20:12working like a pro and cherry on top
361. 20:15this is more systematic way rather than
362. 20:18giving like a random numbers with so
363. 20:21many integers that's totally a nightmare
364. 20:24I have been there that's why I'm talking
365. 20:26about this right now and uh without
366. 20:30further ado let's go to card this time
367. 20:33and I will make um a a basic card
368. 20:36system. But uh for this example, let's
369. 20:42use my fonts.
370. 20:45And
371. 20:46for this one,
372. 20:49young serif nice for zero to UI uh
373. 20:53branding, which it's still in test
374. 20:56phase, but I I wouldn't call it like
375. 20:58brand. It's like a test thing. Anyhow,
376. 21:02um, and this looks boring already. So,
377. 21:06let's do something like a
378. 21:10this type of parentheses.
379. 21:14And okay, the sizing these are 16. So, I
380. 21:17can I'm happy to make them like 14 now.
381. 21:21So, instead of 14, I can go ahead and
382. 21:23select um size. Okay. [snorts]
383. 21:28and uh call it 14. We don't have 14. We
384. 21:32can add 14, but let's add base for now.
385. 21:35Okay.
386. 21:38And that's it. Let's make this one left
387. 21:40align, right align. Cool.
388. 21:44Align them
389. 21:46because at the end of the day in this
390. 21:48card, this is going to be my category.
391. 21:50The other one is going to be the date.
392. 21:53And this one 39 is too big. So first
393. 22:00select the font size here. The font size
394. 22:03is large
395. 22:06and this is going to be again
396. 22:12size size
397. 22:15going back to here again or for this
398. 22:18example I would like to do it 150%
399. 22:24instead of guessing
400. 22:28for the titles I can definitely reduce
401. 22:30that.
402. 22:33So you see I can select the font size as
403. 22:37well.
404. 22:39So the top part would be an auto layout.
405. 22:42Okay. And uh maybe let's say that these
406. 22:46two are closer to each other and uh this
407. 22:50is maybe a little bit
408. 22:54a little have more gap. So, I changed my
409. 22:58mind and I'm going to do it gladly 32
410. 23:03and reduce this bad boy to 110. Cool.
411. 23:09So, let's go ahead and make this top
412. 23:12part another auto layout. You say auto
413. 23:14layout auto layout. Cool. And then what
414. 23:18else? bring from my assets since I have
415. 23:22one button thing going on.
416. 23:27Good. And how to call it this time?
417. 23:34Read or explore.
418. 23:38Cool.
419. 23:40And yeah, I'm happy with everything. So
420. 23:43I can make a auto layout. Final auto
421. 23:47layout. And as you see that the the
422. 23:49naming structure is terrible. Absolute
423. 23:52terrible. So let's go ahead and say
424. 23:57rename layers and watch how it makes
425. 23:59changes.
426. 24:01Boom. Container container header image.
427. 24:05And the good thing is right now it's no
428. 24:08nowhere near writing the UI basic or
429. 24:12let's say 27 October.
430. 24:16These are more developer friendly naming
431. 24:20convention and this is a um let's say an
432. 24:24image and description. Cool. So I have
433. 24:28this but the only thing that I will
434. 24:30change is this is going to be my card.
435. 24:32I'll give some spacing
436. 24:36for each part. Base spacing
437. 24:40and again base spacing
438. 24:44this one as well.
439. 24:46For the padding, I might leave it as
440. 24:50auto and it can push further all these
441. 24:53child elements.
442. 24:55Um,
443. 24:58but and this is like filling the thing,
444. 25:02filling the container. So, let's go
445. 25:04ahead and say hug.
446. 25:07Okay, I think I'm happy with that. Maybe
447. 25:10perhaps add like a little bit of fill
448. 25:13color.
449. 25:15Okay. A dark one and some sort of
450. 25:21um base radius. Um maybe 12, maybe
451. 25:2816 corner radius.
452. 25:31If I do that, I will have to double
453. 25:34check and maybe increase the size of
454. 25:37this to 20.
455. 25:41Yeah, I feel more happier about that. So
456. 25:46in that case I can definitely convert
457. 25:49into a
458. 25:51component and then um kind of give
459. 25:55things like add and say
460. 25:59category.
461. 26:01Okay. And I can definitely give
462. 26:07this one as um a date. [snorts]
463. 26:11Okay. And
464. 26:14definitely again doing the same mistake
465. 26:17over and over again. This is going to be
466. 26:20the title of my card. And maybe I can
467. 26:24even say do I have a button or not? And
468. 26:29I might say has button.
469. 26:34Okay.
470. 26:36True.
471. 26:38Uh, and that's it. So, if I take a copy
472. 26:41out of that, I don't want a button. I
473. 26:44want this and that. Cool. That's all I
474. 26:48really want. And here is the title. I
475. 26:50can change. Hello.
476. 26:54It's all done. This is also good. So you
477. 26:57understand the basic of both components
478. 27:01and spacing both at the same time. The
479. 27:04third one is a section layout card.
480. 27:10I don't know if I need my um card here.
481. 27:15But let's go ahead and bring each
482. 27:18elements right away.
483. 27:22And hm one thing that I remember that as
484. 27:26you see that I can change the button
485. 27:28name here but I cannot change the button
486. 27:31name there. So let's go ahead and fix
487. 27:33that issue.
488. 27:36That's not a big issue but
489. 27:40I can add uh let me try to remember
490. 27:43because they change it all the time. I
491. 27:48think that's another property. Yes,
492. 27:49nested instances. What it means is there
493. 27:53are instances in that within that card
494. 27:58that could be nested. So in this case
495. 28:01it's a button. So if I click that guess
496. 28:04what happens
497. 28:06when I click this one. Now the button
498. 28:10nested item is here. So I can say
499. 28:13instead of explore read more.
500. 28:18Voila. Done. So, let's go ahead and um
501. 28:23um add press F desktop.
502. 28:27And from here, I will use these two
503. 28:31colors
504. 28:33right up front. But let's go ahead and
505. 28:36bring our layout guide from 12 columns.
506. 28:39Done.
507. 28:41What else?
508. 28:44This time I will add
509. 28:48this color as let's say
510. 28:52okay let's add it to our
511. 28:54variables in brand we have the button
512. 28:57but we have
513. 29:02let's say add another one called
514. 29:09color
515. 29:11slash
516. 29:13default
517. 29:16And as you know I can change anytime
518. 29:22um my decision. So I can either do this.
519. 29:28So bring back this value or I can go to
520. 29:32my base and I don't I have everything
521. 29:35related with
522. 29:38spacing. I'll do a color one.
523. 29:43and call something like orange. Okay,
524. 29:48more generic name
525. 29:52and select um this one. And I will even
526. 29:57call it something like orange 500. I
527. 30:00know that this is somewhere in between
528. 30:03if I want to scale it from 100 to 500 is
529. 30:06somewhere between. So
530. 30:13let's go ahead and
531. 30:15link those two issues from library
532. 30:20orange 500
533. 30:23which is great. Now if I go back
534. 30:28and once again on base level I will say
535. 30:32that this thing
536. 30:34should not be anywhere because I only
537. 30:37want an option to be able to see
538. 30:43let's say
539. 30:46the color default done
540. 30:49okay
541. 30:51uh in this case I need to Change the
542. 30:57color of this thing from red to
543. 31:00something like white.
544. 31:04Cool.
545. 31:06And that is done. The another another
546. 31:10thing that I am
547. 31:13wondering is to add on a base level. So
548. 31:19let's go ahead and duplicate group.
549. 31:24or I will add it as like 50. Okay, this
550. 31:27is let's say 50
551. 31:30and add this color or to be more precise
552. 31:35this color
553. 31:38because I I already know that that's a
554. 31:40part of my scale. Let's go ahead and go
555. 31:44to my brand color default. let's say
556. 31:49text or you name it and orange 50 done
557. 31:56so initially what I'm going to do is
558. 31:59like select all the text we have instead
559. 32:02of fill so text done so color text nice
560. 32:08add it to
561. 32:10this area I'll also add this bad boy
562. 32:13somewhere here I don't now. And I do I
563. 32:19do need
564. 32:21some sort of
565. 32:24uh let's say a heading, but I'll
566. 32:28definitely need
567. 32:31one two three four these three to be
568. 32:36something like navigation buttons. And
569. 32:38this is going to be um a CTA button. So,
570. 32:43shift A to auto layout. Center these bad
571. 32:46boys and call it navigation.
572. 32:51Cool. Don't forget to make component
573. 32:54everything.
574. 32:56And let's go ahead and call like one by
575. 33:00one something like this is going to be
576. 33:05u
577. 33:07bio
578. 33:09and this is going to be
579. 33:12something like
580. 33:15about.
581. 33:17Okay. And this is going to be contact.
582. 33:23Oh contact.
583. 33:25Thank you. And this is going to be
584. 33:28horses.
585. 33:30Lovely. And uh let's say this is too
586. 33:34much. Apply a variable space. Let's say
587. 33:37something like base 16.
588. 33:40Too tight. Let's go ahead enlarge.
589. 33:46Even too tight.
590. 33:5040. I need more breathing space for
591. 33:55these things. Cool. Is it perfect? No.
592. 33:58But it does the job. So I'll take it. Uh
593. 34:01this is already an instance of something
594. 34:04else. So let's go ahead and create
595. 34:06another auto layout
596. 34:09and uh call it header this time.
597. 34:14me and my typos
598. 34:16and make a component so that I have like
599. 34:19two three levels of components right
600. 34:21away.
601. 34:23And let's go ahead and add say
602. 34:2910 column structure.
603. 34:32Is it perfect? Almost
604. 34:37good. So that part is uh ready for the
605. 34:42courses
606. 34:43and maybe I'll go ahead and do this card
607. 34:50like that.
608. 34:52And maybe I can add it [snorts]
609. 34:57let's say
610. 34:59three columns. But as you see nothing
611. 35:02has changed in terms of this thing um
612. 35:06paddings and margins. Nothing has been
613. 35:08changed. So that's done.
614. 35:16Um
615. 35:19what else?
616. 35:21Yeah, I'm not happy with these stuff for
617. 35:25now.
618. 35:27Let's go ahead and
619. 35:30take these out.
620. 35:33And this is going to be
621. 35:41cool for now just to arrange them.
622. 35:49So I'll do this thing as again this and
623. 35:54that as
624. 35:58good
625. 36:00and definitely
626. 36:02use a size from my system. Let's let's
627. 36:06use a size from the system.
628. 36:09Good. Size is going to be
629. 36:15maybe 40 is too big.
630. 36:18Not actually. But for the subtitles, I'm
631. 36:21not that happy with that choice. Let's
632. 36:23go down to 24, maybe 32.
633. 36:27Fine.
634. 36:30And for this thing, I would go and go
635. 36:34ahead and say 110.
636. 36:38I can also tokenize that thing, but I
637. 36:42don't want to. I think 90 is better
638. 36:46enough.
639. 36:48And for this one
640. 36:51and the other paragraph,
641. 36:56I'll go ahead and select my font here is
642. 37:01mono jet brace.
643. 37:04Go ahead and select
644. 37:08um let's do it big. Oh, this is too big.
645. 37:11Yeah, the mono itself have a very rich
646. 37:15and condensed
647. 37:17But in this case the thing is smaller.
648. 37:21So I'll put like more spacing. Good.
649. 37:27Not only that for both of them I will
650. 37:31set something like the paragraph spacing
651. 37:34in between. So this is space not size
652. 37:38something like
653. 37:4016 as well or even
654. 37:4524. So that it becomes like rich,
655. 37:49generous,
656. 37:50yada yada.
657. 37:54Let's make it a tiny bit bigger.
658. 37:58Duplicate one thing else and [snorts]
659. 38:01put them in an auto layout. Give some
660. 38:03spacing from
661. 38:06space base space. Good.
662. 38:12So yeah, I think these are ready. All I
663. 38:15have to do is like double check in terms
664. 38:18of size whatsoever.
665. 38:21These are looking good,
666. 38:23chug it in into one
667. 38:27uh auto layout.
668. 38:29And um that's going to be something like
669. 38:32a body container
670. 38:37container.
671. 38:40And let's go ahead check it out. What is
672. 38:42going on here? Yes.
673. 38:45When you make this size,
674. 38:49let's say drag and drop, it thinks that
675. 38:51you want a precise
676. 38:54uh height for these things. So, but I
677. 38:57don't.
678. 38:59So, now it seems way better.
679. 39:07Um,
680. 39:10align these. [snorts]
681. 39:13So yeah, more or less I think you
682. 39:16already understand or maybe I'm already
683. 39:19overengineering
684. 39:21this thing. So you see how easy it is
685. 39:24for me to give the variables up front
686. 39:29kind of connect variables
687. 39:33with the other variables as well.
688. 39:37And also how do I align things
689. 39:40perfectly?
690. 39:42And let's go ahead and say this one is
691. 39:46also like a variable space, but I want
692. 39:51slightly
693. 39:54smaller. That's it. Why? Because maybe
694. 39:58in the mobile version I need them a
695. 40:01little bit
696. 40:02tighter so that I can give it right
697. 40:06away.
698. 40:14This looks way better. Yep.
699. 40:17Yeah. Hope you understand something. Um,
700. 40:21drop a like if you do understand.
701. 40:25If you don't drop a dislike or I prefer
702. 40:28you to comment something below and uh if
703. 40:32you find a value in this type of videos,
704. 40:34please share it with your friends. This
705. 40:36will help me a lot to build this little
706. 40:39channel and continue to give more videos
707. 40:44along the way. And as always, it was a
708. 40:47pleasure and hope to see you in the next
709. 40:50one. Cheers.