← Back to Blog Workflow

How to Import Real Map Data into Illustrator or Figma

By Drawrix Team · April 9, 2026 · 5 min read

If you have ever traced over a Google Maps screenshot to get building outlines for a presentation board, you already know how painful that is. The lines never quite match, the scale is wrong, and the moment your professor or client asks you to shift the site boundary two blocks north, you get to start over.

There is a better way. OpenStreetMap has actual vector geometry for most of the world — buildings, roads, parks, water — and you can pull it directly into Illustrator or Figma as editable paths. No tracing. No guessing at property lines. Here is how.

Why SVG and Not a Raster Export

A PNG or JPEG screenshot gives you pixels. You can place it in your canvas, sure, but you cannot select individual buildings, change road colors, or hide a layer to isolate green spaces. The file is frozen.

An SVG gives you the actual shapes. Every building is a closed path. Every road is a stroke you can restyle. The layers are already separated, so toggling visibility or changing a fill color takes one click instead of an afternoon of masking.

This matters more than it sounds. Most site analysis boards go through three or four revisions before they are done, and each revision is trivial with vectors but miserable with rasters.

The Workflow: Map to Canvas in Three Steps

1 Get the SVG

Open Drawrix, navigate to your site, and draw a selection rectangle around the area you need. Pick Site Analysis (SVG) as the format. Hit generate. You will get a ZIP with an SVG file inside that has separate groups for buildings, roads, green spaces, and water.

The whole thing takes about 30 seconds for a typical neighborhood-scale area. No QGIS, no Overpass queries, no command line.

2 Open it in your tool

Illustrator: File → Open, pick the SVG. The layer panel will show each map layer as a separate group. You can rename them, lock what you do not need, and start working immediately.

Figma: Drag the SVG file onto your canvas, or use File → Place image. Figma will import each group as a frame. Right-click → Ungroup if you need to access individual shapes. Tip: place the SVG inside a frame set to your board dimensions so it scales correctly.

Inkscape: File → Open. It just works — Inkscape is SVG-native, so you get full layer access with zero import weirdness.

3 Style it

This is where it gets fun. The default colors from Drawrix are functional but neutral. For your final board you will probably want to:

Set buildings to a flat matte fill (light gray or your brand palette)
Reduce road stroke weight and switch to a muted tone
Bump green spaces to a soft wash — something like #d4edda or similar
Add your site boundary, annotations, north arrow, and scale bar on top

Because every element is a real vector path, the whole process is selecting and changing fills. No redrawing.

Tip: If you are working in Illustrator, use Select → Same → Fill Color to grab all buildings at once and restyle them in one shot. In Figma, select one building, then use "Select all with same fill" from the right-click menu.

What About Scale?

The SVG output from Drawrix includes coordinate metadata and is generated at the correct geographic proportions. For presentation boards this is usually enough — you are communicating context, not doing survey-grade measurement.

If you need precise CAD-scale output (1:500, 1:1000), that is what the DXF export is for. SVG is the right choice when the goal is a clean visual, not a construction document.

Common Pitfalls

Selecting too large an area. A full city looks impressive on the map but turns into a laggy mess with thousands of building paths in Illustrator. Keep your selection to the actual context area you need — usually a few blocks around your site.
Ungrouping everything at once in Figma. Ungroup only the layer you are actively editing. Otherwise you end up with hundreds of loose shapes and no way to re-select "all roads" easily.
Forgetting to embed fonts. If you add text labels in Illustrator, outline them before sending the file to someone else, or they will see fallback fonts.

Real Talk: When This Does Not Work

OpenStreetMap coverage is not perfect everywhere. Dense urban areas in Europe, North America, and East Asia are usually excellent. Smaller cities in parts of Africa or Central Asia may have incomplete building data. You can check coverage beforehand by looking at openstreetmap.org and zooming into your site — if you see building shapes there, they will show up in your export.

Also, OSM does not include private property boundaries or parcel lines. For that you still need your local cadastral data source.

Who Actually Uses This

Mostly architecture students doing site analysis boards, urban designers working on competition entries, and landscape architects who need context maps for early-stage presentations. The overlap is anyone who needs "a nice map of this area" and does not want to spend hours getting it.

We have seen people pull an SVG, restyle it in 15 minutes, and drop it into an InDesign layout for a final review board. That same task used to take half a day of tracing and cleanup.

Try it on your own site

Select any area on the map, export as SVG, and open it in your design tool. Free for areas up to 1 km².

Open Drawrix