A weather app with a clear hierarchy. The first screen shows temperature, hourly forecast and five days. The second has UV, wind, humidity and more.

What is included

• A large temperature with condition
• An hourly forecast row
• A five day range bar list
• UV, wind, humidity and feels like tiles
• Sunrise and sunset card

Where to use it

Use it for a weather or outdoor planning app.

Design notes

This weather app screens follows a simple rule: Mobile layouts need comfortable touch targets. The buttons and rows here are at least 44 pixels tall, and the text stays readable on small screens. It includes a large temperature with condition, an hourly forecast row, a five day range bar list, so you can start from a finished layout and change only what you need.

Built for editing

Spacing follows a 4 point scale and layers have clear names, so developers can find what they need. Fonts are free on Google Fonts, and every color can be changed from the fill panel. You also get uv, wind, humidity and feels like tiles and sunrise and sunset card.

How to use it

Copy the component with the copy button and paste it into Figma with Ctrl+V or Cmd+V. The layers keep their auto layout, so you can edit text, colors and spacing. The text uses Plus Jakarta Sans and a few free Google Fonts. Install them first so the text looks the same.

Light version

This listing is the light version. The dark version is listed separately.