Explore ideas

Canvas (画布)

The canvas is the backdrop for all of your designs - it’s where you’ll add all the frames, shapes, text, and images.

  • In the right sidebar, the canvas color can be changed in the Background section.
  • In the right sidebar, the canvas can be toggled off in the Background section.

Frames (框架)

Frames are the containers you place your shape, text, and image layers in. You can think of each frame in the canvas as a single screen of your design.

  1. The toolbar contains the tools you need for creating layers. Select the frame tool in the toolbar.
  2. Frame presets (框架预设), in the sidebar on the right, let us create frames with specific dimensions.
  3. The sidebar on the left, everything that we add to the canvas will also be added to the layers panel.
  4. Move around the canvas: To explore more of the the canvas, We can also press and hold the space bar and click and drag to pan.

Create shapes

Now you’re ready to add some layers to your frame! As this is a wireframe, you can use shapes in the toolbar, like rectangles and ellipses, to represent more complex aspects of the design.

Just like frames, every layer in the canvas has dimensions. You can adjust a layer’s position and dimensions in a few ways.

Shapes

Rectangle
  1. Press R to select the rectangle tool.
  2. Hold down Shift again to constrain the rectangle’s proportions and create a perfect square.
  3. Click and drag to draw a rectangle in the canvas.
Ellipse

Select the ellipse tool in the menu and click to start drawing the ellipse. Hold down Shift as we drag to create a perfect circle.

Position

Drag or set the X and Y fields to adjust position.

Nudge values: If you want to make small adjustments to a layer’s position, you can use our arrow keys to nudge objects on the canvas.

Dimensions

Drag or set the w and H fields to adjust dimensions in the right sidebar.

Click into the w and H fields, use the arrow keys to nudge the dimensions.

Parents and children

  • Parents are layers that contain other layers. Think frames, components, and groups.
  • Children are layers within a parent. Think of the text and shape layers within a component or group.
  • Siblings are layers within the same parent. Layers need to be at the same level in the layer hierarchy to be siblings.

Layer properties

Fill (填充)

New shape layers have a gray fill by default, but we can apply another color or paint to these layers. Paints can be solid colors or gradients, as well as images or animated gifs.

You can even add more than one paint to a layer and use blend modes to create unique styles or effects.

Select the layer(s) you want to add a fill to. In the Fill section of the right sidebar, click the plus icon to add fills. Click on the fill swatch to open the color picker, select colors from the palette, or apply other fills, like gradients, images, and even animated GIFs.

Solid colors (纯色)
Gradients (渐变)
Images (图像)
Videos (视频)

Stroke (描边)

Select the layer(s) you want to add a stroke to. In the Stroke section of the right sidebar, click the plus icon under Stroke to add a stroke to the layer. Adjust the color of the stroke.

Effect (效果)

Align

With the layers already selected, click align left, align horizontal centers, align right, align top, align horizontal centers, align bottom in the right sidebar.

Align layer to their frames: select single layer, and click align method in the right sidebar.

Align layers to each other: select layers, and click align method in the right sidebar.

Text

Press T to select the text tool, or select the text tool in the toolbar, click to create a text layer. Type in some text as placeholder text.

Copy and duplicate layers

There are a few ways to copy layers:

  • Hold down the ⌥ Option (MacOS or Alt (Windows) key, click on the square layer, and drag to create a copy.
  • Press ⌘ Command-D (Mac) or Ctrl + D (Windows) to duplicate the layer and create the third square.

Groups and frames

If we want to make sure these objects stay together, there are two ways we can group or organize layers: groups and frames.

While frames and groups look similar in the layers panel, they have different functions.

Groups

Use the shortcut ⌘ Command-G or Ctrl + G to group a selection of layers.

Groups allow us to move around a collection of layers, without having to select each layer individually. Groups don’t have properties of the own, only the layers inside the group do.

Use groups to organize your layers or apply properties to layers in bulk.

Frames

Use the shortcut ⌘ Command ⌥ Option G (Mac) or Ctrl + Alt + G to frame your current selection.

Frames on the other hand, can have their own dimensions and properties.

You can also nest frames within other frames, so you can use frames for design elements like buttons, nav bars or newsfeed posts.

We can convert a group to a frame in the right sidebar. Click Group in the position section and select Frame from the menu.

Get components

Components are elements you can reuse across your designs. They help to create and manage consistent designs across projects. They can be basic UI elements like buttons or icons, or more elaborate compositions, like toolbars and menus.

Libraries are collections of components and styles. You can use libraries in Figma to create, share, and use components across your files.

Duplicate Community files

The Figma Community is a space where creators can share resources in the form of design files and plugins. We can look for a component library to use in our wireframes. Duplicate this wireframe UI kit to add it to your drafts.

We can copy components from the Community file in our drafts and paste them in our wireframe file.

Professional teams

If you’re in a Professional team, you can publish the file as a library to share styles and components from this file with your team.

Components can only be published in a team, so you need to move the file to a project in your team before publishing.

  1. Open the file in the editor.
  2. Click Drafts in the toolbar to change where the file lives.
  3. Click file name in the toolbar and select Publish styles and components.
  4. Enter a description for the library and press Publish to share it with your team.

You can now make the library available in your wireframe file:

  1. Open the original wireframe file.
  2. Select the Assets panel of the left sidebar.
  3. Click to open the libraries modal.
  4. Toggle the switch to enable the library in the current file.

Use components

  1. Click the Resources icon in the toolbar to open the assets panel.
  2. Click on the component in the assets panel and drag it into the canvas.
  3. Position this status bar near the top of frame and release to place.
  4. Align to the top and left.
  5. Let’s repeat the process for the FAB and place it in the bottom and right of the frame.

If you make a change to the main component, Figma will also apply those changes to any instances. This saves you having to manually update every instance, when you want to change properties of your component.

Constraints

Our eventual application will need to adapt to different screen sizes. We can make sure they respond to different frame sizes using constraints.

At the moment, our constraints are set to top and left by default. We want the status bar to take up the full width of our frame.

  1. Keep the vertical constraints at Top and set our horizontal constraints to Left and Right.
  2. Set the constraints for the FAB to Bottom and Right.
  3. Now when we resize our frame, our components will respond according to their constraints.

Explore iterations

Share designs for feedback
  1. Click the Share button in the toolbar.
  2. Click Copy link in the share modal.
  3. Paste the link in our team channel.

Create designs

Build prototypes

Prepare for handoff

Reference

Figma Help Center

Figma Tutorials

Get started with Figma

Figma design

Figma Best Practices

Figma community

Figma 101