Hotspot Canvas Detail Integration Block for React

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.

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.

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.

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 render the link they're given with render, with nativeButton={false}.

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.