Episode 2
#2 Design Handoffs: Finding Balance between Authority, Control, and Accountability with Erez Reznikov
In this episode of Juicy Patterns, our guest, Erez Reznikov, principal designer at Jux, delves into the challenges faced in the handoff between design and development, and why he believes that a solution can be found in the design tool itself. Along with exploring the root cause of these problems, we discuss the importance of designers having a balance of authority, control, and accountability, and how this can be achieved through the design tool. Additionally, Erez shares his insights on the obstacles in the way of widespread adoption of new design tools like Jux and what it would take to overcome them. Tune in to learn more about this fascinating topic at the intersection of design and development!
Transcript
omer-frank_1_02-07-2024_180911:
Hey everyone
2
:Welcome to the Juicy Patterns podcast.
3
:Today with me, I have Mr.
4
:Erez Reznikov.
5
:Erez is a dear friend.
6
:of Mine.
7
:He's a principal designer.
8
:at Jux.
9
:He's a design educator and a Figma
and Webflow evangelist, and I
10
:have so many questions for him.
11
:Welcome Erez.
12
:Track 1: thanks a lot.
13
:Thanks a lot.
14
:Um, yes, there, there's something about
being called a mister at the age of 35
15
:that sort of makes you feel like 55.
16
:I.
17
:So, uh, thank you for that edition.
18
:omer-frank_1_02-07-2024_180911:
I try to give the proper respect.
19
:Track 1: Yeah, thanks a lot.
20
:Thanks a
21
:omer-frank_1_02-07-2024_180911: so,
so, so wait, are you gonna buy the, the
22
:Figma keyboard, the new Figma keyboard?
23
:Track 1: No, I'm so against it.
24
:Like you cannot imagine how against I am.
25
:omer-frank_1_02-07-2024_180911: But why
I, you know, think about it as like a,
26
:a new experience for, it's not just, uh,
27
:Track 1: I'll, I'll tell you why.
28
:omer-frank_1_02-07-2024_180911: and all.
29
:Yeah.
30
:Track 1: I'll tell you why.
31
:Um, for the same reason that generic
solutions, uh, usually outperform specific
32
:solutions in the sense that because I
have a keyboard for many different apps,
33
:um, the last thing I want is to develop
muscle memory for a new thing that will
34
:only be available for me and relevant for
me for Figma, but not for anything else.
35
:And so.
36
:Instead of having a mouse, a
trackpad, a keyboard, now I have
37
:mouse trackpad keyboard and a special
keyboard only for some occasions.
38
:It's like I try to minimize that
clutter in my life now, maximize it.
39
:So if, um, if I can, if I, if I
can have even less, I would, I
40
:would love to do that instead,
41
:omer-frank_1_02-07-2024_180911: But
42
:if, if you spend like
43
:so many hours in a day, like working,
uh, with the same app with Figma,
44
:like, don't you want like something
that is, especially for this thing
45
:Track 1: Do.
46
:Do you know how many years it took me to
develop the specific muscle memory for
47
:all the specific shortcuts and figma that
I've already developed for my keyboard?
48
:Now you want me to unlearn it
and relearn something else?
49
:Hell with that.
50
:omer-frank_1_02-07-2024_180911: I just
recently learned the, the shortcuts with
51
:the, the align functionality with Figma.
52
:Uh, and it's a, you know,
it's, it's a game changer.
53
:Like, I, I don't know how I
managed before it, So, so wait.
54
:Um, okay.
55
:You're a design educator.
56
:You're teaching at Shenkar,
57
:Track 1: College.
58
:Yeah.
59
:omer-frank_1_02-07-2024_180911:
Engineering and Design.
60
:You're a principal designer.
61
:at Jux we'll talk about it.
62
:And
63
:you are a Figma and web flow evangelist.
64
:What, what does it mean?
65
:Track 1: it means that, um, very, very
early on, especially with, uh, with Figma.
66
:Um, I sort of got the gist of why I think
that tool, and that could be Figma in the
67
:case of Figma or Webflow in the case of
Webflow, um, is actually like the next,
68
:the next big, you know, great thing I.
69
:And, uh, I started basically
barking at every possible tree and
70
:opportunity that I, uh, could muster.
71
:Uh, hey people, if you need to have
a website, go do it in Webflow.
72
:Leave everything else you've ever
tried aside and go to Webflow and
73
:hey guys, if you're doing, uh,
product design with anything but
74
:Figma, drop it and go to Figma.
75
:So I start, I was the first in my
company when I was working at Overwolf.
76
:I was the first one to sort
of, you know, discover it.
77
:And, uh, some six years ago,
way before Figma was cool.
78
:And, um, and I was blown away, uh, in the
comparison to the other tools I, I used,
79
:uh, and immediately was like I was hooked.
80
:This was the only tool I used and
eventually I, I, I, I felt so comfortable
81
:with that, um, to the bemusement of
all the other designers in Overwolf.
82
:I stopped using the Adobe
Suite almost completely.
83
:So I illustrated with Figma.
84
:I did everything I need, like, almost,
almost to the level of, I developed
85
:all the assets for the animations in
After Effects in Figma, and it was still
86
:more comfortable for me than doing it
in like Illustrator or XD or whatever.
87
:Um, so yeah, I've just, and then
I just convinced everybody to, to
88
:switch to Figma everywhere and, um.
89
:I joined, um, another friend of ours,
uh, Ido Zaifman, some, almost five
90
:and a half, six years ago, almost
immediately, uh, to run the, the Friends
91
:of Figma Facebook group in Israel.
92
:Um, and we've been running it ever since.
93
:omer-frank_1_02-07-2024_180911:
That's amazing.
94
:I remember that
95
:I tried.
96
:to convince people to move from Photoshop
to Sketch, and everyone like laughed
97
:at me and eventually I told them I
eventually they bought the, they uh,
98
:built business models and like schools
about sketch and everything, and,
99
:and then they, uh, switched to Figma.
100
:Uh, I, I learned a lesson from
it just to, to believe like,
101
:in my gut feeling and, uh,
102
:just move on with, yeah.
103
:So, so we have a problem
104
:like the design industry.
105
:We have a big, big problem
106
:with, uh, with how we design.
107
:Can you tell me what that problem is?
108
:Track 1: Sure.
109
:Um, so we have many problems,
but one problem that I am
110
:omer-frank_1_02-07-2024_180911:
The The big one.
111
:The
112
:Track 1: the big one, yeah.
113
:We have, um, yeah.
114
:So one of the things that happens when
you start really, really loving and using
115
:a tool deeply and teaching it to others
is that you know it in its totality.
116
:So there's, there's, there's not
a, there's not a thing about.
117
:Um, about Figma, uh, for
example, that I didn't try or do.
118
:Eventually, uh, you pick it apart
and when you do that, you start
119
:noticing the problems with the tool
that you love and you pick apart
120
:because unlike nobody else, like, you
know, it's like your spouse, right?
121
:You know them so well, you know, all
of their faults and all of their, um,
122
:misgivings and all of their problems
better than, you know, sometimes
123
:better than they know themselves.
124
:So, um, and so one of the things that I've
started noticing some, probably three,
125
:four years ago, is that I'm constructing
all this beautiful design system like
126
:structures with auto layout when it
came out, and varying groups and making,
127
:you know, nice and tidy components and
everything is super well thought, thought
128
:of, you know, in the, in the realms
of, you know, how much Figma allows me.
129
:Um, and eventually, um, it's still
not, it, like, it's still not the
130
:actual thing because eventually
the source of truth is not figma.
131
:The source of truth is whatever the
front end developers, uh, understood from
132
:whatever they, uh, took from your Figma,
and basically it sort of, um, it, it,
133
:it, it creates a whole slew of problems,
chief of which is an emotional problem.
134
:Because, um, um, your drive and
motivation to work is driven
135
:by emotions a lot of the time.
136
:And if, uh, repeatedly you see that
you put a lot of effort into something,
137
:you craft it to the perfect perfection
that you can, you know, uh, dream of.
138
:And then eventually it gets butchered
by developers that sort of, um.
139
:Don't see properly, don't measure quite
effectively, don't diligently go and
140
:check every size, color and stuff.
141
:Uh, and eventually you get the
product, uh, in like the, the,
142
:uh, I don't know, the development
environment, and you inspect it
143
:and even before you even inspect
it, like with the inspect elements,
144
:like just by looking at, you're like
immediately, okay, things are off here.
145
:I did not design this crap.
146
:My thing was shiny, right?
147
:Why is this so?
148
:No.
149
:Poor looking.
150
:And uh, when it happens again and
again, and again, and again and again,
151
:eventually you start to develop cynicism.
152
:Um, and that cynicism, it's like poison.
153
:Um, because you start to sort of
say to yourself, ah, you know,
154
:I'll do this one, I'll do that
one, but it doesn't even matter
155
:because, you know, let them ship it.
156
:And then we will just, uh, continue on
from the real product and see how it goes.
157
:And so you start to sort of diminish
your motivation for the craft itself and.
158
:And once I sort of, once I've seen
that this, this, this is what happens
159
:in my mind when I start designing
and the, the dreaded, oh, come on.
160
:It couldn't be, again,
it's not like I designed.
161
:Um, it sort of completely throws you off.
162
:Um, and you only notice the, so, so
sometimes, you know, it's like fish don't
163
:know that they're inside of water because.
164
:They're always inside of water.
165
:In, in, in the same way.
166
:People that don't experience
anything, um, more self, uh, allowing
167
:than Figma, they don't know that
something else is even available.
168
:And so only when I really started to dive
169
:omer-frank_1_02-07-2024_180911:
It's like dimensions.
170
:It's like dimensions.
171
:When you're in the second
dimension, you don't know
172
:Track 1: don't know that
there's the third one?
173
:omer-frank_1_02-07-2024_180911: and
174
:Track 1: Yeah.
175
:There's no
176
:omer-frank_1_02-07-2024_180911:
you don't know.
177
:Yeah.
178
:Track 1: Exactly, exactly.
179
:And only when I actually started using
Webflow Deeply, and I got this feeling
180
:of, hold on, I can be the, the, the,
the, the, the master of my fate.
181
:Right?
182
:It's like I designed it and I published
it and it was it, and there was nothing
183
:between me and the final product at least.
184
:And nothing in the terms of like the
styling of things, the responsivity,
185
:the, the behavior of the design itself.
186
:Um, and that feeling got really
addictive really fast, uh,
187
:because you are empowered, like
you never were empowered before.
188
:And, um, and then it's
like, wait a minute.
189
:So I know how it should feel, um,
in a tool like Webflow, but Webflow
190
:sort of, um, it's sort of only for
websites and only for a specific
191
:kind of websites because again, web.
192
:For now.
193
:Yeah, yeah, yeah.
194
:Webflow assumes there's no developer
eventually coming, coming to the rescue.
195
:Right.
196
:It's like you as a designer
with your webflow and that's it.
197
:Everything is you.
198
:Um, and so, um, and that's a problem
because, you know, web application,
199
:native application, complex things,
uh, you can't develop them in
200
:webflow by yourself as a designer.
201
:It's like, it's not even close.
202
:It's not even remotely close.
203
:Um, and also Webflow has a.
204
:They did a piss poor job, um, at making
their code actually lovable by developers.
205
:So when I showed my websites
to real developers, front end
206
:developers, they looked at it and
it's like, I would never use that.
207
:I would rather look at what you've done
here, rewrite everything completely, using
208
:my own react components and whatever,
209
:omer-frank_1_02-07-2024_180911:
Right now in:
210
:Track 1: even right now.
211
:Even right now.
212
:Yeah.
213
:So, uh, so that sort of leaves
you in this closed garden when
214
:you are a master of your fate.
215
:Only in so far as your fate is marketing.
216
:Uh, websites not too big,
not too complex, right?
217
:It's a problem.
218
:But on the other hand, you have Figma,
which is generic, and you can build
219
:whatever the hell you want with that,
but it doesn't give you the reality, the,
220
:the full control, that Webflow gives you.
221
:You're sort of stuck in this
situation when you know how it
222
:should feel, but it's only limited.
223
:And, uh, you have the unlimited
one, but it doesn't feel right.
224
:Um, and so there's a hole.
225
:There's something needs to give.
226
:It eventually needs to be, uh,
something in between those two such
227
:that you can both feel the reality
of it and be a master of the front
228
:of the front end, like the stylistic
part of the, of the, of the front end.
229
:And still be, uh, able to give that, uh,
product to developers so that they can
230
:bring in all the logic and all the data
and all the connections and all of that.
231
:Um,
232
:omer-frank_1_02-07-2024_180911: don't
you think that it's too much in a way
233
:like to, to, as a designer, to, to think
about user needs and to think about
234
:solutions and like sketching everything
235
:and then like to, to do the prototyping
from the early stages of the.
236
:Low fidelity prototype
and, and doing everything.
237
:it's another thing that
you wanna teach them.
238
:So don't you think that
it's a bit too much?
239
:Track 1: Well, uh, first of all, yes.
240
:Okay.
241
:The first answer is
yes, it is overwhelming.
242
:Um, but the second part
of the answer is I.
243
:Uh, fine.
244
:So what, uh, why?
245
:Because if you have, so if the span of
potential, um, things that designers
246
:should take care of is now wider, the
only thing that you would expect the
247
:industry to do, um, is to stratify into
different kinds of designers, right?
248
:So.
249
:Now the span is wider then,
and it's too wide for any
250
:singular designer to be graded.
251
:Like all of the span.
252
:I think it's already too wide, even
before what I just, uh, uh, alluded to,
253
:that has to happen even before that.
254
:I think that the span is too wide.
255
:You can't be a master.
256
:You can't be a master researcher and also
a master UI craftsman and also a master
257
:communicator and also strategy and blah.
258
:It's too much already.
259
:omer-frank_1_02-07-2024_180911: Yeah.
260
:Track 1: Which means that, um, you'll
see, and you eventually do see, like
261
:if this is the reality that designers
start to sort of occupy niches.
262
:Like if you map everything on,
on, on the spectrum, right?
263
:You see, uh, designers occupy
some of the potential verticals on
264
:that spectrum, but not all of them
because it's just humanly impossible.
265
:What I envision is going
to happen is that, uh.
266
:It already is sort of
happening with Figma.
267
:If you like, pay close attention,
you'll see that there is a birth of
268
:a very technocratic, And very sort
of, uh, analytical designer, uh,
269
:that likes to create design systems.
270
:It's usually the designers that
work in design ops in bigger, in
271
:bigger firms or bigger companies.
272
:Uh, they don't like solve
user needs by the day.
273
:They usually solve the other designer's,
uh, needs by crafting better component
274
:and better API of those components inside
of the design system with the developers.
275
:And, uh, they tend to be perhaps, maybe
sometimes less flamboyantly creative.
276
:Uh, but they tend to be much more
meticulous and they're less afraid
277
:of the technicalities of, of, of the
real interactivity, um, you know,
278
:of how it represents itself in code.
279
:Um, sometimes they will also
code slightly in like, you know,
280
:CSS, html, sometimes JavaScript.
281
:Um, so you already see
that my, my only, uh.
282
:Prognosis.
283
:Right.
284
:The, the only thing that I think is
going to happen is that I, I think
285
:it's going to, um, happen more and
more and more up to the level will you?
286
:Well, you have, um, something that you
might call some, like, something like a
287
:UI engineer ish, kind of a, uh, position
in which you're going to be very, very,
288
:very knowledgeable of how, you know,
CSS works or how the reality of the, of
289
:the code works and if you have a good
enough tool so that you can use it.
290
:Something like Webflow.
291
:So for example, if you today want
to use Webflow, the set of skills
292
:that you need to have and the set
of knowledge that you have to.
293
:Um, uh, that you have to have in
order to actually manipulate web flow
294
:effectively is already pretty vast.
295
:So just imagine if you had, if you had a
web flow, married to Figma in some way.
296
:Such that it still can be generic,
but it uses and gives you all of the
297
:reality of code, as you know, as ui,
uh, such that you can create things.
298
:So it gives you units that are real,
all the availability of Flexbox and CSS
299
:grid or whatever it needs to be, right?
300
:Um, you know, display positioning,
the reality, not like, because you
301
:know, Figma, Figma is hiding a lot
from designers from the real world,
302
:omer-frank_1_02-07-2024_180911: It's
like making everything So beautiful
303
:and easy, but it's not how the
real world, the real world works.
304
:Like, like developing stuff.
305
:You know, I learned that when I first
started using Webflow and I had to
306
:like manipulate all the screen sizes
307
:like I had.
308
:An image and it was a disaster.
309
:And like the the Figma, the Figma
design was amazing and everything,
310
:and it was approved by all the
stakeholders and it was amazing.
311
:And eventually when I came
to develop this thing, I had
312
:so many problems and I
learned that Figma is just.
313
:It's not enough,
314
:but my
315
:question is, yeah, but my
question is like, I hear you.
316
:Okay.
317
:When you're talking about organizations
like big corporates, but startups.
318
:Startups usually have like one
designer for almost a year and a
319
:half, maybe, maybe two years if they
320
:raise money.
321
:Track 1: True,
322
:omer-frank_1_02-07-2024_180911:
So, you know, and the, usually you
323
:don't build a design system until
you get to a point that you grow
324
:as a company.
325
:But again, if you're like giving more
work to, to, a designer in a startup,
326
:would you think that it'll work as
good as in a, a big company in an
327
:Track 1: Well.
328
:So first of all, of course, if
you have less designers, they
329
:have to occupy wider spectrums.
330
:You might expect that there will
perform more poorly on, um, on
331
:different tasks that they have, right?
332
:If you have only one designer, and that
designer needs to do marketing design,
333
:website design, or website building
in something like Webflow, and also
334
:product design and also brand, like,
you should expect that unless you.
335
:You know, unless you discovered a unicorn
designer that is like the next Einstein
336
:or Da Vinci, uh, but just modern age,
uh, other than that, uh, you'd probably
337
:come across a designer that has some
things that he, you know, knows how to
338
:do better and some things he's like sort
of half asing, uh, just enough so that
339
:to clear the bar, to clear the threshold.
340
:But you need to remember that in startups
clearing the bar, clearing the threshold.
341
:Is sometimes just enough, right?
342
:You just need to make it good enough
so that they can, uh, get more money
343
:from VCs and then get the second and
the third and the fourth designer.
344
:So I don't really see a
problem there more than that.
345
:Um, I think that if you have the,
like, if the right tool is created,
346
:um, then it's going to substitute some
knowledge that you currently have.
347
:Uh, for example, in a tool like Figma for
another type of knowledge in another tool.
348
:So it's not that you, uh, it's not that
you always accumulate more and or need
349
:to accumulate more and more knowledge.
350
:So I'll give you an example.
351
:So suppose, um, suppose you're
talking about layout, okay?
352
:Um, if you, if you try to see
how layout works in Webflow.
353
:Then you'll see that it
has real display modes.
354
:So you have Flexbox and CSS grid and
inline block and block and inline and
355
:none if you want to hide something.
356
:Okay, fine.
357
:What do you have in Figma?
358
:You have some new thing that doesn't
exist, uh, outside of Figma, which
359
:is, uh, either it's a normal frame
and then you have constraints.
360
:Which is like, they correlate to position
absolute in, in, in real life code.
361
:Um, and you have auto layout, which is
some special form of flag box that Figma
362
:created, but it's not really Flex box.
363
:And there's, if, if you want, we can
map the differences between them,
364
:but it's not really, really Flex box.
365
:And
366
:omer-frank_1_02-07-2024_180911: What,
what's the difference for, for designers
367
:that don't know what's the difference?
368
:Like what is the
369
:Track 1: Well, there, there's, there's
many there, there's many differences.
370
:So, for example, in Flexbox, um, there is
a, there there's a separate fate that you
371
:can have for children and for the parent.
372
:So the parent can say something like,
all the children flex, uh, all the,
373
:all the children stretch, sorry.
374
:But then, and you have like five children,
and then one of the children you say to
375
:it, oh yeah, like, ignore father, right?
376
:Ignore the, the, the, the
parent, uh, the parent container
377
:that has the flex stretch.
378
:Uh, you do flex left and top right.
379
:For example.
380
:Now a lot of enigma.
381
:It, it's an, an impossible feat.
382
:You cannot do that.
383
:Um, plus, um, in Figma, everything will
be dispersed into different places.
384
:So the place you would control
things like hug content.
385
:Or fill container, right?
386
:Um, you would have it in the sizes right
in the module up and top, but the place
387
:that you decide things like the, the auto
layout is going to be down a couple of
388
:models in a completely different place.
389
:But in reality, when you
control how things behave and
390
:how much space they occupy.
391
:It's the same thing.
392
:So you will tell all your kids to stretch.
393
:It's the same flexbox module that you
told them to go top and left or whatever.
394
:Um, there's things that just,
just don't exist in auto layout
395
:that exist in, uh, Flexbox, like
the ability to have space around.
396
:In Figma, the only thing you can do,
you can do Auto in the Gap and then
397
:it, it's an equivalent in Flexbox
to having space between, right?
398
:So it pushes everything to the sides
and distributes in, uh, evenly, right?
399
:The space between the things,
right, but not around the things.
400
:And in Flexbox, you can have space around.
401
:Now sometimes that's
exactly what you want.
402
:You want space around.
403
:How do you do it?
404
:In Figma, you, you cheat.
405
:So you have padding on the side
that you shouldn't have had.
406
:Right, and, and et cetera,
et cetera, et cetera.
407
:There's a lot of things like that.
408
:Um, wrapping is not so, for example,
in Figma, if you, I don't know
409
:if you notice, you can have, um,
either vertical, either vertical or
410
:a layout or horizontal or wrapping.
411
:This is nonsense because wrapping
has nothing to do with direction.
412
:Wrapping is a separate property
that you might incorporate in
413
:when you, when you design stuff.
414
:You can either trigger it or not.
415
:So it's either wrap or, or no rep, right?
416
:It's, it's a Boolean, uh, decision, but
it has nothing to do with the direction.
417
:So you should be able to have wrap,
yes, wrap true when it's vertical wrap.
418
:True when it's horizontal and
both of them reversed, right?
419
:omer-frank_1_02-07-2024_180911: is not
420
:Track 1: rever.
421
:It's not as, and in Figma it's,
it's as so what they actually did.
422
:Like, if you, if you, if you try
to measure like what happened,
423
:they actually said wrapping
only makes safe for horizontal.
424
:So if, if you'll choose wrap, it basically
means direction, horizontal and wrap True.
425
:They made it as a triple selector with
either of the three, which is nonsense.
426
:And so it teaches more and more.
427
:And there's a lot of
things like that in Figma.
428
:It teaches more and more and more and
more things, um, that are just wrong.
429
:Or I wouldn't say wrong because
it's like a relative term, but
430
:it's not like real life code.
431
:It's not like CSS or iOS or Android.
432
:Um, and eventually, you know,
I have issue with that because.
433
:Um, when you create a tool, you
create, um, it, it's like you
434
:create a ditch in the snow, right?
435
:And, and eventually everything will
follow that, those tracks, right,
436
:that you laid out in the snow.
437
:And so if you lay the tracks in,
in a certain way, everyone will
438
:start learning about life, about
interactivity, about layouting from those
439
:tracks you just created in the snow.
440
:And if you create the wrong tracks.
441
:You actually create a whole lot
of damage because you, generation
442
:upon generation teach people the
wrong thing, the wrong mental model.
443
:Because eventually the coders will have
to take the, the whatever Figma outputs
444
:and sort of convert the thing that you do
did in auto layout into their own thing.
445
:And then if you change something, the
thing you changed need needs, again,
446
:some translator into, okay, but what
it would actually mean in code, right?
447
:And I'm like, but, but why
couldn't you just absolutely match
448
:the two and be done with that?
449
:Or at least approximate it, right?
450
:omer-frank_1_02-07-2024_180911:
Yeah, I, I, I, I couldn't agree with
451
:you more, but the thing that I'm
afraid of is like the, the steep
452
:learning curve, like people don't
453
:want to learn.
454
:I.
455
:It's a
456
:tough, it's a tough thing to do
457
:and especially today when like
so many designers are like, are,
458
:are like, they know the Figma way
459
:and, uh, so wait, what,
what is the future?
460
:Track 1: So look, um, I have
my own take, uh, on the future.
461
:Um, working on that future, that's
what we do in Jux we try to create a
462
:tool that will do just that will marry.
463
:The realism of Webflow and the genericness
and canvas nature of, uh, Figma.
464
:One of the, one of the suckiest
experience in Webflow is the fact
465
:that you're stuck on that 100%
view of the, of the page, right?
466
:It's always that.
467
:It's always the page.
468
:Uh, and if you like, want to have
three variations of that page, one
469
:next to another, as you would do
in Figma in three seconds, right?
470
:You would zoom out all drag.
471
:Something that you have and you want
to explore, and you would immediately
472
:see that right in front of your eyes.
473
:And it's really, really helpful if
you want to brainstorm ideas when
474
:you're in the sandbox, um, you
know, mindset currently, right?
475
:Like you're, you're messing
around, um, trying things.
476
:Um, Webflow is very stiff in that regard
because it's really, it's a, it's a
477
:building tool, not a designing tool
478
:omer-frank_1_02-07-2024_180911:
But wait, wait.
479
:We forgot.
480
:We forgot about the new player.
481
:Framer, what do you think about framer?
482
:Track 1: Yeah, so Framer actually
goes in a direction that I like.
483
:Um, and it's also trying to sort of
marry, um, Figma and Webflow ish.
484
:Um, I think it, it sort of marries it in
the wrong way slightly because it allows
485
:more freedom than I think is warranted.
486
:Um, I'll try to explain why.
487
:So in, in framer.
488
:By default, if you put something
on the page, um, you can
489
:drag it around freely, right?
490
:Um, unless you take
measures to not do that.
491
:So, um, like in, in CSS you have
position, uh, property and you can
492
:either have static or you can have,
um, relative, absolute fixed, uh,
493
:sticky, you know, things like that.
494
:So the thing is that when you,
any tool that will allow you to
495
:drag around things freely, what it
actually is doing behind the scenes
496
:is making it position absolute okay?
497
:Now, the problem with position absolute
is that, um, you almost never want
498
:to use that unless you must, because
position absolute is very stiff.
499
:Uh, it's, it's by design not
responsive because it's not part
500
:of the flow of the DOM itself.
501
:So the, the, the elements, the noses
and the DOM, they push each other down.
502
:And if you want something to
hover above something else,
503
:you make position absolute.
504
:Now Figma is position absolute by default.
505
:Like everything is position
absolute, unless you put it
506
:inside of an auto layout frame.
507
:Um.
508
:Framer basically does the same, right?
509
:So you really need to actively take a
stack, which is basically as saying flex
510
:box vertical, uh, or flex box horizontal.
511
:If you have like columns, right?
512
:So it's either a vertical stack, like
an X stack or, or a Y stack, right?
513
:So vertical or horizontal, and only inside
those stacks will eventually, you'll
514
:basically work, um, not with position.
515
:Absolute.
516
:And what it allows users to
do is to mess around and do a
517
:bunch of things in position.
518
:Absolute.
519
:And then wonder why when they try, uh,
to see the width, you know, to, to mess
520
:around with the width of the browser,
it wouldn't really respond properly.
521
:Of course it wouldn't respond
properly because you just made
522
:it position absolute right.
523
:So it sort of teaches you
to do the wrong thing.
524
:omer-frank_1_02-07-2024_180911:
Everything is positioned absolute, like in
525
:framer.
526
:Like,
527
:Track 1: Unless you, unless you put
it, unless you put it in a stack.
528
:Yes.
529
:That's the problem.
530
:Um, every time
531
:omer-frank_1_02-07-2024_180911: and they
don't, and they, they don't talk about it.
532
:They don't,
533
:Track 1: of course, of course, because,
because they don't, they don't want
534
:you to mess to, to, to even, um, to
even mess around with positioning.
535
:It's not, it's not the thing that they
want to your mind to be preoccupied.
536
:Um, and the same thing with Figma, right?
537
:It's positioned absolute by default.
538
:Everything, um, has the x and y, uh, data
points, uh, regarding where they are in
539
:comparison to the zero zero of the axises.
540
:Um, so yeah, I,
541
:omer-frank_1_02-07-2024_180911:
that designers need the freedom
542
:and flexibility to try stuff
543
:Track 1: I do, I I do, I completely do.
544
:That's why, um, in Jux, the canvas itself
is like in Figma in the sense that you
545
:can put things on the canvas freely
and drag them on the canvas freely.
546
:But the minute you want to drag
something into an object, into a div,
547
:right, immediately gravitation works.
548
:So inside that div by default
is position static and display
549
:block or flex or whatever it
is that you're currently doing.
550
:But you really need to deliberately,
you, yourself as a user.
551
:Like if you put something
inside of a div, right?
552
:You yourself need to make the position
absolute by yourself proactively to
553
:make that actually position absolute.
554
:So by default, everything will just
work as it works in oral layout.
555
:So things will push things around.
556
:There's going to be forced order, right?
557
:With gaps and stuff like that, right?
558
:The
559
:omer-frank_1_02-07-2024_180911:
So, let me understand.
560
:So, so let me understand.
561
:Uh, I, as a designer, I can do whatever
I want, but as soon as I try to put it
562
:inside the diviv, then it become like, I
need to be conscious to, to the, to the
563
:stuff that going on in the property panel.
564
:Like, what's going on with the
flex, flex box and everything.
565
:Track 1: exactly.
566
:So if you want to mess around, so
you have the freedom on the canvas on
567
:the one hand, because on the canvas
itself, gravitation is meaningless.
568
:Right.
569
:You want to float around in space,
you want to be free, but inside
570
:each, so suppose like it, it
571
:omer-frank_1_02-07-2024_180911:
You should have called.
572
:You should have called the company
like something with gravitation.
573
:It's smart.
574
:Track 1: We had, uh, we had, we had
many, many discussions on how to call it.
575
:It had many different names and
it started from a different name.
576
:It started from Project Dreams that, that
was even before I, uh, joined the company.
577
:But yeah, eventually it's Jux.
578
:It's Jux because, uh, it's a shorthand
for juxtaposition because the whole,
579
:the whole point of the company is to,
of the tool, not only the company, is
580
:to juxtapose design and code and make
them sort of collide into one thing.
581
:Um.
582
:So basically the, the idea
is that you have the canvas.
583
:The canvas, and it's free, and
you roam around and you can put
584
:elements on the canvas freely.
585
:But then once you start building
something, so the equivalent and Figma
586
:would be if you put a frame on the canvas
immediately, the frame is auto layout.
587
:So, so just imagine a world in which
if you create a frame, it's auto layout
588
:by default, not regular by default.
589
:Right?
590
:And because it's auto, auto layout,
by default, everything you put in it,
591
:uh, forces itself into a forced order.
592
:omer-frank_1_02-07-2024_180911: Yeah.
593
:Track 1: what I, um, so my
contention, my, my, my theory
594
:about this is that, um, you want
595
:omer-frank_1_02-07-2024_180911: Unless I
detach it and if I detach a component or
596
:a frame or whatever, like it goes into
the, the canvas mode and it goes around
597
:freely.
598
:Track 1: you need to, well,
what do you mean by detach?
599
:Because,
600
:omer-frank_1_02-07-2024_180911:
if, if I get, if I get a com, if
601
:I have a component, uh, on Figma.
602
:Right.
603
:And so when I detach it, I
know what I can do with it.
604
:There are no instances, and I'm not
like, but what you're saying is that if
605
:you put something inside a div and then
606
:create a component for a repetitive use,
607
:what happen if I detach a component,
608
:Track 1: Well, nothing.
609
:It will just.
610
:Nothing will happen in the sense of
the layout, uh, the layout choice.
611
:If it was display, uh, block or flex
or whatever, and the position choices
612
:there will all remain exactly intact.
613
:It will just seize being, uh, instance.
614
:So it will seize being
part of the component.
615
:It will just be like a frame.
616
:In, in, in Jux land is just a
div because again, frames are so.
617
:Even think about this, there's
no frames in life in, in, in CSS
618
:and in code, there's divs, right?
619
:So even the, even the taxonomy, like
the, the, the way things are named, um,
620
:we are all for, uh, at least trying to
make them close to, to what's in reality.
621
:Because, you know, you need to
eventually communicate with developers.
622
:Um, you don't want to be
talking, um, Hebrew while
623
:they're talking English, right?
624
:It's, it's weird.
625
:Like you would want.
626
:The same language, like
627
:omer-frank_1_02-07-2024_180911: I
628
:say that, like I said, like I talked
about it like four or five years ago when,
629
:uh, I was teaching, uh, sketch, like I.
630
:told them like, you, you
should speak the same lingo
631
:with your developers.
632
:And again, you know when you're,
when you're looking at design system,
633
:like each controller, each component
634
:has a different name and it's a mess.
635
:Like it's a big, big mess.
636
:Track 1: I'll, I'll, I'll, I'll give
you even some more interesting, uh,
637
:deep down, uh, interesting facts.
638
:So, for example, um, there's a checkbox
component, right, that you would
639
:probably have if you have any sort of,
uh, forms in your SaaS application.
640
:Or, or website even.
641
:Right.
642
:Um, so you'll, you'll create a
checkbox, uh, and then what the
643
:developer will do is that it will
use, um, the native HTML element
644
:called input, uh, input type checkbox.
645
:And it will actually, the HTML itself
will render it as a checkbox, right?
646
:And then you can style things
if you want, yada, yada, yada.
647
:There's, uh, there's way to style check
boxes that are, um, ugly, uh, underneath
648
:the surface, but pretty above the surface.
649
:You would have to hide the actual
check box and create a div and
650
:put an asset inside of that div.
651
:Uh, to make it look like your specific
checkbox, because you don't want to
652
:rely on the defaults of the browsers.
653
:This is all ugly.
654
:But what's more interesting is the
fact that if you have, for example, a
655
:component, like a toggle switch, right?
656
:A toggle, um, circle that goes
and, um, you'll think, okay, so in
657
:Figma I will just create another
component called the Toggle, right?
658
:But in real life code,
there are no toggles.
659
:There's not such an
element in HTML elements.
660
:That is called a toggle.
661
:What, what, how people do
toggles, they create a checkbox.
662
:So literally it's written
there, input type checkbox.
663
:They hide the actual rectangle
of the checkbox, but toggle in
664
:its essence is just a checkboard.
665
:It's just a checkbox redesigned.
666
:That's it.
667
:And like, shh.
668
:Nobody tells you that, right?
669
:Um, so you thought you
just designed the toggle.
670
:What the developer did
is undid your design.
671
:Created the checkbox, restyled it to be
like your toggle, created an animation
672
:on the, on the, you know, circle moving
and, and was done with that, right?
673
:So this is just, just, you know, little
details of, and there's plenty of those.
674
:So if you, if you actually start
comparing, uh, the, the actual components
675
:of how do they actually get built,
layer by layer, node by node in the
676
:DOM, uh, in real life code and how
they're built in Figma, you'll, you'll,
677
:you'll discover a world of difference.
678
:omer-frank_1_02-07-2024_180911: Yeah,
679
:I, I
680
:think
681
:Track 1: me more.
682
:So tell me more about
speaking the same lingo.
683
:omer-frank_1_02-07-2024_180911:
yeah, I think that, like I'm thinking
684
:about your university, like I'm
thinking about the Webflow University,
685
:which is so amazing.
686
:I think
687
:that what you, what you need to
build, like to educate designers
688
:and wow, it's gonna be a tough
689
:Track 1: Well, look, actually,
I think Webflow helped us a lot.
690
:The fact that, um, first of
all, it had a great role.
691
:Like it's a great role model of
how to build a university, right?
692
:So they did a phenomenal job
with their, you know, university.
693
:I've seen all the videos.
694
:Um, it was production
quality through the roof.
695
:And, um, and if, if we ever start,
you know, we're, we're very young.
696
:It's like you, you webflow
is, is a 10 or 11-year-old.
697
:Behemoth in, in, in a comparison to us.
698
:Right.
699
:So, um, so we have some time, uh, but,
um, but yeah, it's, it's a great role
700
:model of how to do it beautifully.
701
:But I think they already educated a
lot of the potential, uh, designers.
702
:And also Figma did a lot of the
education that is going to be relevant
703
:for us because, um, think about this.
704
:If like Figma did something very
hard, they made auto layout,
705
:which is essentially a form
of flexbox, as we've said.
706
:Uh, something that is absolutely
common in the way regular, regular
707
:designers product, ui, ux designers,
uh, build their screens, right?
708
:So that's new.
709
:Like if you compare it to everything
before that, um, the naive versions of
710
:Sketch, xd and of course Illustrator and
711
:omer-frank_1_02-07-2024_180911:
But there are no.
712
:implications to do it wrong.
713
:That's the difference.
714
:Track 1: Well, there's no implications for
the designer that he can see immediately.
715
:There are implications where
he starts to handing it over to
716
:developers and it's all wrong.
717
:Um, although I would,
718
:omer-frank_1_02-07-2024_180911: his fault.
719
:You know?
720
:It's other, it's the developer's fault, so
721
:Track 1: yeah, I would, uh, I
would, I would starkly disagree,
722
:uh, but, um, look what I would
723
:omer-frank_1_02-07-2024_180911:
But you know what I mean.
724
:Like I'm
725
:talking about the fact that it is
doing something and eventually it
726
:goes to the developer and, you know,
let the developers like work it out.
727
:Track 1: Look, eventually.
728
:Um, I think that it also hurts
the designers themselves for many
729
:omer-frank_1_02-07-2024_180911:
I, I agree.
730
:I agree.
731
:Track 1: for the, even for like practical.
732
:So leave, leave aside the handoff itself.
733
:For practical reasons of
I just created something.
734
:I want to make something larger and I
want by making it larger, uh, to make
735
:it push everything else immediately.
736
:Right?
737
:If I constructed my auto layout, um,
scaffolding correctly, I'll be able
738
:to do that quickly and be done with my
change in five minutes if I created it
739
:incorrectly with a bunch of classical
frames, so frames without auto layout.
740
:Um.
741
:I'll make something higher and then it
will overflow into something else, and
742
:then I'll have to move that one and move
the one after it, and the one after it.
743
:And it's a whole cacophony.
744
:And if you want something much, um, much
more interesting, like to take something
745
:and to see how it works in a wider
resolution, if you didn't build your
746
:auto layouts correctly, you're screwed.
747
:You're going to waste so much time,
uh, manually recreating stuff,
748
:and you'll probably get it wrong.
749
:Um, which is by the way,
750
:omer-frank_1_02-07-2024_180911:
But it stays inside the
751
:business, inside the company.
752
:Like real users won't see it.
753
:That's the difference.
754
:Track 1: Right, right.
755
:It will just take you more time as a
designer so you will waste more time.
756
:Um, and you know, if you're wasting time,
um, moving around frames that you poorly
757
:constructed, you're not doing something
else that is valuable for the company.
758
:Like, I don't know, talking to
customers, solving something actual
759
:omer-frank_1_02-07-2024_180911: But
your managers wouldn't know that.
760
:Track 1: Right,
761
:omer-frank_1_02-07-2024_180911: When
it come, when things come from real
762
:users, your managers will know it.
763
:Track 1: Yep, that's true.
764
:omer-frank_1_02-07-2024_180911:
the whole difference.
765
:Track 1: Well, the, it will just make
the velocity of your shipping slower.
766
:And so that is something that might,
so that might be a KPI for you as a
767
:designer in a, you know, in a, in a
self-aware, uh, squad that sort of
768
:looks at the, uh, the, uh, the stop
stopwatch, you know, between each, each
769
:and every other delivery you give, right?
770
:So, uh.
771
:Um, it affects,
772
:omer-frank_1_02-07-2024_180911: Yeah.
773
:Track 1: yeah.
774
:omer-frank_1_02-07-2024_180911: I, I, I,
I really believe, like I, I believe in.
775
:I believe in your product,
but the only thing that I'm
776
:concerned is the cultural thing
777
:that people want.
778
:Like they, they wouldn't
want to try new things.
779
:It's so difficult.
780
:It's so hard
781
:to to change a culture,
to change a market,
782
:Track 1: Yeah, definitely.
783
:omer-frank_1_02-07-2024_180911:
educate people.
784
:Um, and I think that fig and I
think that the Figma success is.
785
:Based on making things easier.
786
:Like they lied to designers,
787
:let's, let's be honest for a sec.
788
:They lied.
789
:It's a lie, right?
790
:In a way,
791
:Track 1: Well, they didn't lie
more than anyone before them.
792
:So like, sketch lied even more if you,
if you like, if you call that a lie.
793
:Right.
794
:So,
795
:omer-frank_1_02-07-2024_180911:
I understand what you're saying.
796
:The thing is that people
don't want the truth.
797
:I heard that Jeff Bezos, uh, he said
that people don't want the truth.
798
:We're a social,
799
:uh,
800
:Track 1: a social animal.
801
:Yeah.
802
:With Lex
803
:omer-frank_1_02-07-2024_180911: animals.
804
:We, we'd like, we, we would prefer to,
to, to, to listen to, to, you know,
805
:things that we'll love and adore, but
we wouldn't want to know the truth.
806
:Track 1: That's true.
807
:I.
808
:omer-frank_1_02-07-2024_180911:
talking about the truth,
809
:Track 1: Right.
810
:So one, so one way to combat, so
first of all, the friction that
811
:you're eloquently, uh, describing
here, uh, is all too real, right?
812
:I'm the first to admit it.
813
:Um, as an evangelist of Figma and
Webflow, I know what the friction was
814
:to make people use properly figma and
webflow, um, the, the way to combat
815
:this, so like, okay, so what do you do?
816
:Right?
817
:How do you, how do you win?
818
:Um, as far as I'm concerned, the
best way to do that is to offer
819
:something so valuable, orders of
magnitude more valuable, um, that
820
:people are willing to take the hit.
821
:They're willing to, to go through
the friction, learn the new ui,
822
:the new way of thinking, the
whatever, because they're gonna get
823
:something very valuable in return.
824
:And if we're correct in our
assumptions, uh, in Jux.
825
:Um, the thing that it will get
in return is that it will, it
826
:will achieve the same level.
827
:It will be the holy grail
basically, as far as I'm concerned.
828
:Otherwise, I wouldn't be building
it with my friends and colleagues.
829
:Um, the holy grail is the, is
is such, you want something that
830
:eventually you'll be the total
controller of as a designer, right?
831
:So you eventually will use all the real
elements the same way that you will drag
832
:a checkbox and it will be a real checkbox.
833
:And you will drag a dropdown.
834
:It will be a real dropdown or a select
box or an input text input, right?
835
:Whatever, whatever element you'll drag
and make it a component and create
836
:variance in a variant, uh, matrix.
837
:The same way you would do in in Figma,
uh, when you will do that, and you
838
:will be the total controller of all the
styles and all the tokens that you're
839
:using for all the different decisions.
840
:And eventually, if you push that and
the developer pulls that, which is
841
:the, the flow that we have in jus.
842
:And the developer pulls that
and he pulls that already done.
843
:So the front of the front end is done.
844
:The only thing the
developer needs to do now?
845
:omer-frank_1_02-07-2024_180911:
yeah, but the
846
:question is, do they
want this responsibility?
847
:Track 1: Well, I think they do.
848
:omer-frank_1_02-07-2024_180911:
but the question is, do I
849
:want this responsibility?
850
:Do I
851
:Track 1: I think that
852
:omer-frank_1_02-07-2024_180911:
total control over my design?
853
:Track 1: I think they do, and the
reason I think they do is that if you
854
:look at almost all the things that,
um, people are writing on, you know,
855
:medium and other platforms regarding,
Hey, this is what we did with the
856
:developers to make sure our figs resemble
life even more so that we're less
857
:surprised when the developers actually
develop whatever it is they develop.
858
:Like the whole promise of design systems.
859
:Like if you, if you actually.
860
:Like rehash it in simple language.
861
:The whole promise of design
system is being less, uh, confused
862
:and being less surprised when
eventually things get developed.
863
:Right?
864
:Because if you standardize
things, what is standardization?
865
:Standardization is minimization
of surprise, actually.
866
:Right?
867
:omer-frank_1_02-07-2024_180911: In a way,
868
:Track 1: In a way, right?
869
:So if I standardize something, that
means that I can, uh, predict the
870
:future better because of the standard.
871
:I can expect something, right?
872
:This is why you can drive in other
countries, but your own 'cause you
873
:expect the whole way, uh, roads work
to be consistent, to be the standard.
874
:That's why standards are good.
875
:And if, um, if you know that
you are the sole controller of
876
:the stylistic part of the ui.
877
:There's no developer to
even, so there's no handoff.
878
:Nobody's taking your designs
and reconstructing them.
879
:There is, it's already constructed in ju
the only thing the developer is left to
880
:do is to evaluate it, make sure it makes
total sense, and then hook up all the
881
:logic and the data and all the things
that developers actually like doing.
882
:Right?
883
:'cause there's a whole, there's a
whole area that we didn't speak about.
884
:And it is, do you think front-end
developers themselves, like the
885
:process in which they have to take
the designs and Figma painstakingly
886
:inspect them in dev mode or not in
dev mode, whatever, and eventually
887
:rebuild everything by themselves and
code only to be then yelled at by the
888
:designers that they missed something.
889
:Right.
890
:Do you think they, they like that process.
891
:If you talk to enough de developers,
the answer will be a stark no.
892
:So the, the, the less, the less
reconstructing they need to do,
893
:the happier the developers are.
894
:omer-frank_1_02-07-2024_180911: Yeah.
895
:So I, I, I believe in, uh,
I believe in the, this idea.
896
:I hope that it'll work, you
know, my, uh, stance on it.
897
:So, okay.
898
:Let's, uh, let's wrap this up.
899
:Beautiful.
900
:I, I really enjoy like,
having this conversation.
901
:And what, what would you
like to say to designers?
902
:Is in general, like about the
future of UI design and about
903
:your, the way that you see things.
904
:Track 1: I think that, um, so, okay, one,
one beautiful equation that I learned.
905
:Um, some, I think five, six years ago as
a ui, as a ui ux product designer with
906
:a lot of slashes, uh, in between them,
um, is that there's an, there's like,
907
:if everything is right in the company,
there's uh, an equilibrium between
908
:authority and accountability, right?
909
:So if everything goes correctly,
um, you can call the shot.
910
:But it's your ass if that shot,
if that decision was wrong, right?
911
:So you have the accountability,
but you have the authority.
912
:Um, bad places is places where you have
a lot of accountability but no authority.
913
:Uh, and two, two easy
places is places and user.
914
:This is for some bosses, is that when you
have authority, but no accountability,
915
:you can always blame the person down
now, but, but if everything is good,
916
:there's an equilibrium between the
accountability and the authority.
917
:Why is that important?
918
:I think that what designers will gain
in tools like jocks or others, right?
919
:We're not the only people who think
how to bridge that gap, right?
920
:Whatever tool eventually
wins in that, in that regard.
921
:Um, a future in which a designer
can up his level of accountability
922
:will also be a future in which
he can up his level of authority.
923
:And boy, people love authority.
924
:So the only way to reach higher
authority is to reach higher
925
:accountability as an equilibrium.
926
:Right?
927
:So
928
:omer-frank_1_02-07-2024_180911: Yeah.
929
:Erez thank you so much.
930
:Um, that's it for, uh, this episode
of the Juicy Patterns Podcast.
931
:And, uh, thank you for listening,
and I see you in the next episode.
932
:Thank you so much.
933
:Track 1: thanks for having me.