We can check the margin by selecting the rectangle, holding down alt or option, and hovering the cursor over the frame. So we'll change the dimensions of the rectangle to 379 by 285, and center the image within the frame.īecause our frame is 411 points wide, this gives us a margin of 16 points on either side. We want some space, a margin, between the image and the frame edge. Then, press the R key and create a rectangle for the image of our post. Press F to select the frame tool, and choose the Google Pixel preset. We'll start in a similar way to our wireframing. This is a feed that shows us posts from the pets we follow. Let's start by building out the home page of our social media app. Click the plus icon to add a page, and give it a descriptive name. We can view and navigate pages in the Layers panel of the left sidebar. In the previous tutorial, we created some wireframes for our social media app for pets, Petma! To make it easier for our team to find our designs, we'll keep our explorations in the same file.įigma lets you create multiple pages, each with their own canvas. That's fine too, there isn't one journey or path to a finished design. You may consider these choices at different points in your process. In this tutorial, we'll introduce color and typography, place more emphasis on precision and accessibility, and explore features that speed up the design process in Figma. We can apply these same skills to create higher-fidelity designs. While building our low-fidelity wireframes, we learned how to use tools and adjust properties of our layers to change their appearances. This article is a written version of our Figma for Beginners: Create designs video tutorial! We're exploring other ways of learning and exploring Figma.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |