Creating a Mockup in Figma

q To create screens in your mockup, use the Frame tool and select from the available screen types.
w To connect one screen to the next using a button, switch from Design to Prototype mode, click the circled + sign on the button, and drag the arrow to the next screen.
e To use a Component with its Variant buttons in your mockup, drag-and-drop it from the Assets menu, not from the layout window.
r Sample mockup. This app is designed to help Las Vegas convention and show visitors find entertainment after their program is finished for the day.

What is Figma?

Figma is a web-based mockup tool for designing interactive app and web site screens. The interface is similar to Adobe Illustrator's drawing tools. You can make different screens (“Frames”) with shapes and text and navigate among them with buttons. You can share your mockup with a team or link to it on your portfolio site.

Making a Screen (Frame)

  1. Open Figma and use the Frame tool (#) to place a Frame in the window representing the device (e.g., smartphone, computer screen). Select the device from the palette at right. (Figure q)
  2. Use the shape tools to place fields on your app screen mockup, e.g., text, text fields, buttons.

Navigating Among Screens (Frames)

  1. Place a second screen in the window using the Frame tool. (Figure w)
  2. To navigate to the new screen (board), place a button (shape) on the first screen.
  3. In the upper right corner, switch from Design to Prototype mode. When you hover over an object, such as the “button” shape, “+” symbols will appear at the top, bottom and sides of the object. Drag an arrow from one of the + symbols to the second screen.
  4. Select the action that you want to trigger the change (e.g., On Tap, On Clicking, …).
  5. When the button is clicked, the mockup will then change screens in the Preview mode.

Making a Button with Hover and Active Effects

Interactive buttons must be designed off to the side as “Components” with “Variants” representing the Hover and Active states. When placed on a Frame, the variants will be hidden until Preview mode when they are hovered over or clicked. To use the Component in your layout, drag-and-drop from the Assets menu.

  1. To make a button with Hover (mouseover) and Active (click) effects, first draw the default state of the button off to the side.
  2. Convert the shape to a Component using the diamond-shaped Component tool at the top of the frame.
  3. Select the Component and click the “+” or Add Variant tool to duplicate the button. Design the Hover state as you like, e.g., with a different colored background, drop shadow, etc.
  4. Click Add Variant again and design the Active (click) state as you like.
  5. Change from Design to Prototype mode, hover over the first button, click on the “+” circle, and drag a line to the second Variant. Select the trigger as “When Hovering.”
  6. Repeat for the third Variant, selecting the trigger “When Clicking.”
  7. Components will appear in the Assets palette at left under the Local components tab. To use a Component in your mockup, drag-and-drop it from the Assets palette onto one of your Frames (you cannot drag from the main window or the buttons will not work). (Figure e)

Sharing Your Mockup

To share your mockup, click the Share button at upper right and select the Link button. You can then include the link in your portfolio, perhaps connected to a thumbnail of the design. (Figure r)

Reference

YouTube video on making buttons