Figma Maps

Preview

Figma Maps

Figma Maps

Map charts present data that link information to specific geographic locations. You can use map charts to display geographical areas, which is useful for contacts and UI search sections.

Map charts tie data to geographic locations — world and regional map components with dot and shape marker styles, used for contact sections, store locators and location-aware search UI.

Maps AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a map component set in Figma. MapWorld: a flat world map in two types — Dots, drawn as a halftone grid of small circles, and Shapes, drawn as simplified continent outlines — in a muted grey on a transparent background so it sits on any surface. Markers: a location pin component with Default, Hover and Active states, a numbered cluster bubble, and a pulsing radius ring for live positions. Region: a highlighted country or state fill variant in the accent colour at three opacity steps to show data intensity. Compose three examples: a contact section with the map on the left and office cards with address, phone and a Get directions button on the right, each card's pin highlighted on the map; a store locator with a search input, a results list and a map with clustered pins; and a dashboard tile with the dots map shaded by region intensity and a legend. Keep the map as a vector so it recolours through variables and scales to any card size.

Figma Maps

Maps

world maps

map interface

maps template

Website examples

Design systems with Figma — 10× faster

Level up your design, build robust systems, websites, and applications that will stay beautiful forever.

UI KIT TRUSTED BY TOP TEAMS AND BRANDS

Design systems with Figma — 10× faster

Level up your design, build robust systems, websites, and applications that will stay beautiful forever.

UI KIT TRUSTED BY TOP TEAMS AND BRANDS

Design in Figma
— 10X faster

Level up your design, build robust systems, websites, and applications that will stay beautiful forever.