Support top level links

Author: ccouzens

definitions.kt

@@ -336,6 +336,24 @@ enum class TextAutoResize(val string: String) {
 	Truncate("TRUNCATE"),
 }
 
+/// Type of hyperlink
+@Serializable
+enum class HyperlinkType(val string: String) {
+	@SerialName("URL")
+	Url("URL"),
+	@SerialName("NODE")
+	Node("NODE"),
+}
+
+@Serializable
+data class Hyperlink (
+	val type: HyperlinkType? = null,
+	/// URL being linked to, if URL type
+	val url: String? = null,
+	/// ID of frame hyperlink points to, if NODE type
+	val nodeId: String? = null
+)
+
 /// Metadata for character formatting
 /// 
 /// [Figma documentation](https://www.figma.com/developers/api#typestyle-type)
@@ -357,6 +375,8 @@ data class TypeStyle (
 	val textDecoration: TextDecoration? = null,
 	/// Dimensions along which text will auto resize, default is that the text does not auto-resize
 	val textAutoResize: TextAutoResize? = null,
+	/// Link to a URL or frame
+	val hyperlink: Hyperlink? = null,
 	/// Line height in px
 	val lineHeightPx: Double
 )

definitions.swift

@@ -287,6 +287,26 @@ public enum TextAutoResize: String, Codable {
 	case truncate = "TRUNCATE"
 }
 
+/// Type of hyperlink
+public enum HyperlinkType: String, Codable {
+	case url = "URL"
+	case node = "NODE"
+}
+
+public struct Hyperlink: Codable {
+	public let type: HyperlinkType?
+	/// URL being linked to, if URL type
+	public let url: String?
+	/// ID of frame hyperlink points to, if NODE type
+	public let nodeId: String?
+
+	public init(type: HyperlinkType?, url: String?, nodeId: String?) {
+		self.type = type
+		self.url = url
+		self.nodeId = nodeId
+	}
+}
+
 /// Metadata for character formatting
 /// 
 /// [Figma documentation](https://www.figma.com/developers/api#typestyle-type)
