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

1K Views

December 11, 22

スライド概要

デザインとは?エンジニアリングとは?といった小難しい話はしません。
デジタルプロダクトに関わってきたデザイナーとしてコードを書くということ、そしてコードでデザインをするというのはどういうことかについて、自身のキャリアを辿りながら今考えていることや、なぜそれを続けてきているのかについてお話します。

https://fest2022.spctrm.design/

profile-image

Design Engineer / CodeとFigma と柴犬使い / Design System 好き

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
2.

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

6.

Code is a Material

12.

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

15.

> "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

17.

Code is a Meta-design tool

18.

: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)); }

22.

Code is a Language

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

28.

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

29.

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

30.

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