Dev Tools
FigmaLink
Figma deep-link button for a component demo page — an eShop secondary Button wrapped in a link. Reads URLs from the figmaLinks registry by component slug. Sits in the Playground section heading (right, bottom-aligned). A single-platform component renders one 'View in Figma' button; on a tabbed page, pass platform="suite" / "eshop" inside each tab section so each tab shows its own platform's link. Empty registry entries render nothing, so no broken links ship.
Import
import FigmaLink from '../../components/utility/FigmaLink.astro';Usage
<!-- Single-platform page: one pill at the top of content -->
<FigmaLink component="checkbox" />
<!-- Tabbed page: one pill per tab section, scoped by platform -->
<div id="tab-suite" class="tab-section">
<FigmaLink component="badge" platform="suite" />
...
</div>
<div id="tab-eshop" class="tab-section">
<FigmaLink component="badge" platform="eshop" />
...
</div>
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. On a tabbed page add platform so
each tab links to its own platform. 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. |
platform | "suite" | "eshop" | No | Restrict to one platform — renders a single pill. Use inside a tab section. |
Preview — single platform
One documented platform → a single "View in Figma" pill.
Preview — both platforms
Both platforms → one labelled pill each (Suite, eShop).