Каким образом можно выделить и обозначить определенные части изображения?

Для выделения определенных частей изображения в Figma можно использовать различные инструменты, такие как маски, растровые или векторные формы, а также различные эффекты (например, тень или обводка). Например, можно наложить полупрозрачную маску на изображение и вырезать нужную область, или создать векторную форму поверх изображения и заполнить ее нужным цветом.

Чтобы реализовать вывод информации на карте в Figma в зависимости от области, по которой наведен курсор, можно использовать интерактивные прототипы. Для этого нужно создать различные состояния для каждой области, которые будут меняться при наведении курсора на соответствующую область. Например, можно создать состояние, в котором выделенная область окрашена в голубой цвет и выводится соответствующая информация. После этого нужно связать эти состояния с событием наведения курсора на область и установить соответствующие переходы.

Таким образом, используя возможности Figma для создания интерактивных прототипов, можно легко реализовать вывод информации на карте в зависимости от выделенной области.

Экспортируй элементы в SVG, каждую область отдельно, судя по скрину, это позволяет тебе сделать. Вывести все области поочередно в контейнере и позиционировать так, что бы получилась карта: 
 
<div class="map-conteiner">
  <div class="map-item">
  <div class="map-item">
  <div class="map-item">
  <div class="map-item">
  <div class="map-item">
  <div class="map-item">
</div>
 
 
 Выведи элементы через псевдоклассы ::before или ::аfter с помощью mask-image при таком выводе svg цвет меняется за счет background-color. Потом через hover меняй цвет за счет background-color, плавности даст transition + Для карты еще можно добавить небольшое увеличение этой области с transform scale. Будет плавно меняться цвет и увеличение небольшое при hover. 
 
 Пример мой записи для псевдокласса: 
 
.you-class::before {
content: '';
display: block;
position: absolute;
width: 15px;
height: 15px;
top: 0px;
left: 0px;
background-color: blue;
-webkit-mask-image: url('/image/map-item.svg');
mask-image: url('/image/map-item.svg');
transition: 0.3s;
}
.you-class:hover::before {
    background-color: #E6372A;
    transform: scale(1.1)
}
 
 
 Далее, вывод информации внизу, тут используй JS, самое просто найти условие Jquery показать/скрыть контент при наведении курсора, таких пример масса, к примеру: 
 
$(document).ready(function(){
$('#block_1').mouseover(function(e){
$('#block_2').show();
});
$('#block_1').mouseout(function(e){
$('#block_2').hide();
});
});