There’s a group of commands in Figma called “Boolean operations”. Use “Boolean operations” to turn the camera into a single shape Pro tip: you can check the position of any shape relative to another shape by selecting it, holding down Option (Mac) or Alt (PC), and hovering over a second shape. Position it so that it’s at the top-right of the rectangle shape (4 pixels from the top and 4 pixels from the right). Create another circle for the light meterįinally, create another circle, this time 8 pixels by 8 pixels, and set that to have a white fill too. Align the two shapes horizontally and verticallyĬlick and drag a marquee around the two shapes you just made, and then click the “Align Horizontal Centers” and “Align Vertical Centers” buttons at the top of the Inspector. Set it to have a white fill color so that we can see it on top of the rectangle. You can hold down Shift ⇧ while doing this to “constrain” the shape-meaning that that height and width stay the same. Click and drag to create a circle that’s 32 pixels by 32 pixels. Then, press O to select the ellipse (circle/oval) tool. This time, set the corner radius to be 8 pixels. Next, round the corners of the rectangle just like we did on Day 1 when we made our button. If the size isn’t quite right, you can tweak it by changing the size values in the Inspector to the right of the window, or by resizing the rectangle using the resize handles. First, press R, and drag a rectangle 64 pixels by 64 pixels. This is as simple as stacking a couple of circles on top of a rectangle. Inspired by Instagram’s logo, let’s create a little camera logo just using shapes. We’re not going to make the next app screens until tomorrow, but today we’ll use this blank Frame to create our logo and icons in. As we’ll see on Day 5, it’s also crucial when it comes to creating app prototypes.įor today, though, let’s hit F and create a new iPhone 8 frame. Generally it makes sense to keep all of the work for a project in a single file, because it allows us to easily move and duplicate elements between Frames. Just like yesterday, let’s open up the same file in Figma and add today’s work to it. Open up your Figma file, and create a new Frame ![]() Today we’re going to create a logo and some icons for our app, using shapes and the exciting “vector network” functionality of Figma’s Pen tool. Combine shapes using “Boolean operations”.Every platform generates a different set of icons. The supported platforms are PWA, Android, iOS and BlackBerry 10. destĭirectory to save the generated icons. See the material design styleguide for more information. The corner radius percentage of the generated icon. This is true by default for the Android and PWA platform, false otherwise. roundedCornersīoolean indicating if the generated icons should have rounded corners. ![]() 1 means the logo will fill up the entire width (or height) of the icon, 0.5 means it will only fill up half of the icon. backgroundĬolor of the icon background if the icon is transparant. Const mobicon = require ( 'mobicon' ) mobicon ( 'icon.png', ) API mobicon(file, options) file
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |