subtitlecat.com

All language subtitles for 36 - Designing in Figma — Using Auto

Afrikaans

Akan

Albanian

Amharic

Arabic

Armenian

Azerbaijani

Basque

Belarusian

Bemba

Bengali

Bihari

Bosnian

Breton

Bulgarian

Cambodian

Catalan

Cebuano

Cherokee

Chichewa

Chinese (Simplified)

Chinese (Traditional)

Corsican

Croatian

Czech

Danish

Dutch

English

Esperanto

Estonian

Ewe

Faroese

Filipino

Finnish

French

Frisian

Galician

Georgian

German

Greek

Guarani

Gujarati

Haitian Creole

Hausa

Hawaiian

Hebrew

Hindi

Hmong

Hungarian

Icelandic

Igbo

Indonesian

Interlingua

Irish

Italian

Japanese

Javanese

Kannada

Kazakh

Kinyarwanda

Kirundi

Kongo

Korean

Krio (Sierra Leone)

Kurdish

Kurdish (Soranî)

Kyrgyz

Laothian

Latin

Latvian

Lingala

Lithuanian

Lozi

Luganda

Luo

Luxembourgish

Macedonian

Malagasy

Malay

Malayalam

Maltese

Maori

Marathi

Mauritian Creole

Moldavian

Mongolian

Myanmar (Burmese)

Montenegrin

Nepali

Nigerian Pidgin

Northern Sotho

Norwegian

Norwegian (Nynorsk)

Occitan

Oriya

Oromo

Pashto

Persian Download

Polish

Portuguese (Brazil)

Portuguese (Portugal)

Punjabi

Quechua

Romanian

Romansh

Runyakitara

Russian

Samoan

Scots Gaelic

Serbian

Serbo-Croatian

Sesotho

Setswana

Seychellois Creole

Shona

Sindhi

Sinhalese

Slovak

Slovenian

Somali

Spanish

Spanish (Latin American)

Sundanese

Swahili

Swedish

Tajik

Tamil

Tatar

Telugu

Thai

Tigrinya

Tonga

Tshiluba

Tumbuka

Turkish

Turkmen

Twi

Uighur

Ukrainian

Urdu

Uzbek

Vietnamese

Welsh

Wolof

Xhosa

Yiddish

Yoruba

