Frame Thumbnails Setup Integration Block for React

No. The block only requires something to be pasted, and it checks no format: the placeholder says "Paste your token" and never imitates a real token's look. The value lives in the component's state, is never shown after entry beyond the password field's own show and hide control, and is cleared on Start over. Wire the final step to your own server where the token is exchanged and stored safely, and never log it.

They match Figma's scope names: file_content:read reads file contents such as nodes, file_comments:read reads comments on files and file_variables:read reads variables, which Figma offers on Enterprise plans only, as the step says. Figma's personal access tokens are created under Settings and the Security tab of the file browser, are shown once, and let you pick scopes. Change SCOPES to the ones your product really uses.

Each card is a label around a checkbox, so the whole card is the target, with the checkbox named by the frame's name. The drawings are small greyscale wireframes made from CSS boxes, hidden from assistive technology; the name and the "2 of 6 selected" count carry the same information as text. Ticked cards take a foreground ring rather than the primary colour, which stays on the Shine Button. Replace a drawing component and its entry in FRAMES to show your own frames.

The link name is turned into a slug (lower case, runs of other characters become one dash, dashes at the ends removed) and appended to framenote.example/f/. An empty name shows three dots in its place and blocks Finish setup, with a line that says why. The .example domain is reserved for examples, so the address never points at a real site.

The block names Figma in text and ships no Figma logo, colour or wordmark. Below the header, Framenote's own tile and Figma's neutral lettermark tile (Fg in a muted square, joined by a connector) sit in icon slots 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 thumbnails are generic wireframes, not copies of Figma's interface.

Each step's heading takes focus when you move between steps with the buttons or the Steps header, never on load, and a polite status line announces the step ("Step 2 of 3: Choose frames"). Steps you haven't reached are disabled in the header. Continue is disabled until the step has what it needs, and a line beside it says what is missing. Tab moves between the step buttons.

The step titles hide behind the numbers, the thumbnails sit two across and the buttons fill the width, with Back below Continue. The window takes the height of its tallest step, so nothing shifts as you move. The header fades up once on load with a CSS transition; with reduced motion it simply appears.