![]() ![]() The Petma brand is fun and friendly, and we want that to come across in our designs. Learn more about layout grids → Place image and image fills, corner radius Tip! Working with an 8-point-grid system? You can change the grid size to 8. We're not going to focus on layout grids for this video, so we'll hide them using the keyboard shortcut: We can click the grid icon to customize our grid size, or change the grid style to columns or rows. To enforce a grid system, select a frame and click in the Layout grid section of the right sidebar. ![]() We can also use grids to quickly and consistently align layers. We can use this function to make sure our objects are laid out precisely. Figma will display the distance between the two. 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 |