Shift ⇧ 2 will zoom to the current selection.But there are some other handy zoom commands available: Those commands will just focus in on the center of your current view. The standard zoom commands are accessed with ⌘ + and ⌘. You’ll probably find yourself wanting to zoom in and out quite a bit in Figma, particularly once we start working with multiple Frames. We can either click and drag in the canvas area, or we can select a pre-set Frame size from the Inspector on the right hand side of the window. There are a couple of ways of creating a Frame. Equally, if you’re used to Sketch, you can also hit A (for “Artboard”). Alternatively, you can click the Frame Tool icon in the Options panel at the top of the window. If you’ve used Sketch or Adobe Illustrator before, it functions in the same way as an Artboard. In Figma, a Frame is essentially a container for other elements. It’s worth getting in the habit of using these shortcuts right from the off, because they’ll significantly speed up your workflow further down the line. Now that you’ve found your way around, let’s start making stuff! Note that we’ll be referring to keyboard shortcuts a lot in these tutorials. Note that Figma gives us separate tabs in the Inspector (Design, Prototype, and Code)-we’ll cover these later in the week. In the image above, we’re seeing options for the Canvas itself. Inspector: The Inspector shows contextual information and settings for whatever object is selected. Canvas: This is where you create and review all your work. Layers: Where every element in the file is listed, organized into Frames and Groups. When an object is selected, contextual options appear here. When no object is selected (as shown above), Figma displays the file name. (We’ll cover all these tools in the next couple of days!) Options: This area shows extra options for whichever tool you have selected. Tools: Here you can quickly access the tools you’re likely to use most often: frames, shapes, text, etc. Start typing in “rectangle” and you’ll quickly find the Rectangle Tool, complete with a handy reminder of its keyboard shortcut (it’s R, by the way). Take a minute to browse around these menus and see what’s there! You can also search for the specific command you need. Here’s an explanation of the interface’s main areas (labeled above): Menu: Unlike regular desktop design apps, Figma’s menus can be found by clicking the hamburger button in the top-left of the screen. The look and feel of the Figma interface is quite minimal, but it belies a set of powerful features.
Click on “New File” and we’ll get started! 2. Once you’ve done that, Figma will open up with a start screen like this. Getting started in Figma is as simple as going to clicking “Sign up”, and entering your details. Create Frames, Rectangles, and Text layers.
FIGMA ADD DESKTOP FRAME HOW TO
Figure out how to control the interface (zooming etc.).Experiment with some of the key functions.and that by the end of it you’ve mastered the basics of Figma and accomplished any personal design goals! ⚽ Today’s learning objectives We want to make sure you’re getting the most out of this course. You’ll be able to share your prototypes with friends, or develop your design further and add it to your portfolio! Before we get startedīefore we get started with today’s lesson, take a sec to work through our quick 1 minute goal setting exercise. We’ll also use Figma’s prototyping functionality to link the screens together, meaning that you can experience how the screens will behave when they’re built as an app. We’ll achieve that by building a set of app screens together. The aim of this course is to introduce all of the key functions in Figma. But more importantly, it means that clients and colleagues can interact more richly with the work, and review the latest version of the file. This in itself saves significant time and inconvenience in a designer’s workflow. In Figma, instead of exporting static images, we can simply share a link to the Figma file for clients and colleagues to open in their browser. When using conventional “offline” apps like Sketch and Photoshop, if designers want to share their work, they typically have to export it to an image file, then send it via email or instant message. It also offers a web API, and it’s free!Īnother big advantage of Figma is that it allows real-time collaboration on the same file.
FIGMA ADD DESKTOP FRAME WINDOWS
Unlike Sketch, which runs as a standalone MacOS app, Figma is entirely browser-based, and therefore works not only on Macs, but also on PCs running Windows or Linux, and even on Chromebooks. Figma is a collaborative interface design tool that’s taking the design world by storm.
0 kommentar(er)
