Public
Script
October 23, 2023
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
export function FigmaFrameObjectToHTML(json) {
const sansSerifFonts = new Set([
"Arial",
"Helvetica",
"Verdana",
"Trebuchet MS",
"Gill Sans",
"Noto Sans",
"Avantgarde",
"Inter",
"Geneva",
"Optima",
"Arial Narrow",
"sans-serif",
]);
const serifFonts = new Set([
"Times",
"Times New Roman",
"Didot",
"Georgia",
"Garamond",
"Tryst",
"Bodoni",
"serif",
]);
function convertRgbToHex(rgb) {
return ((rgb * 255) | (1 << 8)).toString(16).slice(1);
}
function generateColor(cssColorObject) {
return `#${
Object.values(cssColorObject)
.map(convertRgbToHex)
.join("")
}`;
}
function generateStyles(json) {
let style = "";
if (json.backgroundColor) {
style += `background-color: ${generateColor(json.backgroundColor)}; `;
}
if (json.cornerRadius) {
style += `border-radius: ${json.cornerRadius}px; `;
}
if (json.fills && json.fills[0] && json.fills[0].color) {
style += `color: ${generateColor(json.fills[0].color)}; `;
}
if (json.absoluteBoundingBox) {
style += `width: ${json.absoluteBoundingBox.width}px; `;
style += `height: ${json.absoluteBoundingBox.height}px; `;
}
if (json.primaryAxisSizingMode === "FIXED") {
if (json.primaryAxisAlignItems === "CENTER") {
style += "display: flex; justify-content: center; ";
}
if (json.counterAxisAlignItems === "CENTER") {
style += "align-items: center; ";
}
}
else {
style +=
`padding: ${json.paddingTop}px ${json.paddingRight}px ${json.paddingBottom}px ${json.paddingLeft}px; `;
}
if (json.style) {
if (json.style.fontFamily) {
let fontFamilyFallback = "sans-serif";
if (serifFonts.has(json.style.fontFamily)) {
fontFamilyFallback = "serif";
}
else if (sansSerifFonts.has(json.style.fontFamily)) {
fontFamilyFallback = "sans-serif";
}
style +=
`font-family: '${json.style.fontFamily}', system-ui, ${fontFamilyFallback}; `;
}
if (json.style.fontSize) {
style += `font-size: ${json.style.fontSize}px; `;
}
if (json.style.textAlignHorizontal) {
style +=
`text-align: ${json.style.textAlignHorizontal.toLowerCase()}; `;
}
if (json.style.textAlignVertical === "CENTER") {
style += "display: flex; align-items: center; ";
}
if (json.style.fontWeight) {
style += `font-weight: ${json.style.fontWeight}; `;
}
}
return style;
}
function convertToHtml(json, level = 0) {
if (level > 10) {
return ""; // Prevent excessive recursion
}
let html = "";
if (json.type === "FRAME") {
html += `<div id="${json.id}" style="${generateStyles(json)}">\n`;
if (json.children) {
json.children.forEach((child) => {
html += convertToHtml(child, level + 1);
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
October 23, 2023