Figma For Beginners: Explore ideas (1/4)

[Music] figma is a vector design tool that runs in the browser use figma to brainstorm ideas iterate on designs create prototypes and get feedback at any stage of the creative process in this beginner's course we're going to take you through the key stages of designing an app in figma from the initial wireframes to an interactive prototype we'll cover the basics and introduce more powerful features like auto layout components and prototyping there's something for everyone whether you're new to design or new to figma we won't cover all these features in depth but we'll provide you with resources to continue your figma education sign up for a free figma account at figma.com with the figma account you can create teams shared workspaces where you can collaborate on files and organize them in projects choose from a free starter team or a paid professional team if you are a student or educator you can get access to all of figma's professional features for free visit figma.com education apply to verify your education account [Music] once you've created your team you can invite members to collaborate this will give them access to all the projects and files in your team you can choose what level of access each team member has learn more about creating teams and inviting members by searching teams in the figma help center we're pretty sure we've got the next million dollar idea a social media app for pets we want some feedback on the general layout before we start exploring specific elements of our design wireframes are simplified designs that are devoid of any style like color type or imagery they allow us to map out user flows and explore different ways we structure our app without having to design any elements or add any content we start our journey in the figma editor the canvas is the backdrop for all of your designs it's where you'll add all the frames shape text and images there are no bounds to your creativity but you should know that the canvas extends approximately 65 000 points in each direction with the great expanse that is the canvas we need something to put our designs in enter frames frames are the containers we place our shape text and image layers in you can think of each frame in the canvas as a single screen of your design the toolbar contains the tools we need for creating layers select the frame tool in the toolbar frame presets in the sidebar on the right let us create frames with specific dimensions we know that we're making a mobile app so we'll select google pixel 2 xl from the presets two exciting things just happened figma added a frame to our canvas and the sidebar on the left is no longer empty everything that we add to the canvas will also be added to the layers panel let's right-click on this frame and name it to home to explore more of the canvas we can use two fingers on a trackpad or the scroll on the mouse wheel to pan around we can also press and hold the space bar and click and drag to pan let's zoom out so we can see the entire frame if you're using the track pad you can also use the pinch gestures to zoom in and out you can also use shortcuts like command plus and command minus to zoom in or out for granular control adjust the zoom level in your view settings up here now we're ready to add some layers to our frame as this is a wireframe we're going to keep it basic and use shapes like rectangles and ellipses to represent more complex aspects of our designs we'll select the rectangle tool to create an image for a post on our app's home page just like frames every layer in the canvas has dimensions we can adjust a layer's position and dimensions at the top of the right side bar we want our rectangle to take up most of the horizontal space in our frame so let's make the width of our rectangle 380 and a height of 300 [Music] if we look in the layers panel again we can see that our rectangle is within our home frame some layers like frames can contain other layers if we move our rectangle outside of the frame the layers panel updates too we're going to place our rectangle back inside of our frame figma will help us snap the position of the rectangle to align it to the center of the frame cool now we're going to create a shape that represents a user's profile picture or avatar select the ellipse tool in the menu and click to start drawing the ellipse if you hold down shift as we drag we can create a perfect circle we'll release to create the avatar with dimensions of around 30 by 30. holding shift can strain the proportions of our ellipse if we update one value in the right sidebar the other will update too we can click into the width field and use the arrow keys to nudge the ellipse's dimensions to 30. some fields in figma accept equations we can use equations to resize layers by adding subtracting multiplying or dividing the existing value let's add plus 10 to the field to set the dimensions of our circle to 40. basic shapes support both fill and stroke properties we can see these in the right side bar when we select both of our layers by default our layers have a fill of gray but you can choose another color enter a hex code in the field or click the swatch to open the color picker we can select colors from the palette or apply other fills like gradients images and even animated gifs we can also remove the fill entirely by clicking the minus button we want our wireframes to appear like outlines instead of solid shapes we can do this by adding a stroke strokes are outlines or borders around layers we've learned to align layers to their frames but we can also align objects to each other let's use the alignment tools to align the layers to the left as our avatar layer is smaller figma will align it to the larger image layer now we need a username to go with our avatar select the text tool click a spot on the canvas next to our avatar and type in name we'll cover adjusting text properties later in the series we want our text layer to align to the center of our avatar drag over multiple layers to select them all at once and click align vertical center if we want to make small adjustments to a layer's position we can use our arrow keys to nudge objects on the canvas looks good to me users will want to engage with each other by commenting liking and saving posts let's press r to select the rectangle tool and create some icons for these actions we'll use shift again to constrain the proportions and create a perfect square let's aim for dimensions of 32 by 32 instead of drawing three separate squares we can copy the original layer there are a few ways to copy layers hold down alt or option and click and drag on our layers to duplicate it or press command d figma will maintain the same distance between objects if we want to change the uniform spacing between them we can select our layers and update the horizontal spacing in the right side bar we'll need some text below our image let's add that all these layers make up a single post we want to be sure these objects stay together there are two ways we can group layers we can use the keyboard shortcut command g to create a group out of these layers groups allow us to move a collection of layers around without having to select each individual layer we can use groups or frames to organize our layers panel while frames and groups look similarly in the layers panel they are fundamentally different groups are the sum of their parts and have no properties of their own we can use groups to organize our layers or apply properties to layers in bulk frames on the other hand can have their own dimensions and properties some of which can affect the layers within them we'll learn more about frames and their properties later in this series from the right side bar we can convert our group into a frame then we'll copy this frame using the keyboard shortcut to create a second post for our feed we'll move the other post below the other post in the frame the feed is starting to take shape but we're missing some crucial elements to make it look like an app we need a status bar and a navigation menu to move between pages in our app we could make these elements using shapes or we could rely on components and libraries to speed up the process components are the building blocks of our designs they can be basic ui elements like buttons or icons or more elaborate compositions like toolbars and menus libraries are collections of components and styles you can use libraries in figma to create share and use components across your files you might have heard of a design system design systems combine component libraries with standards and guidelines for implementing them in code they're a single source of truth for designers and developers and help to create consistency at scale let's look for a component library in the figma community the figma community is a space where creators can share resources in the form of design files and plugins we're going to use this wireframe ui kit so we'll duplicate the file and add it to our drafts we could copy components from this file and paste them into our wireframes we're going to publish these components to a library instead to make them available to our team we'll open the file in the editor and click the arrow next to the file name and select move to project as components can only be published in a team we'll move this to a project in our team now we can go to the same menu and select publish components and styles we can enter a description of our library and press publish to share it to our team back in our original file we can now access that library in the assets panel of the left side bar click the book icon to open the libraries modal toggle the switch to enable the wireframe in our file let's resize the left side bar hover over the edge until the cursor appears then click and drag to resize okay we need components to represent the status bar at the top of the screen and a floating action button or fab at the bottom this generic status bar is perfect to add this component to our file we can click on the component in the assets panel and drag it onto the canvas we'll position the status bar near the top of the frame and release to place we'll align to the top and left let's repeat this process for the fab and place it in the bottom and the right of the frame now we have copies of these components known as instances instances are connected to the main component they originated from if you make a change to the main component figma will also apply those changes to any instances this saves you from having to manually update every instance when you want to change properties of your component [Music] our eventual application will need to adapt to different screen sizes if we want to resize our frame now our components don't change [Music] we can make sure they respond to different frame sizes using constraints at the moment our constraints are set to the top and left by default we want the status bar to take up the full width of the frame so we'll keep the vertical constraints at top and set our horizontal constraints to left and right we'll set the constraints for the fab at the bottom and right now when we resize our frame the components will respond according to their constraints [Music] our app is starting to come together let's create a frame for our menu select the frame in the toolbar or press the f key we'll add another google pixel 2 xl preset to the canvas let's add some text layers for each page in our app press t to select the text tool and click to create a new text layer we'll type in menu item for now we want all our text layers to be the same width so we'll set the width to 200. we'll also increase the font size to 20. let's duplicate this layer to create four more menu items one for each page in our app hold down alt option then click and drag to duplicate then use the duplicate shortcut let's copy the status bar and fab from our home page to complete our menu page we'll click to select the status bar hold down shift then click to select the fab we'll then use the shortcut command c to copy them to our clipboard select our menu frame and press command v to paste figma paste them in the same position as this frame nice [Music] i think there are some other ways we could lay out this menu page so let's explore some different approaches [Music] okay we have a few designs here but i'm not quite sure which approach to take we could set up a design critique and schedule some time on the calendar but i wonder if anyone on the team is around to help me choose we'll click the share button in the toolbar as we've already invited everyone on our team we don't have to invite them to every file we'll click copy link and drop the link in our team channel our team has some existing sticky note components which we love to use for feedback i'll enable that library in this file while i'm waiting for our team to arrive our team members avatars are showing up in the toolbar to jump to their location on the canvas we can click on their avatar to enter observation mode [Music] it sounds like our team loved the simplicity of our first design but thought that a back button would be better than our fab someone suggested the menu could be underneath the rest of our content i like that idea another person pointed out that the center text makes it hard for users to scan quickly that's a great point it looks like fellow design intern daniel is creating a new version of the menu which incorporates some elements of each of our designs this looks awesome and everyone's on the same page i'm glad we got some feedback on our wireframes before we invested in some higher fidelity designs now we know which direction to go in we'll see you in our next video where we explore color typography and imagery you

Channel: Figma

Views: 199,870

Rating: 4.9661875 out of 5

Keywords: Figma, Figma for Beginners, Wireframing, App Design, Design, UX Design, UI Design, Product Design, Figma Design, Wireframe, Wireframings Figma, Tutorial, Figma Tutorial, Getting started with Figma, Figma starter, Design in Figma, Graphic Design, Vector, Vector shapes

Id: dXQ7IHkTiMM

Length: 15min 49sec (949 seconds)

Published: Tue Dec 01 2020