Dev Tools
FigmaLink
Figma deep-link button(s) for a component demo page. Reads URLs from the figmaLinks registry by component slug. A component documented for one platform renders a single 'View in Figma' pill; one documented for both Suite and eShop renders one labelled pill per platform. Empty registry entries render nothing, so no broken links ship. Placed in the PageHeader action slot.
Import
import FigmaLink from '../../components/utility/FigmaLink.astro';Usage
<PageHeader title="Badge" badge="Design System" description="...">
<FigmaLink slot="action" component="badge" />
</PageHeader>
Pass the component slug (the demo page file name, e.g. badge,
card-input). The component looks the URLs up in
src/lib/figmaLinks.ts. To get a URL: open the component in Figma,
right-click → Copy link to selection, and paste it into the registry.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
component | string | No | Slug key into the figmaLinks registry (e.g. badge). |
suite | string | No | Explicit Suite URL — overrides the registry lookup. |
eshop | string | No | Explicit eShop URL — overrides the registry lookup. |
Preview — single platform
One documented platform → a single "View in Figma" pill.
Preview — both platforms
Both platforms → one labelled pill each (Suite, eShop).