figma-plugin

KO | EN

gitlite — search

#javascript #ai #typescript #go #machine-learning #deep-learning #linux #macos #nodejs #awesome #kubernetes #mcp #ios #openai

(★ 84)

Create maps with Figma

figma-plugin Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# figma-plugin

![Figma plugin preview](https://raw.githubusercontent.com/placemark/figma-plugin/main/.media/splash.png)

Make maps in [Figma](https://www.figma.com/) using [OpenStreetMap](https://www.openstreetmap.org/)
data. This plugin directly transforms live OpenStreetMap into a vector map in Figma.
It's similar in spirit, technically, to the renderer in [iD](https://github.com/openstreetmap/iD),
but much simpler.

|                                   | **placemark** | **mapbox-based plugins**         |
|-----------------------------------|---------------|----------------------------------|
| edit map styles                   | in figma      | in mapbox studio                 |
| scales supported                  | local only    | all scales, global to local      |
| street labeling                   | not yet       | yes                              |
| output                            | vector        | raster                           |
| unlimited printing & reproduction | yes           | no (mapbox tos has requirements) |
| api key required                  | no            | yes                              |

## Notes

- Trying to create a global or city-scale map will fail. It's a lot of data and this
  plugin uses and generates raw data.
- Rendering maps is dependent on the [Postpass](https://wiki.openstreetmap.org/wiki/Postpass) API
  run by [Geofabrik](https://postpass.geofabrik.de/). This service might go down occasionally!

## Development

The `build` script will continuously build and update this plugin.

You can use this plugin locally by going
to Plugins → Development → Import plugin from manifest…

## Usage

Create an empty frame in Figma. With it selected, start the Placemark plugin.
Select an area, click **Render**.

figma-plugin

figma-plugin Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

figma-plugin

figma-plugin Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README