shadcn.io is not affiliated with official shadcn/ui
Hotspot Canvas Detail Integration Block for Vue
An integration detail section for a design-docs tool connecting to Figma: a framed canvas sketch at the start whose frames, comment pin and variables panel light up as you point at the three read-only scopes, with three steps and Connect Figma.
Installation
Overview
An integration detail section for Vue with Ark UI, written for Framenote, a fictional tool that keeps design docs in step with a Figma file, and its Figma connection. It is a reverse split: the copy comes first in the markup, and from lg up the framed canvas sits at the start behind a divider that runs from the top rule to the block's foot. The canvas is a greyscale sketch of a Figma file: three named frames (Login, Dashboard, Settings) with wireframes, a numbered comment pin with its bubble, and a variables panel listing a few tokens. At the end, a header names both products ("Framenote for Figma") with one sentence; the three read-only scopes the connection asks for (file_content:read, file_comments:read, file_variables:read) are real buttons, each with a Read badge and a reason, and pointing at, focusing or pressing one lights the part of the canvas it reaches: the frames, the pin and bubble, or the variables panel. Three steps sit in a line under them, then the mark pair (Framenote's own tile and Figma's neutral lettermark tile, joined by a connector) above the Connect Figma Shine Button and a View docs link. On a phone everything stacks in reading order, canvas first. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides, Badge, Button and Shine Button, with CSS transitions for the highlight and the entrance and your theme's tokens for every colour. Figma is named in text only: no Figma logo, colour or wordmark ships with the block. The product, the sketch and its text are example data, and nothing connects from the block itself.
FAQ
How do the scope buttons light the canvas?
Each scope is a button. Pointing at it, focusing it with the keyboard or pressing it (the way to do it on a touch screen) stores which part it reaches (content, comments or variables), and the canvas figure carries that as a data-lit attribute. The parts of the drawing change from a hairline to a foreground ring through CSS that reads that attribute, so no per-part script runs. The pressed scope is marked aria-pressed and tinted with an inset bar, and the first scope is lit from the start. The drawing is hidden from assistive technology; the scope list carries the same facts as text.
Are those the real Figma scopes?
Yes. file_content:read reads file contents such as nodes, file_comments:read reads comments on files and file_variables:read reads variables in files. Figma offers the variables scope, and the Variables REST API behind it, on Enterprise plans only, and the row says so. If your product needs less, delete a row; if it writes, add the matching write scope and mark it Write. Keep the list identical to what your token or OAuth app requests.
Can I show Figma's logo?
The block names Figma in text, the way any integration page says what it works with ("Framenote for Figma", "Connect Figma"), and ships no Figma logo, colour or wordmark. Figma's tile is a neutral lettermark, Fg in a muted square, in an icon slot that a code comment marks: drop in the official mark only if you have the rights to use it, under the owner's brand guidelines, and never redraw it. The sketch of a file is greyscale and generic, not a copy of Figma's interface.
Where should Connect Figma go?
Both buttons are links (href="#"). Point Connect Figma at your OAuth authorization address and View docs at your setup guide. Nothing connects, signs in or sends anything from the block itself. Connect Figma is the block's one primary action; View docs is an outline button.
Both buttons take asChild with the link inside, so it can be your router's link.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
Below lg the divider gives way to a rule above the scopes, and the canvas comes first, with the Settings frame and the comment bubble left out so the other two stay legible. In a right-to-left layout the split, the pin and the panel flip, while scopes keep their left-to-right order. The highlight is a short transition that is off with reduced motion, and the header and canvas fade up once on load; with reduced motion they simply appear.