Figma Prototype Block
The Figma Prototype block lets you embed a Figma prototype or design mockup directly inside a narrative. Instead of linking readers to an external Figma file, you can display the prototype inline so they can interact with it without leaving ArchRepo.
This is particularly useful in UI component specifications, user journey narratives, and feature designs where the visual prototype is central to the specification.
Inserting a Figma Prototype Block
- In the narrative editor, click where you want the prototype to appear.
- Type
/to open the slash command menu. - Type
figma(orprototype,mockup,design,wireframe) and select Figma Prototype from the list. - An empty Figma Prototype block is inserted at that position.
Adding the Figma URL
Once the block is inserted, enter edit mode and paste your Figma URL into the URL field inside the block.
ArchRepo accepts both standard Figma file URLs and prototype share links. The URL is automatically converted to an embed format.
Example Figma URL formats accepted:
https://www.figma.com/file/...https://www.figma.com/proto/...https://www.figma.com/design/...
Your Figma prototype must be shared publicly or set to “Anyone with the link can view” for the embed to display correctly. Private Figma files will show a permission error in the preview.
Interacting with the Embed
Once the URL is saved, the prototype is embedded as an interactive iframe. Readers can:
- Navigate through prototype flows by clicking on interactive areas
- Scroll or zoom within the prototype
- View the design at the default dimensions set in the block
The default dimensions are 800 × 600 pixels. These can be adjusted in edit mode using the width and height fields.
Tips
- Use Figma blocks in UI component and Application narratives to give readers a clickable prototype alongside the written specification.
- Set the Figma prototype to start at the most relevant frame for the item being documented — not necessarily the first frame of the file.
- If the prototype changes in Figma, the embedded block automatically shows the latest version the next time the page is loaded.
- For static wireframe images (rather than interactive prototypes), consider using an Image Block instead.