[New Spec Feature] Suggestions to bring product and design closer: design system styles, navigation, diagrams and Figma integrations

I’ve been using Spec to write use cases and product requirements, and I love the idea of bringing product work into Figma, where design already lives. It creates a real chance for a closer exchange between product and design. Here are some suggestions from that experience:

Integrations with Figma

• Something like a split view with the Spec and the prototype in Dev Mode. Let developers open a prototype with its connected Spec side by side. Even better if both stay in sync: as the developer navigates between screens in the prototype, the Spec scrolls to the flow step or rule that describes that screen. This way, devs always see the behavior and the requirements together, without switching tabs or searching for the right section. It would also work the other way around: from a section of the Spec, open the related frame or prototype screen.
• Embed a specific page or frame, not just a whole Figma file. Today I can embed a file, but pointing to the exact frame that matches a flow step would make the Spec much easier to read. Ideally, with the option to pin a version
• Reference values from Annotations in Figma Design (e.g., measurements and properties documented on a frame), so the Spec stays in sync with the design
• Reusable values: define a value once (e.g., a fee or a price) and reference it across the Spec, so when it changes, it updates everywhere. Ideally, this could connect to Figma variables
• Show the frame’s status (e.g., “Ready for dev”) next to the section that describes it

Styling with my design system

• Apply text colors and typography from my own design system
• Map design system styles to Spec’s text levels (e.g., set my “Display Small” style as H1)

Navigation

• An outline/table of contents panel, built from the headings, to jump between sections (similar to Google Docs’ document outline)
• Support for tabs or sub-documents to split long specs (e.g., one tab per use case)
• Allow internal links to any text block, not only headings. Business rules are often written as bold text inside a section, and I’d like to link flow steps directly to them
• Find in document (Ctrl+F). I couldn’t find a way to search the text. If it exists, it’s not easy to discover

Diagrams

• A Mermaid block in the “/” command menu that renders the diagram inline. I know I can create a FigJam file for that, but keeping the diagram inside the Spec would let it live in a single place, next to the flow it describes, and be updated together with the text

Collaboration

• Mention people in the text (@name)

Content blocks

• Callout blocks (note / warning / open question) to highlight points that still need review
• Captions for images. Right now I’m using the alt text as a caption workaround, which isn’t ideal: alt text is meant for screen readers and isn’t visible to everyone reading the Spec

Thanks for building this, it’s a great step toward bringing product and design together!