JSX for Designers

Picture of the author

Travis Arnold

Design Systems Frame.io

@souporserious

Design Handoff

Compilers

Static Analysis

1export default function App() {
2 return (
3 <figure className="bg-gray-100 rounded-xl p-8">
4 <img
5 className="w-32 h-32 rounded-full mx-auto"
6 src="/react-finland.jpg"
7 alt="React Finland Logo"
8 />
9 <div className="pt-6 text-center space-y-4">
10 <blockquote>
11 <p className="text-lg font-semibold">
12 “React makes it painless to create interactive UIs.
13 </p>
14 </blockquote>
15 <figcaption className="font-medium">
16 <div className="text-cyan-600">React</div>
17 <div className="text-gray-500">
18 A JavaScript library for building user interfaces
19 </div>
20 </figcaption>
21 </div>
22 </figure>
23 )
24}
Source: souporserious.com/use-babel-to-statically-analyze-jsx/

Style Props

1export default function App() {
2 return (
3 <Stack as="figure" background="gray.100" cornerRadius="xl">
4 <Image
5 source="/react-finland.jpg"
6 width="32px"
7 height="32px"
8 alt="React Finland Logo"
9 />
10 <Stack spaceYStart={6} spaceBetween={4}>
11 <Stack as="blockquote">
12 <Text size="large" weight="semibold">
13 “React makes it painless to create interactive UIs.
14 </Text>
15 </Stack>
16 <Stack as="figcaption">
17 <Text color="cyan.600">React</Text>
18 <Text color="gray.500">
19 A JavaScript library for building user interfaces
20 </Text>
21 </Stack>
22 </Stack>
23 </Stack>
24 )
25}
26

Compiler Components

TokensTransformsPolymorphism
VariantsAssetsOverrides
type TextProps = {
color: ThemeValue["colors"]
}
const Text = createComponent<TextProps>({
defaults: {
color: "foreground",
},
transforms: {
color: (value, theme) => theme.colors[value],
},
variants: {
heading1: {
defaults: {
size: "large",
},
web: {
as: "h1",
},
native: {
as: "Text",
accessibilityRole: "header",
},
},
},
platforms: {
web: {
as: "span",
},
native: {
as: "Text",
},
},
})

Tokens

In
<Stack space="large" background="brand" />
Out
<div
css={{
display: "flex",
flexDirection: "column",
padding: "40px",
background: "#8D6CEE",
}}
/>

Transforms

const transforms = {
width: (value) => ({
width: theme.lineLengths[value] || value,
}),
size: (value) => {
const systemFontSize = theme.fontSizes[value]
return {
fontSize: systemFontSize
? systemFontSize.default || systemFontSize
: value,
}
},
alignment: (value) => ({
textAlign: value,
}),
opacity: (value) => ({
opacity: value,
}),
shadow: (value) => ({
filter: value,
}),
color: (value) => ({
color: theme.colors[value] || value,
}),
}

Polymorphism

In
<Stack
as="button"
onClick={() => send({ type: "FETCH_DOG" })}
/>
Out
<button
onClick={() =>
send({
type: "FETCH_DOG",
})
}
css={{
display: "flex",
flexDirection: "column",
}}
/>

Variants

const variants = {
heading1: {
defaults: {
size: "xlarge",
},
web: {
as: "h1",
},
native: {
as: "Text",
accessibilityRole: "header",
},
},
body1: {
defaults: {
size: "medium",
letterSpacing: 0.8,
},
web: {
as: "p",
},
native: {
as: "Text",
},
},
}

Component Variants

In
<Text variant="heading3">
The Future Is Compiled
</Text>
Out
<h3
css={{
whiteSpace: "pre-wrap",
margin: 0,
cursor: "default",
fontSize: 48,
color: "rgba(255, 255, 255, 0.8)",
}}
>
The Future Is Compiled
</h3>

Prop Variants

In
<Text
size={[
["default", "medium"],
["breakpoints.large", "large"],
]}
/>
Out
<span
css={{
whiteSpace: "pre-wrap",
margin: 0,
cursor: "default",
color: "white",
fontSize: 48,
"@media screen and (min-width: 1200px)": {
fontSize: 72,
},
}}
/>

Assets

In
<Graphic
name="design-handoff-linear"
width="48vw"
/>
Out
<svg
height="700"
fill="none"
viewBox="0 0 1625 700"
width="48vw"
>
<g id="design-handoff-linear">
<path
id="arrow-2"
d="M1189 383L1114 339.699L1114 426.301L1189..."
fill="#CBABFE"
/>
...
</g>
</svg>

Platforms

const figmaVisitor = {
JSXElement(path, state) {
path.node.openingElement.attributes.push(
t.jsxAttribute(
t.jsxIdentifier("style"),
t.jsxExpressionContainer(
t.objectExpression(
state.styleProperties
)
)
)
)
},
}
const inkVisitor = {
JSXElement(path, state) {
path.node.openingElement.attributes =
path.node.openingElement.attributes.concat(
state.styleAttributes
)
},
}
Benefits
Design SystemsCross-PlatformImplementation AgnosticReports / LintingBest-In-Class DX/UX
Implications
Not everything can be compiledHarder to debugExisting systems

Why Is This Important

Offers consistencyFocus on better tasksFully declarativePit of success for all

Open Source

Glamor

JSXStyle

BlocksUI

React Primitives

Rebass

ThemeUI

What's Next?

Thank You

www.jsxui.com

@souporserious