6 Easy Ways To Use Figma

If you’d rather download a desktop app for Windows or macOS, you can get it from https://www. figma. com/downloads.

If you haven’t already signed up for Figma, you can click Sign up at the top-right to create your free account now.

Once you create a team, you’ll be asked to invite other collaborators to work on a project with you. If you have the free starter version of Figma, you can create one project with up to three interface designs per project. [1] X Research source With Figma Pro, you can create unlimited projects for each team with unlimited designs in each project.

All projects belonging to a team appear below the team’s name in the left panel. You can also select an existing project to work on it by clicking its name in the left panel.

When you want to work on this design in the future, you can do so by selecting the team in the file browser, clicking the project’s name, and then clicking the name of the design. You can return to the file browser at any time by clicking the “F” menu at the top-left corner of Figma and selecting Back to files.

If you find a template you want to use, click Duplicate at the top-right to open a copy in your Figma project. You can then click the drop-down menu next to the design’s name and select Rename to give it a new name.

You can also open the Frames menu by pressing F on the keyboard.

You can also draw your own frame by clicking and dragging the mouse at the desired location. To create a frame around an existing object, such as an image, press Option + Command + G (Mac) or Ctrl + Alt + G (Windows).

You can change the preset size for a frame by clicking the current size and selecting something else. To change the size of a frame, just click it and drag its corners to the desired size. Alternatively, you can manually enter a new size into the “W” and “H” areas on the Design panel.

The largest frame is called the top-level frame, and any frame inside the top-level frame is called a nested frame. The objects you place into a frame later (such as text or images) are called child objects.

If you want the frame to automatically resize itself to shrink or grow to fit the child objects you place inside of it, select the frame by clicking it, and then click the icon of 4 arrows in the “Frame” section of the Design panel.

Click Layers at the top of the left toolbar to view all layers. All top-level frames are prefaced by hashtag symbols on the Layers panel. Nested frames are prefaced with equals symbols. Double-click any frame on the Layers panel to make its name editable. Type a new name and press Enter or Return.

Copy an image from another app or file and paste it into Figma. Click the Shapes menu (the square) at the top-left, select Images, choose one or more images, and then click Open. If you selected multiple images, click Place all when prompted. Otherwise, just click the place you want to insert the image. Copy an image from another place in Figma and paste it into the desired location.

If you selected multiple images, click Place all when prompted. Otherwise, just click the place you want to insert the image.

Click the Layers panel on the left and select the frame or shape you want to fill. On the Design panel on the right, click the current Fill color to open the color wheel. [3] X Research source Click the drop-down menu at the top-left corner of the color wheel and select Image. Hover your mouse over the placeholder image in the smaller window and click Choose image. Select an image and click Open.

To modify the color and contrast of the image, use the provided sliders. To fit the image to the size of its parent frame, click the drop-down menu that says “Fill” and change it to Fit. If you’d rather crop the image, click the menu that says “Fill” and select Crop. Drag the blue edges to surround the part of the image you want to keep, and then press Enter or Return. To resize an image, drag any of the bounding boxes on its corners until the image is the desired size. Use the Stroke and Effects panels on the Design tab to stylize the image. To rotate the image, hover the mouse cursor just outside of any of the 4 bounding boxes until it turns into a curved line, and then click and drag in the desired direction.

Don’t forget to rename the layer in the Layers panel to something relevant when adding any objects, including drawings and shapes.

If you want the shape to have equal proportions, hold down the Shift key as you draw it. Select the shape to modify it using the options on the design panel, including Fill (to change its color) and Stroke (surround it by a line/border).

To create a new text layer with a text box that automatically expands as you add more text, click once at the desired location, and start typing. To draw a pre-sized text box, click and drag the mouse to draw the box, and then start typing inside of it. There are many ways to edit text in Figma. Select the text with your mouse and use the Text area of the Design panel on the right to adjust its font face and size. Use the Fill area of the Design panel to change the color of text.

Select a text layer that has properties you want to reuse. Click the Style icon, which is the 4 dots at the top of the Text area of the right panel. Click +. Name the style and click Create style.

Select an object that has the color or effect you want to turn into a style. Click the 4 dots at the top-right corner of “Fill” or “Effects” in the right panel. Click +. Give the style a name and click Create style.

Select the layer(s) you want to want to apply the style to. In the right panel, click the 4 dots at the top-right corner of the type of style you want to apply (e. g. , Text, Fill, or Effects). [5] X Research source Select the style.

Click an empty spot on the canvas to ensure nothing is selected. Click the down arrow next to the file’s name at the top of Figma. Click Publish styles and components and follow the on-screen instructions.

To select multiple layers, hold down the Shift key as you click each layer you want in your component. If your team is on the Pro or Enterprise plan, you can also publish your components to the team library so you can use them in other files. [7] X Research source

You can click the small arrow next to the name of the component to view and edit the layers individually. To rename the component, double-click its current name, type a new name, and then press Return.

Click the Assets panel in the left toolbar—it’s the tab next to the Layers tab. You’ll see your component(s) here. Click and drag the name of the component to the desired place on your canvas. This creates an instance. You can now edit the instance separately without affecting the main component.

You can remove the starting point by right-clicking the frame’s name and select Remove starting point.

You can select an animation from the menu to choose an animation as a transition between the two screens.