The task:

create a fully interactive vectorized map of Italy and all its regions.

requirements:

the map needed to be vectorized so it could be easily edited if need be.
it had to work within the constrains of Figma: it must be a component and its assets easily managed.
because it was part of a larger interaction in which users would find their products based on location, the design had to be simple.
Which meant:
- Prototype should allow for tooltips and micro-interactions that would help the user and enhance the experience.

the process

1- first step was to outline and draw the shape using Adobe Illustrator. This step was important as I wanted each individual region of Italy to be its own component, that way, I would be able to add the variants needed for a prototype later on.

2- next, after all the assets had been imported into Figma, and turned into components, the variables “outline”, “default”, “hover”, “selected” and “disabled” were created and individually prototyped to create the “hover” and “selected” interactions.

3- I created the tooltip components. These would be deployed upon hovering on the “location” vector in the map. I worked about three different iterations of this component until settling for this simple