コードでデザインをするということ

Hiroki Tani @hiloki Web Designer ↓ Frontend Developer ↓ UX Engineer ↓ Design Engineer

Code is a Material

font-size: clamp(1rem, -1rem + 5vw, 2rem)

> "Meta-design is much more difficult > than design; it's easier to draw > something than to explain how to > draw it" > - Donald Knuth, The Metafont Book

Code is a Meta-design tool

:root { --ratio: 1.5; --s-5: calc(var(--s-4) / var(--ratio)); --s-4: calc(var(--s-3) / var(--ratio)); --s-3: calc(var(--s-2) / var(--ratio)); --s-2: calc(var(--s-1) / var(--ratio)); --s-1: calc(var(--s0) / var(--ratio)); --s0: 1rem; --s1: calc(var(--s0) * var(--ratio)); --s2: calc(var(--s1) * var(--ratio)); --s3: calc(var(--s2) * var(--ratio)); --s4: calc(var(--s3) * var(--ratio)); --s5: calc(var(--s4) * var(--ratio)); }

Code is a Language

function Sticker(props: { message: string }) {
return <p>{props.message}</p>;
}
function Scene() {
return (
<Container>
<Sticker message="Hello" />
</Container>
);
}

Code is a Material Code is a Meta-design tool Code is a Language // Design with Code now!

Ask Me Anything about - Designing with Code Design Systems Figma Plugin/Widget HTML,CSS How to drip tasty coffee Lovely Shiba-dogs

References - Code is a Material, Clarity 2019 Flower Typer Three.js, CodePen “Content Is Like Water”, Medium Donald Knuth Biography, The Crazy Programmer Metafont examples https://every-layout.dev/rudiments/modular-scale/ Figma Hacks and Workflow Enhancements with Plugins, Config 2022

• https://www.clarityconf.com/session/code-is-a-material
• https://codepen.io/ksenia-k/pen/WNyxXpO
• https://medium.com/@oristatdesign/responsive-website-retrospective-105ccc3b1bb8
• https://www.thecrazyprogrammer.com/2022/09/donald-knuth-biography.html
• https://www.win.tue.nl/~aeb/tex/mf/metafont.html
• https://www.youtube.com/watch?v=W1uwT-CUmUA