Карты в фигме
Плагины, Уроки

Карты в фигме: как сделать за 1 клик с плагином «Map Maker»

В этом обзоре вы познакомитесь с плагином «Map maker», который позволяет генерировать карты в фигме от Google карт и сервиса Mapbox.

Как установить плагин Map Maker для создания карт в Figma

Карты в фигме. Установка плагина Map Maker

Чтобы установить плагин для создания карт в Figma (Map maker), перейдите по ссылке. Затем нажмите на кнопку «Install» в левом верхнем углу.

Как вставить карту в фигме от Google Maps

Активация плагина для создания карт в фигме

Чтобы вставить карту в фигме, создайте фигуру стандартными инструментами Figma. Например прямоугольник или круг. Выделите фигуру.

Активация плагина для создания карт в фигме

Активируйте установленный плагин для создания карт. Для этого нажмите вверху и слева на меню, перейдите в раздел «Plagins», затем выберите «Map maker».

Настройки плагина map maker в figma

В окне плагина в строке «Adress» введите адрес, который хотите показать на карте и нажмите на кнопку «Make map» внизу, чтобы вставить карту в выделенные фигуры.

Выбор типа отображения карты

Внизу надписи «Map type», можно выбрать тип карты, которую хотите использовать в вашем макете. Всего 4 варианта.

  • Roadmap — дорожная карта.
  • Satellite — карта в виде фото со спутника.
  • Hybrid — гибридная карта.
  • Terrain — карта местности.

При выборе из выпадающего списка надписи «Roadmap», появиться нарисованная дорожная карта.

Выбор режима отображения карт в фигме

Если выбрать Satellite, то отображение будет в виде фото со спутника.

Изменение режима отображения карты в фигме

При выборе «Hybrid» будет гибридная карта. Это карта со спутника, где расположены различные отметки.

Вариант карты в фигме. Плагин map maker

Terrain — карта местности аналогична «Roadmap» и особых отличий я не заметил.

Как изменить масштаб отображаемой карты в Figma

Чтобы изменить масштаб отображаемой карты в Figma, измените цифру под надписью «Zoom level».

Параметры отображения карты в плагине map maker для figma

Если поставите цифру «1», то будем видно всю планету.

Выбор другой карты в плагине map maker

Если поставите значение «18», то будет видны улицы и дома.

Как поставить метку на карте в Figma

Настройки карты в фигме. Плагин map maker

Чтобы поставить метку на карте для нужного адреса в Figma, поставьте напротив надписи «Show marker» галочку. В этом случае появиться красная метка.

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

Вторая вкладка в плагине map maker

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

Внизу надписи «Style» можно выбрать стиль карты. Стандартным образом отображается карта «Mapbox streets».

Карты в фигме. Плагин map maker.

Если выбрать «Mapbox Light», то появится карта в минималистичном стили и сером цвете.

Темная карта в figma

Чтобы карта была в черном цвете выберите пункт «Mapbox Dark». В таком варианте карта выглядит очень стильно.

Обзор плагина map maker

Если выбрать пункт «Mapbox Outdors», то будет отображаться светлая карта.

Изменение параметров в плагине для создания карт

Пункт «Mapbox Satelite» показывает карту в виде фотографии со спутника. В этом варианте не отображаются названия улиц.

Карта в виде спутника в фигме

Чтобы на карте со спутником отображались улицы выберите пункт «Mapbox Satelite Streets».

Параметры плагина map maker в figma

При изменении цифры под надписью «Bearing», будет изменен поворот карты. Если изменить значение под надписью «Pitch», то будет изменён накло карты.

Заключение

Итак, вы этом видео вы узнали как создавать карты в фигме с помощью плагина «Map maker». Разобрались как вставлять карты от Google Maps и от сервиса «Mapbox».

P.S. Если вы делаете дизайн в Figma, то обязательно получите бонусные материалы по быстрому созданию дизайна Landing Page в Figma, то по этой ссылке.

Автор статьи: Владимир Чернышов