Mapsicle – карты для дизайна в Figma [Плагин]
В дизайне сайтов вам наверняка рано или поздно потребуется вставить карту, и как правило мы оставляем либо пустое место («Здесь будет карта»), либо делаем скриншот из карт Google или Yandex. И тот и другой вариант не особенно удобны, и, к счастью, есть плагин для вставки карты прямо в проект — Mapsicle.
Плагин формирует карту на основе сервиса mapbox и вставляет ее как изображение.
- Координаты
- Высота
- Размеры карты (фактический размер фонового изображения после вставки)
- Стиль
- Наклон (перспектива)
- Поворот камеры
Из некоторых неудобств: при использовании в России — карта генерируется не на основе Яндекса или Гугла — поэтому финальный результат на сайте так или иначе будет отличаться от представленного в макете.
Как устанавливать плагины: читайте по ссылке.
Как добавить карту в Figma?
Добавление карты в документ Figma — это отличный способ добавить контекст и визуальный интерес к вашим проектам. Существует несколько различных способов сделать это, в зависимости от типа карты, которую вы хотите использовать.
Если вы хотите использовать карту Google, самый простой способ — использовать изображение. Просто зайдите на Google Maps, найдите место, которое вы хотите показать, и сделайте скриншот. Затем вы можете загрузить это изображение в Figma и добавить его в свой дизайн.
Если вы хотите использовать более подробную карту, вы можете воспользоваться плагином Mapbox. С помощью Mapbox вы можете создавать пользовательские карты с различными стилями и слоями данных.
Чтобы использовать Mapbox в Figma, сначала создайте учетную запись на их сайте. После этого перейдите на вкладку «Plugins» в Figma, найдите «Mapbox», а затем установите плагин.
После установки плагина вернитесь к проекту карты и перейдите на вкладку «Mapbox». Здесь вы можете выбрать желаемый стиль карты и добавить различные слои данных. Вы также можете изменить цвет карты и добавить метки и маркеры.
Добавление карты в Figma — это отличный способ добавить контекст и визуальный интерес к вашим проектам. Независимо от того, используете ли вы карту Google или более подробную карту от Mapbox, это легко сделать, и это может действительно выделить ваши проекты.
**Как добавить карту в Figma?
Существует несколько различных способов добавления карты в документ Figma, в зависимости от типа карты, которую вы хотите использовать. Если вы хотите использовать карту Google, самый простой способ — использовать изображение.
Просто зайдите на Google Maps, найдите место, которое вы хотите показать в своем проекте, а затем сделайте скриншот. Затем вы можете загрузить это изображение в Figma и добавить его в качестве актива в файл проекта.
Если вы хотите использовать более подробную карту, вы можете воспользоваться плагином Mapbox. Чтобы использовать Mapbox в Figma, сначала создайте аккаунт на их сайте. После этого вернитесь в Figma, перейдите на вкладку «Plugins», найдите «Mapbox», а затем установите плагин.
Когда плагин будет установлен, вернитесь в файл проекта карты и нажмите на вкладку «Mapbox», которая теперь должна быть видна в верхней части экрана. Здесь вы можете выбрать желаемый стиль карты, а также добавить различные слои данных. Здесь же можно изменить цвет карты, а также добавить метки и маркеры.
Чтобы добавить контекст и визуальный интерес к вашим проектам. Используете ли вы карту Google или более подробную карту от Mapbox , это легко делается и может действительно выделить ваш дизайн.
ПРОСТОЙ СОВЕТ: При добавлении карты в Figma обязательно используйте онлайн-поисковик, чтобы найти нужную карту. После того как карта найдена, сохраните ее на своем компьютере. Затем откройте Figma и выберите меню «Файл». Затем выберите «Импорт» и выберите файл, который вы только что сохранили. Наконец, нажмите «Открыть», и карта будет добавлена в ваш проект.
5 Figma-плагинов с картами
В подборку мы включили плагины, которые генерируют гибко настраиваемые и векторные карты, где можно менять масштаб, стиль и угол показа, а также редактировать любые элементы карты. Мы также добавили плагин, которые помогает создавать инфографику с использованием карт мира прямо в Figma
Дарья Райт
Ведущий редактор в «Оди»
Mapsicle — вставляет онлайн-карты прямо в макет. Позволяет находить точку через поиск или координаты, настраивать масштаб карты и выбирать стиль
Figmap — вставляет в макет гибко настраиваемую карту
Vector Maps — загружает векторные карты стран и регионов прямо в проект
Placemark — загружает данные и преобразует их в вектор, где можно перемещать и редактировать любой элемент карты
Map Chart — помогает в создании инфографики с использованием карт мира
Плагин Figma Mapsicle. Добавление и настройка карт для ваших проектов
Отличный плагин, позволяет найти на карте мира любую точку, даже по координатам. Ты можешь настроить отображение объектов, как с названием улиц, так и без них и тд. Показать вид со спутника, сделать карту в темных тонах, так же можно настроить угол показа самой карты
Разработчик
Chris Arvin
Заходи на телеграмм канал — там еще больше полезного
Полезно: больше не нужно бегать на сторонние сервисы с картами, делать скрины и все такое. На момент релиза работает отлично.