[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.04,0:00:06.06,Default,,0000,0000,0000,,>> Figma is a vector design\Ntool that runs in the browser.
Dialogue: 0,0:00:06.06,0:00:15.39,Default,,0000,0000,0000,,Use Figma to brainstorm ideas,\Niterate on designs, create prototypes,
Dialogue: 0,0:00:15.47,0:00:18.20,Default,,0000,0000,0000,,and get feedback at any stage\Nof the creative process.
Dialogue: 0,0:00:18.90,0:00:23.74,Default,,0000,0000,0000,,In this beginner's course, we're going to take\Nyou through the key stages of designing an app
Dialogue: 0,0:00:23.74,0:00:27.94,Default,,0000,0000,0000,,in Figma, from the initial wireframes\Nto an interactive prototype.
Dialogue: 0,0:00:28.28,0:00:31.20,Default,,0000,0000,0000,,We'll cover the basics, and\Nintroduce more powerful features
Dialogue: 0,0:00:31.20,0:00:34.33,Default,,0000,0000,0000,,like auto layout, components, and prototyping.
Dialogue: 0,0:00:34.33,0:00:38.39,Default,,0000,0000,0000,,There's something for everyone, whether\Nyou're new to design or new to Figma.
Dialogue: 0,0:00:38.94,0:00:42.62,Default,,0000,0000,0000,,We won't cover all these features in\Ndepth, but we'll provide you with resources
Dialogue: 0,0:00:42.65,0:00:45.99,Default,,0000,0000,0000,,to continue your Figma education.
Dialogue: 0,0:00:48.10,0:00:52.67,Default,,0000,0000,0000,,Sign up for a free Figma account at figma.com.
Dialogue: 0,0:00:52.67,0:00:57.80,Default,,0000,0000,0000,,With the Figma account, you can create teams,\Nshared workspaces, or you can collaborate
Dialogue: 0,0:00:57.80,0:01:00.25,Default,,0000,0000,0000,,on files and organize them in projects.
Dialogue: 0,0:01:00.96,0:01:04.43,Default,,0000,0000,0000,,Choose from a free starter team\Nor a paid professional team.
Dialogue: 0,0:01:04.79,0:01:08.07,Default,,0000,0000,0000,,If you are a student or educator,\Nyou can get access to all
Dialogue: 0,0:01:08.07,0:01:10.04,Default,,0000,0000,0000,,of Figma's professional features for free.
Dialogue: 0,0:01:10.08,0:01:15.94,Default,,0000,0000,0000,,Visit figma.com/education/apply\Nto verify your education account.
Dialogue: 0,0:01:15.94,0:01:24.61,Default,,0000,0000,0000,,Once you've created your team, you\Ncan invite members to collaborate.
Dialogue: 0,0:01:24.61,0:01:29.10,Default,,0000,0000,0000,,This will give them access to all\Nthe projects and files in your team.
Dialogue: 0,0:01:29.10,0:01:31.81,Default,,0000,0000,0000,,You can choose what level of\Naccess each team member has.
Dialogue: 0,0:01:32.16,0:01:35.24,Default,,0000,0000,0000,,Learn more about creating\Nteams and inviting members
Dialogue: 0,0:01:35.45,0:01:40.57,Default,,0000,0000,0000,,by searching Teams in the Figma Help Center.
Dialogue: 0,0:01:40.66,0:01:43.54,Default,,0000,0000,0000,,We're pretty sure we've got\Nthe next million-dollar idea:
Dialogue: 0,0:01:43.61,0:01:45.57,Default,,0000,0000,0000,,a social media app for pets.
Dialogue: 0,0:01:46.57,0:01:50.59,Default,,0000,0000,0000,,We want some feedback on the general layout\Nbefore we start exploring specific elements
Dialogue: 0,0:01:50.59,0:01:51.37,Default,,0000,0000,0000,,of our design.
Dialogue: 0,0:01:51.82,0:01:54.58,Default,,0000,0000,0000,,Wireframes are simplified\Ndesigns that are devoid
Dialogue: 0,0:01:54.58,0:01:57.91,Default,,0000,0000,0000,,of any style, like color, type, or imagery.
Dialogue: 0,0:01:58.46,0:02:02.22,Default,,0000,0000,0000,,They allow us to map out user flows and\Nexplore different ways we structure our app
Dialogue: 0,0:02:02.48,0:02:06.03,Default,,0000,0000,0000,,without having to design any\Nelements or add any content.
Dialogue: 0,0:02:06.73,0:02:12.19,Default,,0000,0000,0000,,We start our journey in the Figma editor.
Dialogue: 0,0:02:12.28,0:02:15.21,Default,,0000,0000,0000,,The canvas is the backdrop\Nfor all of your designs.
Dialogue: 0,0:02:15.51,0:02:19.37,Default,,0000,0000,0000,,It's where you'll add all the\Nframes, shape, text, and images.
Dialogue: 0,0:02:19.57,0:02:22.87,Default,,0000,0000,0000,,There are no bounds to your\Ncreativity, but you should know
Dialogue: 0,0:02:22.87,0:02:27.62,Default,,0000,0000,0000,,that the canvas extends approximately\N65,000 points in each direction.
Dialogue: 0,0:02:28.04,0:02:36.25,Default,,0000,0000,0000,,With the great expanse that is the canvas,\Nwe need something to put our designs in.
Dialogue: 0,0:02:36.25,0:02:36.86,Default,,0000,0000,0000,,Enter frames.
Dialogue: 0,0:02:36.86,0:02:41.62,Default,,0000,0000,0000,,Frames are the containers we place\Nour shape, text, and image layers in.
Dialogue: 0,0:02:41.62,0:02:46.64,Default,,0000,0000,0000,,You can think of each frame in the\Ncanvas as a single screen of your design.
Dialogue: 0,0:02:46.64,0:02:49.89,Default,,0000,0000,0000,,The toolbar contains the tools\Nwe need for creating layers.
Dialogue: 0,0:02:50.39,0:02:52.12,Default,,0000,0000,0000,,Select the Frame tool in the toolbar.
Dialogue: 0,0:02:53.19,0:02:58.46,Default,,0000,0000,0000,,Frame presets in the sidebar on the right let\Nus create frames with specific dimensions.
Dialogue: 0,0:02:58.46,0:03:04.07,Default,,0000,0000,0000,,We know that we're making a mobile app, so\Nwe'll select Google Pixel 2XL from the presets.
Dialogue: 0,0:03:04.96,0:03:06.74,Default,,0000,0000,0000,,Two exciting things just happened.
Dialogue: 0,0:03:07.16,0:03:11.54,Default,,0000,0000,0000,,Figma added a frame to our canvas and the\Nsidebar on the left is no longer empty.
Dialogue: 0,0:03:11.54,0:03:15.64,Default,,0000,0000,0000,,Everything that we add to the canvas\Nwill also be added to the Layers panel.
Dialogue: 0,0:03:15.64,0:03:26.53,Default,,0000,0000,0000,,Let's right click on this\Nframe and name it to Home.
Dialogue: 0,0:03:26.53,0:03:31.36,Default,,0000,0000,0000,,To explore more of the canvas, we can use\Ntwo fingers on a trackpad or the scroll
Dialogue: 0,0:03:31.36,0:03:33.14,Default,,0000,0000,0000,,on the mouse wheel to pan around.
Dialogue: 0,0:03:33.14,0:03:38.47,Default,,0000,0000,0000,,We can also press and hold the\Nspace bar and click and drag to pan.
Dialogue: 0,0:03:38.47,0:03:40.57,Default,,0000,0000,0000,,Let's zoom out so we can see the entire frame.
Dialogue: 0,0:03:40.57,0:03:46.30,Default,,0000,0000,0000,,If you're using the trackpad, you can also\Nuse the pinch gestures to zoom in and out.
Dialogue: 0,0:03:46.30,0:03:51.21,Default,,0000,0000,0000,,You can also use shortcuts like Command\NPlus and Command Minus to zoom in or out.
Dialogue: 0,0:03:51.21,0:03:55.41,Default,,0000,0000,0000,,For granular control, adjust the zoom\Nlevel in your view settings up here.
Dialogue: 0,0:03:55.41,0:04:02.14,Default,,0000,0000,0000,,Now, we're ready to add some\Nlayers to our frame.
Dialogue: 0,0:04:02.14,0:04:06.44,Default,,0000,0000,0000,,As this is a wireframe, we're going to keep\Nit basic and use shapes like rectangles
Dialogue: 0,0:04:06.44,0:04:10.81,Default,,0000,0000,0000,,and ellipses to represent more\Ncomplex aspects of our designs.
Dialogue: 0,0:04:10.94,0:04:14.90,Default,,0000,0000,0000,,We'll select the rectangle tool to create\Nan image for a post on our app's home page.
Dialogue: 0,0:04:14.97,0:04:19.06,Default,,0000,0000,0000,,Just like frames, every layer\Nin the canvas has dimensions.
Dialogue: 0,0:04:19.18,0:04:23.28,Default,,0000,0000,0000,,We can adjust a layer's position and\Ndimensions at the top of the right side bar.
Dialogue: 0,0:04:24.02,0:04:27.50,Default,,0000,0000,0000,,We want our rectangle to take up most\Nof the horizontal space in our frame,
Dialogue: 0,0:04:27.80,0:04:36.22,Default,,0000,0000,0000,,so let's make the width of our\Nrectangle 380, and a height of 300.
Dialogue: 0,0:04:36.22,0:04:41.09,Default,,0000,0000,0000,,If we look in the layers panel again, we can\Nsee that our rectangle is within our home frame.
Dialogue: 0,0:04:41.33,0:04:44.18,Default,,0000,0000,0000,,Some layers, like frames,\Ncan contain other layers.
Dialogue: 0,0:04:44.76,0:04:48.70,Default,,0000,0000,0000,,If we move our rectangle outside of the\Nframe, the layers panel updates, too.
Dialogue: 0,0:04:48.70,0:04:52.06,Default,,0000,0000,0000,,We're going to place our\Nrectangle back inside of our frame.
Dialogue: 0,0:04:52.06,0:04:55.23,Default,,0000,0000,0000,,Figma will help us snap the\Nposition of the rectangle
Dialogue: 0,0:04:55.23,0:05:01.40,Default,,0000,0000,0000,,to align it to the center of the frame.
Dialogue: 0,0:05:01.40,0:05:06.61,Default,,0000,0000,0000,,Cool. Now we're going to create a shape that\Nrepresents a user's profile picture or avatar.
Dialogue: 0,0:05:06.61,0:05:10.17,Default,,0000,0000,0000,,Select the Ellipse tool on the menu\Nand click to start drawing the ellipse.
Dialogue: 0,0:05:10.25,0:05:14.45,Default,,0000,0000,0000,,If you hold down Shift as we drag,\Nwe can create a perfect circle.
Dialogue: 0,0:05:15.18,0:05:18.73,Default,,0000,0000,0000,,We'll release to create the avatar\Nwith dimensions of around 30 by 30.
Dialogue: 0,0:05:19.16,0:05:22.10,Default,,0000,0000,0000,,Holding Shift can strain the\Nproportions of our ellipse.
Dialogue: 0,0:05:22.55,0:05:26.19,Default,,0000,0000,0000,,If we update one value in the right-side\Nbar, the other will update, too.
Dialogue: 0,0:05:26.83,0:05:29.62,Default,,0000,0000,0000,,We can click into the width\Nfield and use the arrow keys
Dialogue: 0,0:05:29.62,0:05:31.71,Default,,0000,0000,0000,,to nudge the ellipse's dimensions to 30.
Dialogue: 0,0:05:32.50,0:05:34.74,Default,,0000,0000,0000,,Some fields in Figma accept equations.
Dialogue: 0,0:05:34.74,0:05:38.64,Default,,0000,0000,0000,,We can use equations to resize\Nlayers by adding, subtracting,
Dialogue: 0,0:05:38.77,0:05:41.87,Default,,0000,0000,0000,,multiplying, or dividing the existing value.
Dialogue: 0,0:05:42.43,0:05:50.32,Default,,0000,0000,0000,,Let's add plus 10 to the field to set\Nthe dimensions of our circle to 40.
Dialogue: 0,0:05:50.42,0:05:53.44,Default,,0000,0000,0000,,Basic shapes support both\Nfill and stroke properties.
Dialogue: 0,0:05:54.08,0:05:57.89,Default,,0000,0000,0000,,We can see these in the right sidebar\Nwhen we select both of our layers.
Dialogue: 0,0:05:57.89,0:06:03.58,Default,,0000,0000,0000,,By default, our layers have a fill of\Ngrey, but you can choose another color.
Dialogue: 0,0:06:03.58,0:06:08.46,Default,,0000,0000,0000,,Enter a hex code in the field or click\Nthe Swatch to open the color picker.
Dialogue: 0,0:06:08.46,0:06:11.90,Default,,0000,0000,0000,,We can select colors from the\NPalette, or apply other fills
Dialogue: 0,0:06:11.90,0:06:15.08,Default,,0000,0000,0000,,like gradients, images, and even animated gifs.
Dialogue: 0,0:06:15.08,0:06:19.75,Default,,0000,0000,0000,,We can also remove the fill entirely\Nby clicking the minus button.
Dialogue: 0,0:06:19.75,0:06:24.82,Default,,0000,0000,0000,,We want our wireframes to appear like\Noutlines instead of solid shapes.
Dialogue: 0,0:06:25.28,0:06:27.64,Default,,0000,0000,0000,,We can do this by adding a stroke.
Dialogue: 0,0:06:27.75,0:06:30.14,Default,,0000,0000,0000,,Strokes are outlines or borders around layers.
Dialogue: 0,0:06:31.05,0:06:38.56,Default,,0000,0000,0000,,We've learned to align layers to their frames,\Nbut we can also align objects to each other.
Dialogue: 0,0:06:39.36,0:06:41.100,Default,,0000,0000,0000,,Let's use the alignment tools\Nto align the layers to the left.
Dialogue: 0,0:06:42.17,0:06:47.21,Default,,0000,0000,0000,,As our avatar layer is smaller, Figma\Nwill align it to the larger image layer.
Dialogue: 0,0:06:47.33,0:06:50.21,Default,,0000,0000,0000,,Now, we need a username to go with our avatar.
Dialogue: 0,0:06:50.58,0:06:55.78,Default,,0000,0000,0000,,Select the Text tool, click a spot on the\Ncanvas next to our avatar, and type in name.
Dialogue: 0,0:06:55.90,0:06:58.92,Default,,0000,0000,0000,,We'll cover adjusting text\Nproperties later in the series.
Dialogue: 0,0:06:59.85,0:07:03.42,Default,,0000,0000,0000,,We want our text layer to align\Nto the center of our avatar.
Dialogue: 0,0:07:03.42,0:07:08.21,Default,,0000,0000,0000,,Drag over multiple layers to select them\Nall at once and click Align Vertical Center.
Dialogue: 0,0:07:08.27,0:07:11.87,Default,,0000,0000,0000,,If we want to make small\Nadjustments to a layer's position,
Dialogue: 0,0:07:12.15,0:07:15.41,Default,,0000,0000,0000,,we can use our arrow keys to\Nnudge objects on the canvas.
Dialogue: 0,0:07:15.50,0:07:19.40,Default,,0000,0000,0000,,Looks good to me.
Dialogue: 0,0:07:20.73,0:07:25.45,Default,,0000,0000,0000,,Users will want to engage with each other\Nby commenting, liking, and saving posts.
Dialogue: 0,0:07:25.45,0:07:30.56,Default,,0000,0000,0000,,Let's press R to select the Rectangle tool\Nand create some icons for these actions.
Dialogue: 0,0:07:30.56,0:07:34.100,Default,,0000,0000,0000,,We'll use Shift again to constrain the\Nproportions and create a perfect square.
Dialogue: 0,0:07:35.12,0:07:38.24,Default,,0000,0000,0000,,Let's aim for dimensions of 32 by 32.
Dialogue: 0,0:07:38.24,0:07:43.53,Default,,0000,0000,0000,,Instead of drawing three separate\Nsquares, we can copy the original layer.
Dialogue: 0,0:07:43.53,0:07:45.87,Default,,0000,0000,0000,,There are a few ways to copy layers.
Dialogue: 0,0:07:46.10,0:07:50.97,Default,,0000,0000,0000,,Hold down Alt or Option and click and\Ndrag on our layers to duplicate it
Dialogue: 0,0:07:51.06,0:07:57.51,Default,,0000,0000,0000,,or press Command D. Figma will maintain\Nthe same distance between objects.
Dialogue: 0,0:07:57.51,0:08:02.50,Default,,0000,0000,0000,,If we want to change the uniform spacing\Nbetween them, we can select our layers
Dialogue: 0,0:08:02.50,0:08:05.58,Default,,0000,0000,0000,,and update the horizontal\Nspacing in the right sidebar.
Dialogue: 0,0:08:06.04,0:08:07.63,Default,,0000,0000,0000,,We'll need some text below our image.
Dialogue: 0,0:08:08.12,0:08:09.90,Default,,0000,0000,0000,,Let's add that.
Dialogue: 0,0:08:09.90,0:08:15.44,Default,,0000,0000,0000,,All these layers make up a single post.
Dialogue: 0,0:08:15.50,0:08:20.57,Default,,0000,0000,0000,,We want to be sure these objects stay together.
Dialogue: 0,0:08:20.63,0:08:22.99,Default,,0000,0000,0000,,There are two ways we can group layers.
Dialogue: 0,0:08:23.17,0:08:27.41,Default,,0000,0000,0000,,We can use the keyboard shortcut, Command\NG, to create a group out of these layers.
Dialogue: 0,0:08:28.03,0:08:29.87,Default,,0000,0000,0000,,Groups allow us to move a collection of layers
Dialogue: 0,0:08:29.87,0:08:32.83,Default,,0000,0000,0000,,around without having to\Nselect each individual layer.
Dialogue: 0,0:08:32.97,0:08:36.39,Default,,0000,0000,0000,,We can use Groups or Frames\Nto organize our Layers panel.
Dialogue: 0,0:08:37.27,0:08:41.49,Default,,0000,0000,0000,,While Frames and Groups look similarly in the\NLayers panel, they are fundamentally different.
Dialogue: 0,0:08:41.49,0:08:45.76,Default,,0000,0000,0000,,Groups are the sum of their parts\Nand have no properties of their own.
Dialogue: 0,0:08:45.76,0:08:50.80,Default,,0000,0000,0000,,We can use Groups to organize our layers\Nor apply properties to layers in bulk.
Dialogue: 0,0:08:50.80,0:08:53.76,Default,,0000,0000,0000,,Frames, on the other hand, can have\Ntheir own dimensions and properties,
Dialogue: 0,0:08:53.76,0:08:56.25,Default,,0000,0000,0000,,some of which can affect the layers within them.
Dialogue: 0,0:08:56.25,0:08:59.60,Default,,0000,0000,0000,,We'll learn more about frames and\Ntheir properties later in this series.
Dialogue: 0,0:08:59.60,0:09:04.13,Default,,0000,0000,0000,,From the right sidebar, we can\Nconvert our group into a frame.
Dialogue: 0,0:09:04.70,0:09:09.96,Default,,0000,0000,0000,,Then we'll copy this frame using the keyboard\Nshortcut to create a second post for our feed.
Dialogue: 0,0:09:10.75,0:09:19.68,Default,,0000,0000,0000,,We'll move the other post below\Nthe other post in the frame.
Dialogue: 0,0:09:19.68,0:09:21.08,Default,,0000,0000,0000,,The feed is starting to take shape,
Dialogue: 0,0:09:21.08,0:09:24.58,Default,,0000,0000,0000,,but we're missing some crucial\Nelements to make it look like an app.
Dialogue: 0,0:09:24.81,0:09:29.17,Default,,0000,0000,0000,,We need a status bar and a navigation\Nmenu to move between pages in our app.
Dialogue: 0,0:09:29.31,0:09:33.05,Default,,0000,0000,0000,,We could make these elements using\Nshapes, or we could rely on components
Dialogue: 0,0:09:33.05,0:09:34.85,Default,,0000,0000,0000,,and libraries to speed up the process.
Dialogue: 0,0:09:35.21,0:09:37.65,Default,,0000,0000,0000,,Components are the building\Nblocks of our designs.
Dialogue: 0,0:09:38.14,0:09:40.88,Default,,0000,0000,0000,,They can be basic UI elements\Nlike buttons or icons,
Dialogue: 0,0:09:40.88,0:09:43.91,Default,,0000,0000,0000,,or more elaborate compositions\Nlike toolbars and menus.
Dialogue: 0,0:09:44.71,0:09:47.21,Default,,0000,0000,0000,,Libraries are collections\Nof components and styles.
Dialogue: 0,0:09:47.75,0:09:53.66,Default,,0000,0000,0000,,You can use libraries in Figma to create,\Nshare, and use components across your files.
Dialogue: 0,0:09:53.72,0:09:55.36,Default,,0000,0000,0000,,You might have heard of a design system.
Dialogue: 0,0:09:55.84,0:09:58.95,Default,,0000,0000,0000,,Design systems combine component\Nlibraries with standards
Dialogue: 0,0:09:58.95,0:10:01.53,Default,,0000,0000,0000,,and guidelines for implementing them in code.
Dialogue: 0,0:10:01.53,0:10:04.08,Default,,0000,0000,0000,,They're a single source of truth\Nfor designers and developers
Dialogue: 0,0:10:04.30,0:10:06.86,Default,,0000,0000,0000,,and help to create consistency at scale.
Dialogue: 0,0:10:07.11,0:10:09.94,Default,,0000,0000,0000,,Let's look for a component\Nlibrary in the Figma community.
Dialogue: 0,0:10:09.94,0:10:13.65,Default,,0000,0000,0000,,The Figma community is a space\Nwhere creators can share resources
Dialogue: 0,0:10:13.65,0:10:15.72,Default,,0000,0000,0000,,in the form of design files and plugins.
Dialogue: 0,0:10:15.72,0:10:18.39,Default,,0000,0000,0000,,We're going to use this wireframe UI kit,
Dialogue: 0,0:10:18.39,0:10:20.98,Default,,0000,0000,0000,,so we'll duplicate the file\Nand add it to our drafts.
Dialogue: 0,0:10:22.15,0:10:25.96,Default,,0000,0000,0000,,We could copy components from this file\Nand paste them into our wireframes.
Dialogue: 0,0:10:26.50,0:10:29.30,Default,,0000,0000,0000,,We're going to publish these\Ncomponents to a library instead
Dialogue: 0,0:10:29.69,0:10:31.20,Default,,0000,0000,0000,,to make them available to our team.
Dialogue: 0,0:10:31.81,0:10:34.64,Default,,0000,0000,0000,,We'll open the file in the\Neditor and click the arrow next
Dialogue: 0,0:10:34.64,0:10:37.82,Default,,0000,0000,0000,,to the file name and select Move to Project.
Dialogue: 0,0:10:37.82,0:10:42.24,Default,,0000,0000,0000,,As components can only be published in a team,\Nwe'll move this to a project in our team.
Dialogue: 0,0:10:42.44,0:10:47.86,Default,,0000,0000,0000,,Now, we can go to the same menu and\Nselect Publish Components and Styles.
Dialogue: 0,0:10:48.01,0:10:52.42,Default,,0000,0000,0000,,We can enter a description of our library\Nand press Publish to share it to our team.
Dialogue: 0,0:10:52.91,0:10:56.30,Default,,0000,0000,0000,,Back in our original file, we\Ncan now access that library
Dialogue: 0,0:10:56.53,0:10:58.91,Default,,0000,0000,0000,,in the Assets panel of the left sidebar.
Dialogue: 0,0:10:58.91,0:11:01.31,Default,,0000,0000,0000,,Click the book icon to open the library's modal.
Dialogue: 0,0:11:01.31,0:11:04.65,Default,,0000,0000,0000,,Toggle the switch to enable\Nthe wireframe in our file.
Dialogue: 0,0:11:05.18,0:11:06.65,Default,,0000,0000,0000,,Let's resize the left sidebar.
Dialogue: 0,0:11:06.65,0:11:11.98,Default,,0000,0000,0000,,Hover over the edge until the cursor\Nappears, then click and drag to resize.
Dialogue: 0,0:11:12.50,0:11:16.78,Default,,0000,0000,0000,,Okay, we need components to represent\Nthe status bar at the top of the screen,
Dialogue: 0,0:11:16.78,0:11:20.76,Default,,0000,0000,0000,,and a floating action button,\Nor FAB, at the bottom.
Dialogue: 0,0:11:20.76,0:11:22.51,Default,,0000,0000,0000,,This generic status bar is perfect.
Dialogue: 0,0:11:22.51,0:11:26.07,Default,,0000,0000,0000,,To add this component to our file,\Nwe can click on the component
Dialogue: 0,0:11:26.07,0:11:29.45,Default,,0000,0000,0000,,in the assets panel and drag it onto the canvas.
Dialogue: 0,0:11:29.45,0:11:33.17,Default,,0000,0000,0000,,We'll position the status bar near the\Ntop of the frame and release to place.
Dialogue: 0,0:11:33.29,0:11:36.19,Default,,0000,0000,0000,,We'll align to the top and left.
Dialogue: 0,0:11:36.30,0:11:41.23,Default,,0000,0000,0000,,Let's repeat this process for the FAB and place\Nit in the bottom and the right of the frame.
Dialogue: 0,0:11:41.23,0:11:48.08,Default,,0000,0000,0000,,Now, we have copies of these\Ncomponents known as instances.
Dialogue: 0,0:11:48.08,0:11:52.36,Default,,0000,0000,0000,,Instances are connected to the main\Ncomponent they originated from.
Dialogue: 0,0:11:52.87,0:11:55.05,Default,,0000,0000,0000,,If you make a change to the main component,
Dialogue: 0,0:11:55.05,0:11:58.26,Default,,0000,0000,0000,,Figma will also apply those\Nchanges to any instances.
Dialogue: 0,0:11:58.51,0:12:02.05,Default,,0000,0000,0000,,This saves you from having to manually\Nupdate every instance when you want
Dialogue: 0,0:12:02.05,0:12:07.43,Default,,0000,0000,0000,,to change properties of your component.
Dialogue: 0,0:12:07.43,0:12:10.78,Default,,0000,0000,0000,,Our eventual application will need\Nto adapt to different screen sizes.
Dialogue: 0,0:12:11.04,0:12:14.89,Default,,0000,0000,0000,,If we want to resize our frame\Nnow, our components don't change.
Dialogue: 0,0:12:15.64,0:12:20.32,Default,,0000,0000,0000,,We can make sure they respond to\Ndifferent frame sizes using constraints.
Dialogue: 0,0:12:20.32,0:12:23.95,Default,,0000,0000,0000,,At the moment, our constraints are\Nset to the top and left by default.
Dialogue: 0,0:12:24.45,0:12:27.25,Default,,0000,0000,0000,,We want the status bar to take\Nup the full width of the frame,
Dialogue: 0,0:12:27.25,0:12:30.09,Default,,0000,0000,0000,,so we'll keep the vertical constraints at top
Dialogue: 0,0:12:30.20,0:12:32.71,Default,,0000,0000,0000,,and set our horizontal constraints\Nto left and right.
Dialogue: 0,0:12:33.42,0:12:36.27,Default,,0000,0000,0000,,We'll set the constraints for\Nthe fab at the bottom and right.
Dialogue: 0,0:12:36.27,0:12:41.89,Default,,0000,0000,0000,,Now, when we resize our frame, the components\Nwill respond according to their constraints.
Dialogue: 0,0:12:41.89,0:12:48.69,Default,,0000,0000,0000,,Our app is starting to come together.
Dialogue: 0,0:12:48.77,0:12:51.12,Default,,0000,0000,0000,,Let's create a frame for our menu.
Dialogue: 0,0:12:51.30,0:12:53.93,Default,,0000,0000,0000,,Select the frame in the toolbar\Nor press the F key.
Dialogue: 0,0:12:53.93,0:12:57.96,Default,,0000,0000,0000,,We'll add another Google Pixel\N2XL preset to the canvas.
Dialogue: 0,0:12:58.45,0:13:01.50,Default,,0000,0000,0000,,Let's add some text layers\Nfor each page in our app.
Dialogue: 0,0:13:01.50,0:13:05.37,Default,,0000,0000,0000,,Press T to select the text tool and\Nclick to create a new text layer.
Dialogue: 0,0:13:05.90,0:13:08.02,Default,,0000,0000,0000,,We'll type in menu item for now.
Dialogue: 0,0:13:08.11,0:13:13.37,Default,,0000,0000,0000,,We want all our text layers to be the\Nsame width, so we'll set the width to 200.
Dialogue: 0,0:13:13.37,0:13:15.88,Default,,0000,0000,0000,,We'll also increase the font size to 20.
Dialogue: 0,0:13:16.02,0:13:21.82,Default,,0000,0000,0000,,Let's duplicate this layer to create four\Nmore menu items, one for each page in our app.
Dialogue: 0,0:13:21.82,0:13:25.83,Default,,0000,0000,0000,,Hold down Alt slash Option, then\Nclick and drag to duplicate.
Dialogue: 0,0:13:25.99,0:13:29.16,Default,,0000,0000,0000,,Then, use the duplicate shortcut.
Dialogue: 0,0:13:29.59,0:13:34.12,Default,,0000,0000,0000,,Let's copy the status bar in Fab from\Nour home page to complete our menu page.
Dialogue: 0,0:13:34.29,0:13:39.66,Default,,0000,0000,0000,,We'll Click to select the status bar, hold\Ndown Shift, then Click to select the Fab.
Dialogue: 0,0:13:40.09,0:13:44.19,Default,,0000,0000,0000,,We'll then use the shortcut Command\NC to copy them to our clipboard.
Dialogue: 0,0:13:44.29,0:13:47.28,Default,,0000,0000,0000,,Select our menu frame and\Npress Command V to paste.
Dialogue: 0,0:13:47.32,0:13:50.49,Default,,0000,0000,0000,,Figma pastes them in the\Nsame position as this frame.
Dialogue: 0,0:13:51.14,0:13:58.17,Default,,0000,0000,0000,,Nice. I think there are some other\Nways we could lay out this menu page,
Dialogue: 0,0:13:58.17,0:14:00.10,Default,,0000,0000,0000,,so let's explore some different approaches.
Dialogue: 0,0:14:00.10,0:14:10.83,Default,,0000,0000,0000,,Okay, we have a few designs here, but I'm\Nnot quite sure which approach to take.
Dialogue: 0,0:14:10.83,0:14:14.76,Default,,0000,0000,0000,,We could set up a design critique and\Nschedule some time on the calendar,
Dialogue: 0,0:14:14.76,0:14:18.14,Default,,0000,0000,0000,,but I wonder if anyone on the\Nteam is around to help me choose.
Dialogue: 0,0:14:18.24,0:14:20.95,Default,,0000,0000,0000,,We'll click the Share button in the toolbar.
Dialogue: 0,0:14:20.95,0:14:26.63,Default,,0000,0000,0000,,As we've already invited everyone on our team,\Nwe don't have to invite them to every file.
Dialogue: 0,0:14:27.33,0:14:30.38,Default,,0000,0000,0000,,We'll click Copy Link and drop\Nthe link in our team channel.
Dialogue: 0,0:14:30.38,0:14:35.50,Default,,0000,0000,0000,,Our team has some existing sticky note\Ncomponents which we love to use for feedback.
Dialogue: 0,0:14:36.23,0:14:39.72,Default,,0000,0000,0000,,I'll enable that library in this file\Nwhile I'm waiting for our team to arrive.
Dialogue: 0,0:14:40.89,0:14:44.15,Default,,0000,0000,0000,,Our team members avatars are\Nshowing up in the toolbar.
Dialogue: 0,0:14:44.15,0:14:53.34,Default,,0000,0000,0000,,To jump to their location on the canvas, we can\Nclick on their avatar to enter observation mode.
Dialogue: 0,0:14:53.34,0:14:56.40,Default,,0000,0000,0000,,It sounds like our team loved the\Nsimplicity of our first design,
Dialogue: 0,0:14:56.40,0:14:59.46,Default,,0000,0000,0000,,but thought that a back button\Nwould be better than our fab.
Dialogue: 0,0:15:00.37,0:15:03.78,Default,,0000,0000,0000,,Someone suggested the menu could be\Nunderneath the rest of our content.
Dialogue: 0,0:15:03.78,0:15:05.58,Default,,0000,0000,0000,,I like that idea.
Dialogue: 0,0:15:05.70,0:15:10.71,Default,,0000,0000,0000,,Another person pointed out that the center\Ntext makes it hard for users to scan quickly.
Dialogue: 0,0:15:11.07,0:15:13.01,Default,,0000,0000,0000,,That's a great point.
Dialogue: 0,0:15:13.48,0:15:17.65,Default,,0000,0000,0000,,It looks like fellow design intern Daniel\Nis creating a new version of the menu,
Dialogue: 0,0:15:17.78,0:15:20.95,Default,,0000,0000,0000,,which incorporates some elements\Nof each of our designs.
Dialogue: 0,0:15:20.95,0:15:23.53,Default,,0000,0000,0000,,This looks awesome and everyone's\Non the same page.
Dialogue: 0,0:15:23.59,0:15:27.91,Default,,0000,0000,0000,,I'm glad we got some feedback on\Nour wireframes before we invested
Dialogue: 0,0:15:27.91,0:15:30.33,Default,,0000,0000,0000,,in some higher fidelity designs.
Dialogue: 0,0:15:30.33,0:15:32.46,Default,,0000,0000,0000,,Now, we know which direction to go in.
Dialogue: 0,0:15:32.46,0:15:37.34,Default,,0000,0000,0000,,We'll see you in our next video where we\Nexplore color, typography and imagery.