@@ -307,10 +327,12 @@ public struct TypeStyle: Codable {
 	public let textDecoration: TextDecoration?
 	/// Dimensions along which text will auto resize, default is that the text does not auto-resize
 	public let textAutoResize: TextAutoResize?
+	/// Link to a URL or frame
+	public let hyperlink: Hyperlink?
 	/// Line height in px
 	public let lineHeightPx: Double
 
-	public init(fontFamily: String, paragraphSpacing: Double?, italic: Bool?, fontWeight: Double, fontSize: Double, textCase: TextCase?, textDecoration: TextDecoration?, textAutoResize: TextAutoResize?, lineHeightPx: Double) {
+	public init(fontFamily: String, paragraphSpacing: Double?, italic: Bool?, fontWeight: Double, fontSize: Double, textCase: TextCase?, textDecoration: TextDecoration?, textAutoResize: TextAutoResize?, hyperlink: Hyperlink?, lineHeightPx: Double) {
 		self.fontFamily = fontFamily
 		self.paragraphSpacing = paragraphSpacing
 		self.italic = italic
@@ -319,6 +341,7 @@ public struct TypeStyle: Codable {
 		self.textCase = textCase
 		self.textDecoration = textDecoration
 		self.textAutoResize = textAutoResize
+		self.hyperlink = hyperlink
 		self.lineHeightPx = lineHeightPx
 	}
 }

example-figma-files/gov-uk-design-system-components/get-started-page.html

@@ -133,7 +133,7 @@
           data-figma-name="Content: Body"
           data-figma-id="863:121"
           >Last updated: 26 March 2023</div
-        ><div
+        ><a
           style="
             color: var(--Link-Default);
             font: 300 19px / 24px GDS Transport Website, arial, sans-serif;
@@ -144,7 +144,8 @@
           "
           data-figma-name="Action: Link"
           data-figma-id="863:122"
-          >Original File</div
+          href="#"
+          >Original File</a
         ></div
       ><div
         style="
@@ -464,7 +465,7 @@
             components from this file using the Assets navigation tab next to
             the Layers navigation tab.</p
           ></div
-        ><div
+        ><a
           style="
             color: var(--Link-Default);
             font: 400 19px / 24px GDS Transport Website, arial, sans-serif;
@@ -475,7 +476,8 @@
           "
           data-figma-name="Action: Link"
           data-figma-id="780:110"
-          >Download GDS Transport</div
+          href="https://www.dropbox.com/sh/r505onxpqmgan0i/AABpCj5rAzK98eolXHYIifvXa?dl=0"
+          >Download GDS Transport</a
         ><div
           style="
             color: var(--Text-Secondary);

figma-schema/src/lib.rs

@@ -28,6 +28,6 @@ pub use self::{
     rectangle::Rectangle,
     style::{Style, StyleType},
     styles::Styles,
-    type_style::{TextAutoResize, TextCase, TextDecoration, TypeStyle},
+    type_style::{Hyperlink, HyperlinkType, TextAutoResize, TextCase, TextDecoration, TypeStyle},
     vector::Vector,
 };

figma-schema/src/type_style.rs

@@ -29,6 +29,26 @@ pub enum TextAutoResize {
     Truncate,
 }
 
+/// Type of hyperlink
+#[derive(Debug, Deserialize, Serialize)]
+#[serde(rename_all = "SCREAMING_SNAKE_CASE")]
+#[typeshare::typeshare]
+pub enum HyperlinkType {
+    Url,
+    Node,
+}
+
+#[derive(Debug, Deserialize, Serialize)]
+#[serde(rename_all = "camelCase")]
+#[typeshare::typeshare]
+pub struct Hyperlink {
+    pub r#type: Option<HyperlinkType>,
+    /// URL being linked to, if URL type
+    pub url: Option<String>,
+    /// ID of frame hyperlink points to, if NODE type
+    pub node_id: Option<String>,
+}
+
 /// Metadata for character formatting
 ///
 /// [Figma documentation](https://www.figma.com/developers/api#typestyle-type)
@@ -55,6 +75,8 @@ pub struct TypeStyle {
     pub text_decoration: Option<TextDecoration>,
     /// Dimensions along which text will auto resize, default is that the text does not auto-resize
     pub text_auto_resize: Option<TextAutoResize>,
+    /// Link to a URL or frame
+    pub hyperlink: Option<Hyperlink>,
     /// Line height in px
     pub line_height_px: f64,
 }

src/to_html/mod.rs

@@ -114,22 +114,34 @@ fn node_to_html(node: &Node, parent: Option<&Node>, css_variables: &mut CSSVaria
                 Some(c) => c,
             };
 
-            html! {
-             div(
-                 style?=style.as_deref(),
-                 data-figma-name=&node.name,
-                 data-figma-id=&node.id
-             )  {
-                    @ if !characters.contains('\n') {
-                        : &characters
-                    } else {
-                        @ for line in characters.split('\n') {
-                            p(style="margin: 0;") {
-                                : line
-                            }
+            let inner = html! {
+                @ if !characters.contains('\n') {
+                    : &characters
+                } else {
+                    @ for line in characters.split('\n') {
+                        p(style="margin: 0;") {
+                            : line
                         }
                     }
-                 }
+                }
+            };
+            let hyperlink = node.style.as_ref().and_then(|s| s.hyperlink.as_ref());
+
+            html! {
+              @ if let Some(hyperlink) = hyperlink {
+                    a(
+                         style?=style.as_deref(),
+                         data-figma-name=&node.name,
+                         data-figma-id=&node.id,
+                        href=hyperlink.url.as_deref().unwrap_or("#")
+                     )  { : &inner }
+                } else {
+                     div(
+                         style?=style.as_deref(),
+                         data-figma-name=&node.name,
+                         data-figma-id=&node.id
+                     )  { : &inner }
+                }
             }
             .to_string()
         }

typescript/index.d.ts

@@ -237,6 +237,20 @@ export enum TextAutoResize {
 	Truncate = "TRUNCATE",
 }
 
+/** Type of hyperlink */
+export enum HyperlinkType {
+	Url = "URL",
+	Node = "NODE",
+}
+
+export interface Hyperlink {
+	type?: HyperlinkType;
+	/** URL being linked to, if URL type */
+	url?: string;
+	/** ID of frame hyperlink points to, if NODE type */
+	nodeId?: string;
+}
+
 /**
  * Metadata for character formatting
  * 
@@ -259,6 +273,8 @@ export interface TypeStyle {
 	textDecoration?: TextDecoration;
 	/** Dimensions along which text will auto resize, default is that the text does not auto-resize */
 	textAutoResize?: TextAutoResize;
+	/** Link to a URL or frame */
+	hyperlink?: Hyperlink;
 	/** Line height in px */
 	lineHeightPx: number;
 }