Zulu

Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:01,120 --> 00:00:02,970 ‫Hey, everyone, and welcome back. 2 00:00:02,980 --> 00:00:06,160 ‫We are going to get into how to use auto layout. 3 00:00:06,190 --> 00:00:11,560 ‫So all the layout is a feature that is essentially part of regular frame. 4 00:00:11,560 --> 00:00:13,030 ‫So let's jump right in. 5 00:00:13,030 --> 00:00:20,050 ‫I'm going to press F to get my frames list and then I'm going to just select the first one just for 6 00:00:20,050 --> 00:00:21,790 ‫the sake of our demonstration. 7 00:00:21,790 --> 00:00:28,750 ‫So I'm going to rename this and to rename it quickly, you can Press Command R or Control R, and I 8 00:00:28,750 --> 00:00:37,000 ‫am just going to call this my auto layout frame and I'm just going to shrink it just a bit and I'm going 9 00:00:37,000 --> 00:00:38,500 ‫to create another frame below it. 10 00:00:39,620 --> 00:00:44,750 ‫And I'm just going to call this my regular frame so everyone can see the difference. 11 00:00:45,290 --> 00:00:49,580 ‫Now, all of the frames are really great. 12 00:00:49,580 --> 00:00:55,850 ‫If you want to have like responsiveness a part of it, if you want to essentially make sure that like 13 00:00:55,850 --> 00:00:57,560 ‫you can build some nice lists. 14 00:00:57,590 --> 00:01:02,000 ‫It's really great for even, you know, creating like buttons that are responsive. 15 00:01:02,000 --> 00:01:04,730 ‫So I'm just going to get into a quick demonstration. 16 00:01:04,730 --> 00:01:06,290 ‫So I'm going to create a rectangle. 17 00:01:07,880 --> 00:01:09,920 ‫Her square doesn't matter. 18 00:01:09,920 --> 00:01:13,340 ‫And I'm going to place it inside both of these frames. 19 00:01:15,710 --> 00:01:22,130 ‫Now, when we look at the regular frame, you know, everything is as we learned before about frames. 20 00:01:22,340 --> 00:01:25,750 ‫But now let's turn this into an auto layout frame over here. 21 00:01:25,760 --> 00:01:27,170 ‫So I'm going to click that frame. 22 00:01:27,320 --> 00:01:32,390 ‫And if you go over to the properties panels over on the right, on the right side bar and the design 23 00:01:32,390 --> 00:01:35,990 ‫panel, you'll notice auto layout if you click that little plus button. 24 00:01:37,370 --> 00:01:40,580 ‫Now it is in an auto layout frame. 25 00:01:40,820 --> 00:01:49,160 ‫I'll get into what all this means in a quick second, but this allows you to adjust padding and between 26 00:01:49,160 --> 00:01:53,990 ‫items and the padding between that is horizontal and vertical. 27 00:01:53,990 --> 00:02:01,910 ‫So if I were to say add another item like let me add another rectangle, you can just copy and paste 28 00:02:01,910 --> 00:02:02,270 ‫it. 29 00:02:03,680 --> 00:02:11,660 ‫You notice how the whole frame grows and if I add more, the frame keeps on growing and you can even 30 00:02:11,660 --> 00:02:18,620 ‫adjust how that framework's the direction if you wanted to go vertical or horizontal. 31 00:02:18,890 --> 00:02:21,170 ‫And there are many more details there. 32 00:02:21,990 --> 00:02:25,710 ‫You can even nest orderly frames within frames. 33 00:02:26,850 --> 00:02:28,680 ‫So I'm just going to move this one down. 34 00:02:28,680 --> 00:02:35,160 ‫And like here, if you press command C and Command V or control C, control V, it doesn't adjust the 35 00:02:35,160 --> 00:02:35,790 ‫frame. 36 00:02:35,880 --> 00:02:40,020 ‫So all the layout frames are really great for responsiveness. 37 00:02:40,760 --> 00:02:42,110 ‫Let's jump right in. 38 00:02:42,110 --> 00:02:46,460 ‫So we have another frame that I want to create. 39 00:02:46,460 --> 00:02:53,990 ‫So I'm going to just create two frames of two, so one and two and then another frame. 40 00:02:53,990 --> 00:02:55,430 ‫So I'm going to select these ones. 41 00:02:55,430 --> 00:02:58,400 ‫I'm going to hold on shift and I'm going to right click. 42 00:02:58,910 --> 00:03:06,650 ‫And if we go down, we can see that we can turn it into an auto layout so we can add auto layout. 43 00:03:06,680 --> 00:03:08,030 ‫That is another frame. 44 00:03:09,260 --> 00:03:10,850 ‫So and you can see it here. 45 00:03:10,850 --> 00:03:12,330 ‫It is applied as well. 46 00:03:12,350 --> 00:03:14,210 ‫And I'm going to do the same over here. 47 00:03:15,170 --> 00:03:16,190 ‫Right click. 48 00:03:17,200 --> 00:03:21,370 ‫And it's shift a as the shortcut as you notice over here. 49 00:03:22,200 --> 00:03:27,390 ‫This allows me to nest frames within frames and this is really powerful for layouts. 50 00:03:27,420 --> 00:03:30,480 ‫We'll be using this in certain demonstrations as well. 51 00:03:30,480 --> 00:03:37,620 ‫But if I now say change the direction, we're not going to have four vertically. 52 00:03:37,620 --> 00:03:44,580 ‫We're going to have those two frames stuck on to one another and you can see how they're nested below. 53 00:03:44,580 --> 00:03:49,860 ‫So we have our two rectangles up top and two rectangles at the bottom, and you can make some pretty 54 00:03:49,860 --> 00:03:55,320 ‫cool grids and you can even nest another frame within this frame if you'd wanted to. 55 00:03:56,020 --> 00:04:03,370 ‫And the easiest way to add new items you can copy and paste. 56 00:04:03,610 --> 00:04:11,670 ‫You can also duplicate which is command dx or control dx, which will duplicate what your last action. 57 00:04:11,680 --> 00:04:18,010 ‫So I'm just going to go back with the command Z and you can also reorder the object. 58 00:04:18,010 --> 00:04:20,890 ‫So I'm just going to change the color here really quickly. 59 00:04:21,700 --> 00:04:28,780 ‫If I use my arrow keys, I can order the object within a frame and even the frame within the other frame 60 00:04:29,350 --> 00:04:35,080 ‫so you can reorder things really quickly just using your arrow keys or you can click and drag. 61 00:04:36,600 --> 00:04:37,200 ‫Oops. 62 00:04:37,470 --> 00:04:39,570 ‫Just be careful not to drag it outside the frame. 63 00:04:40,050 --> 00:04:41,760 ‫And if I really wanted to, just. 64 00:04:42,300 --> 00:04:47,010 ‫If I wanted to hide them or delete them, I can do that as well. 65 00:04:47,010 --> 00:04:48,630 ‫So I can hide them like that. 66 00:04:50,520 --> 00:04:52,920 ‫Or I can just delete it and it's gone. 67 00:04:54,720 --> 00:05:00,390 ‫And that is how you use auto frames in the most basic sense. 6774