![]() Let’s add rectangles to the "This or That" frame to represent the two options. Since we don’t need to get into too much detail with colors, stylings, and design, we can use basic shapes to represent the layout of our app. Rename the frame to "This or That" and and press return (Mac) or enter (Windows).From the layers panel, double click on the name of the frame you just placed on the canvas.Establishing a clear naming structure makes it easier to find and manage layers in your files. From the Design panel on the right sidebar, select the iPhone 14 Pro preset size.Click the Frame icon from the toolbar, or press F.Let’s start with the “This or That” frame. A “This” frame that shows what happens when the user pick “This”.A “This or That” frame that shows two options.For this project, let’s focus on the following two frames: We also want to design our app for mobile devices, so we’ll use preset frame sizes. Frames can also be nested within other frames to create complex designs with multiple levels of hierarchy.Įach frame represents a different page of our app. You can use them to organize and structure design elements on the canvas.Ī frame can be any size and can contain any number of design elements. A frame is a container that holds design elements such as shapes, text, and images. Log in to your Figma account from .įrames are the main building blocks of Figma.Four text layers to identify key button labels.Seven rectangles to represent the images and buttons on the app. ![]() ![]() To build our wireframe, we’ll use the following objects: Let’s get started.ĭesign a wireframe with frames, shapes, and text Together, wireframes and prototypes help you plan out how users will engage with and navigate through your app.īy the end of this project, you’ll have experience working with frames, shapes, text, and prototyping in Figma. They help you design, test, and show how users will engage with and navigate through your product. Prototypes are designs with interactive elements. You can take your wireframes to the next level by using prototypes. You can use wireframes to quickly create multiple iterations of what your final product could looks like-without spending too much time focusing on things like color, images, or other elements of design. ![]() Wireframes are low fidelity mockups of webpages or apps. Genius! Before you finalize your logo and start picking out company swag, you’ll want to design some basic wireframes and prototypes to test out your app idea with users. In the app, users will be presented with two options, and they need to pick only one. Let’s imagine you’ve come up with a new million dollar app idea… This or That. In this project, we’ll learn how to create a basic wireframe and prototype of a mobile app. Topics: Frames, shapes, text, prototyping, groups, renaming layers. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |