![]() The duplicate will be placed directly on top of the original-so once you’ve created the copy, just drag it across to the other frame. Try this with the button you created yesterday. Duplicate the button you made yesterday.Īnother way to duplicate elements is by selecting them and hitting ⌘ D (Mac) or Ctrl D (PC). Then, simply double-click the “Username” text and change it to “Password”. Place your duplicate objects so that they’re sat directly below the username field. You can use old-school copy and paste ( ⌘ C then ⌘ V on Mac, or Ctrl C then Ctrl V on PC).Īlternatively, you can hold down Option (Mac) or Alt (PC), and then click and drag from the selection to make a duplicate. With the Move tool selected V, just drag a marquee (rectangular selection) around the rectangle and text you just created. It’s very easy to duplicate elements in Figma. Duplicate the username field to create a password field If you hold down Shift ⇧ while using the arrow keys, the selection will move in 10 pixel increments. You can do this by clicking once on the text layer, and then “nudging” it 1 pixel at a time using the arrow keys. Hey presto! A form field.Īs a final step, make sure that the “Username” text is positioned nicely in relation to the rectangle. Change the font color to white, and again change the opacity-this time let’s go for 70%. The font will probably still be set to the size you just used for the wordmark, so once you’ve typed the text, select the Text layer and change the text size to 16 pixels. Click anywhere in the frame, and type “Username”. Next, press T to go back to the Text tool. (This is strangely satisfying, you’ll agree.) Try it-select the rectangle and simply type “25”. You can also set this by simply selecting the object and typing in the opacity value you want. It’s set to 100% by default-let’s change that to 25%. This isn’t actually labeled in the Figma interface, but it does exist: it’s the number shown in the Inspector under “Layer”. We then need to change the Opacity setting to make the shape semi-transparent. Notice how Figma displays the size of the shape in numbers as you’re drawing it?Ĭhange the fill color to be white (#FFFFFF). First, select the Rectangle tool R and click and drag to create a rectangle about 250 pixels wide and about 30 pixels high. We can easily create some sleek login fields just using rectangles and text. Once it’s centered, release the mouse button! 5. ![]() You’ll notice if you drag it near the horizontal middle of the frame, guides will pop up to indicate that the text is centered. ![]() If you click and drag on the text you’ve just created, you can move it around the frame to reposition it. (Check out the lovely ligature that joins the f and the i!) 4. We’ve set ours all lowercase in Roboto Bold, text size 42 pixels, and set the text to be white (#FFFFFF). (Tomorrow we’ll work on a logo!) Press T to select the Text tool, then click in the frame and type out your app’s name. A wordmark is basically the name of a company or product set in a beautiful way using text only. Let’s create a simple “wordmark” using the Text tool. Margin: 16 (this adds 16 pixels of space at the edges of the Frame).Gutter: 16 (this adds 16 pixels of space between each column).With the Frame selected, simply click the “+” icon in the Inspector under where it says “Layout Grid”. In Figma, it’s super easy to add a column grid. Doing this means that we make positive decisions about spacing and layout-for example, the amount of space we leave between elements and the edge of the screen. It’s important to work using a column grid, even when we’re designing for mobile. We’ve gone for #2F80ED, which is the shade of blue in the bottom-left of Figma’s default color swatches. Click the white square under where it says “Background”, and choose a color. With the new Frame selected, look over to the Inspector on the right of the Figma window. Then let’s set a background color for this screen. Just like we did yesterday, hit F to select the Frame tool, and pick iPhone 8 from the options on the right of the window. (It should show up in the “Recent” tab on the Figma home screen.) ![]() Open up your Figma file, and create the Frame for your app screen.įirst things first-open up the same Figma file you were working on yesterday. Feel free to pick whatever name you like-we’re choosing “filter” for ours. Over the next few days, we’re going to create screen designs for a photo-sharing app. Today, we’re going to be using these commands and more to build the whole first screen of our app! Welcome to the second day of Figma 101! Yesterday we took a look around the interface and checked out a few of Figma’s core functions.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |