How to Use Figma to Design an App

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

1. Navigate to the bottom section of your Figma design canvas and click 'Frame'.
2. Use your mouse cursor to draw the frame anywhere on the canvas.
3. Open the right-side panel and click the 'Properties' menu — it defaults to Frame since the frame is selected.
4. Choose your preferred device model from the available options.
5. Return to the bottom section and click 'Actions'.
6. Search for 'Font Awesome Icons' and select it from the suggested results.
7. Click the 'Icon Name' field, type the name of the icon you want, then select it from the suggestions.
8. Drag the icon to your desired position; repeat these steps to add more icons.
9. Go back to the bottom section and use the provided options to add UI elements such as shapes, texts, and images.
10. Arrange each asset's position one by one and make adjustments to match your preferences.
11. Select assets individually and use the right-side panel to customize Layout, Appearance, Colors, and Visual Effects.
12. Tap the 'Present' button to preview and review your app design.
13. Review the completed app design, make any necessary revisions, then repeat the process for additional screens.