Referencing figma vectors for a heatmap

v0
1

Hi, I’m creating a web application using next.js, react and typescript. (No code by myself)

I want to incorporate a heat map for the human body, see figma: https://www.figma.com/design/ja9Zdn4llIhbeqLYyMqEzP/Human-Anatomy-Component-System--Community-?node-id=7-7568&p=f&t=0TU5KvDrKThKSZL3-0

I want it to show the front view and the back view of the outer muscles by default, then shade particular vectors (which can be seen in figma) when information is logged into my web app. What’s the easiest way to structure this? Any guides I can watch? When I try my own prompts, it’s so finnicky and I can’t get adding shades to areas consistent.

Screenshot of the body I want to display by default.

Body example
Body example999×881 71.1 KB

2

Hi, Bran! Welcome to the Vercel Community :waving_hand:

This sounds like a fun project! Thanks for sharing :smiley:

We don’t have a guide for this specific usecase, but maybe you could try prompting v0 with something like:

Create a complete Next.js webpage that displays a muscle heatmap.

Layout:

  • A centered heading: “Muscle Heatmap”
  • A responsive container displaying the front and back views of a human body side by side.

Functionality:

  • Use inline SVG illustrations for both front and back views, with each muscle group represented as a distinct path or group.
  • Assign unique id attributes to each muscle group (e.g., biceps-left, quads-right, trapezius).
  • Introduce a hardcoded array named highlightedMuscles containing strings corresponding to muscle group IDs (e.g., ["biceps-left", "quads-right"]).
  • Highlight the specified muscle groups in red with 70% opacity.

Styling:

  • Utilize Tailwind CSS for layout and styling.
  • Ensure the SVGs are responsive and maintain clarity across devices.

Additional Notes:

  • Include comments in the code to guide beginners on where to replace placeholder SVGs with their own exported from Figma.
  • Provide instructions on how to modify the highlightedMuscles array to highlight different muscle groups.

Could you give that a go?

I also recommend checking out @floguo’s v0 session for inspiration on prompting →