5 Figma-плагинов с картами
Mapsicle
Figmap — вставляет в макет гибко настраиваемую карту
Figmap
Vector Maps — загружает векторные карты стран и регионов прямо в проект
Vector Maps
Placemark — загружает данные и преобразует их в вектор, где можно перемещать и редактировать любой элемент карты
Placemark
Map Chart — помогает в создании инфографики с использованием карт мира
Map Chart
КАК ВСТАВИТЬ КАРТУ В ФИГМЕ
Для вставки карты в Figma необходимо загрузить любое из расширений, позволяющих производить данную операцию, например, Google Maps или Mapbox. Эти расширения позволяют использовать карты в проекте и настраивать их параметры. Их можно легко найти в Интернете и установить в несколько кликов.
После установки расширения необходимо выбрать нужный слой на макете и открыть панель свойств. Если все было выполнено правильно, должна появиться вкладка с параметрами карты, где можно настройки добавления адресов, масштабирования и т.д.
Чтобы добавить карту на макет, необходимо перетащить ее из расширений в нужное место на экране Figma, где она будет использоваться. Карту можно легко настроить и адаптировать к своим потребностям и требованиям проекта.
Вставка карты в Figma может значительно улучшить визуальный имидж вашего проекта и сделать отображение геоданных в дизайне более точным и наглядным.
Некоторые расширения, такие как Mapbox, могут также позволить добавлять интерактивность на карты, такие как перемещение, увеличение, изменение угла и т.д.
Плагин Figma Mapsicle. Добавление и настройка карт для ваших проектов
Отличный плагин, позволяет найти на карте мира любую точку, даже по координатам. Ты можешь настроить отображение объектов, как с названием улиц, так и без них и тд. Показать вид со спутника, сделать карту в темных тонах, так же можно настроить угол показа самой карты
Разработчик
Chris Arvin
Полезно: больше не нужно бегать на сторонние сервисы с картами, делать скрины и все такое. На момент релиза работает отлично.
Карты в фигме: как сделать за 1 клик с плагином «Map Maker»
В этом обзоре вы познакомитесь с плагином «Map maker», который позволяет генерировать карты в фигме от Google карт и сервиса Mapbox.
Как установить плагин Map Maker для создания карт в Figma
Чтобы установить плагин для создания карт в Figma (Map maker), перейдите по ссылке. Затем нажмите на кнопку «Install» в левом верхнем углу.
Как вставить карту в фигме от Google Maps
Чтобы вставить карту в фигме, создайте фигуру стандартными инструментами Figma. Например прямоугольник или круг. Выделите фигуру.
Активируйте установленный плагин для создания карт. Для этого нажмите вверху и слева на меню, перейдите в раздел «Plagins», затем выберите «Map maker».
В окне плагина в строке «Adress» введите адрес, который хотите показать на карте и нажмите на кнопку «Make map» внизу, чтобы вставить карту в выделенные фигуры.
Выбор типа отображения карты
Внизу надписи «Map type», можно выбрать тип карты, которую хотите использовать в вашем макете. Всего 4 варианта.
- Roadmap — дорожная карта.
- Satellite — карта в виде фото со спутника.
- Hybrid — гибридная карта.
- Terrain — карта местности.
При выборе из выпадающего списка надписи «Roadmap», появиться нарисованная дорожная карта.
Если выбрать Satellite, то отображение будет в виде фото со спутника.
При выборе «Hybrid» будет гибридная карта. Это карта со спутника, где расположены различные отметки.
Terrain — карта местности аналогична «Roadmap» и особых отличий я не заметил.
Как изменить масштаб отображаемой карты в Figma
Чтобы изменить масштаб отображаемой карты в Figma, измените цифру под надписью «Zoom level».
Если поставите цифру «1», то будем видно всю планету.
Если поставите значение «18», то будет видны улицы и дома.
Как поставить метку на карте в Figma
Чтобы поставить метку на карте для нужного адреса в Figma, поставьте напротив надписи «Show marker» галочку. В этом случае появиться красная метка.
Как сделать карту в фигме от сервиса «Mapbox»
Чтобы сделать карту в фигме от сервиса «Mapbox» переключитесь в плагине на нужную вкладку. В этом разделе есть небольшие отличия от гугл карт.
Внизу надписи «Style» можно выбрать стиль карты. Стандартным образом отображается карта «Mapbox streets».
Если выбрать «Mapbox Light», то появится карта в минималистичном стили и сером цвете.
Чтобы карта была в черном цвете выберите пункт «Mapbox Dark». В таком варианте карта выглядит очень стильно.
Если выбрать пункт «Mapbox Outdors», то будет отображаться светлая карта.
Пункт «Mapbox Satelite» показывает карту в виде фотографии со спутника. В этом варианте не отображаются названия улиц.
Чтобы на карте со спутником отображались улицы выберите пункт «Mapbox Satelite Streets».
При изменении цифры под надписью «Bearing», будет изменен поворот карты. Если изменить значение под надписью «Pitch», то будет изменён накло карты.
Заключение
Итак, вы этом видео вы узнали как создавать карты в фигме с помощью плагина «Map maker». Разобрались как вставлять карты от Google Maps и от сервиса «Mapbox».