Quick summary
This demo walks you through the full process of designing a mobile app in Figma, from creating a device frame to adding icons, UI elements, and visual customizations. By the end, you will have a complete, previewable app screen built entirely within the Figma canvas.
Steps
- Navigate to the bottom section of your Figma design canvas and click 'Frame'.
- Use your mouse cursor to draw the frame anywhere on the canvas.
- Open the right-side panel and click the 'Properties' menu — it defaults to Frame since the frame is selected.
- Choose your preferred device model from the available options.
- Return to the bottom section and click 'Actions'.
- Search for 'Font Awesome Icons' and select it from the suggested results.
- Click the 'Icon Name' field, type the name of the icon you want, then select it from the suggestions.
- Drag the icon to your desired position; repeat these steps to add more icons.
- Go back to the bottom section and use the provided options to add UI elements such as shapes, texts, and images.
- Arrange each asset's position one by one and make adjustments to match your preferences.
- Select assets individually and use the right-side panel to customize Layout, Appearance, Colors, and Visual Effects.
- Tap the 'Present' button to preview and review your app design.
- Review the completed app design, make any necessary revisions, then repeat the process for additional screens.
