Как сделать карту в фигме

5 Figma-плагинов с картами

В подборку мы включили плагины, которые генерируют гибко настраиваемые и векторные карты, где можно менять масштаб, стиль и угол показа, а также редактировать любые элементы карты. Мы также добавили плагин, которые помогает создавать инфографику с использованием карт мира прямо в Figma

Дарья Райт
Ведущий редактор в «Оди»

Mapsicle — вставляет онлайн-карты прямо в макет. Позволяет находить точку через поиск или координаты, настраивать масштаб карты и выбирать стиль

Figmap — вставляет в макет гибко настраиваемую карту

Vector Maps — загружает векторные карты стран и регионов прямо в проект

Placemark — загружает данные и преобразует их в вектор, где можно перемещать и редактировать любой элемент карты

Map Chart — помогает в создании инфографики с использованием карт мира

Mapsicle – карты для дизайна в Figma [Плагин]

В дизайне сайтов вам наверняка рано или поздно потребуется вставить карту, и как правило мы оставляем либо пустое место («Здесь будет карта»), либо делаем скриншот из карт Google или Yandex. И тот и другой вариант не особенно удобны, и, к счастью, есть плагин для вставки карты прямо в проект — Mapsicle.

Плагин формирует карту на основе сервиса mapbox и вставляет ее как изображение.

1. Координаты
2. Высота
3. Размеры карты (фактический размер фонового изображения после вставки)
4. Стиль
5. Наклон (перспектива)
6. Поворот камеры

Из некоторых неудобств: при использовании в России — карта генерируется не на основе Яндекса или Гугла — поэтому финальный результат на сайте так или иначе будет отличаться от представленного в макете.

Как устанавливать плагины: читайте по ссылке.

Как вставить свою карту в Figma?

Как можно вставить гугл-карту в проект в фигма? Есть плагин, в котором вставляешь HTML-код своей карты с своими маркерами — Anima, но стоит 30 баксов в месяц, а я студент и нужно для проекта, есть ли альтернатива плагину Anima?

• Вопрос задан более трёх лет назад
• 6272 просмотра

1 комментарий

Средний 1 комментарий

Rustam Bainazarov @SmthTo Куратор тега HTML

Честно, не знаю, как это можно было не найти, т. к. этот плагин в первых строках Community. Даже без поиска.

Решения вопроса 0
Ответы на вопрос 2

Анастасия Свеженцева @NewWingsAsya
Веб-дизайн, интерфейсы и бренд-айдентика.

Чтобы вставить свою google-карту в Figma можно использовать плагин Map Maker.

1. Выберите прямоугольник в который хотите вставить карту
2. Запустите плагин Map Maker
3. Введите в плагине название города и отрегулируйте Zoom Level карты
4. Нажмите кнопку Make Map

Плагин Figma Mapsicle. Добавление и настройка карт для ваших проектов

Отличный плагин, позволяет найти на карте мира любую точку, даже по координатам. Ты можешь настроить отображение объектов, как с названием улиц, так и без них и тд. Показать вид со спутника, сделать карту в темных тонах, так же можно настроить угол показа самой карты

Разработчик
Chris Arvin

Заходи на телеграмм канал — там еще больше полезного

Полезно: больше не нужно бегать на сторонние сервисы с картами, делать скрины и все такое. На момент релиза работает отлично.