Last Wednesday, when we did the unboxing event, that since we do hope that everyone will be
welcomed to a PEMPOT project, we needed to make sure that the invite system could cope
with all the different use cases that you get with that link expiration, who got the
invite, do any tree send it, etc., etc.
Otherwise, the onboarding experience would be tough and people would not be joining the
design project.
And this is very important for us because this is not only a tool for designers to just
express their creativity, but also for developers to join the design process to be welcomed there.
So this is very important for us.
But of course, we had many improvements in the interactive prototype feature.
This is just one example for the overlay advancement.
So here you can see how a design asset is being self-referred and you get a very nice
pixel-perfect overlay on a button and then an animation that comes with a mouse click.
Right?
Do you like this?
I think you do.
Yeah, I think you do.
This is happening.
This is...
This is happening.
This is...
This is amazing.
So this is just about a token.
I do mean, I mean, do go and enjoy PEMPOT, but it has many, many features on advanced prototyping,
but this is one thing that actually came from this official release.
As it did nested boards, so here you can see in this animation like an independent board
being dragged to another board and having this nesting effect.
This actually was a bit tricky because as you know, PEMPOT uses SVG like natively.
So when I say open standards, we do really mean open standards.
And it was tough to have this root element having everything, so to have different independent
components being designed, we had to do this nested board trick, but that trick actually
gave us a lot of potential because when you have nested boards, you can do much more advanced
compositing in general, and so we have like the best of world worlds.
We have SVG, but also these neat tricks for compositing.
Also let me remind you, for those of you that don't know much about PEMPOT, that we have
like some innovations in terms of where to find stuff.
When you do engineering, you think about scale, like I need to scale up.
I need to automate.
I need to have everything like in tiny bits so I can combine them any way I want.
With design, with big design architectures, you have that same challenge, otherwise it
gets just manual, like design is just manual, and it can only go as far as your brain can
cope with stuff.
So having like your components, your libraries and assets readily available here, whether
there are fonts or colors or design tokens or whatever, it's really cool.
Also a whole lot of libraries, and you drag and drop, or you create new ones, and they
are there on your left pane.
So this actually comes from the PEMPOT design system, which is the first one example that
you can one-click import.
If you go to PEMPOT, you do the importing, it's very nice, by the way it's a nice bottle
challenge that you can try and do.
Anyone here did the bottle challenge?
Some of you do, it's a nice little game where you learn by fun, like it's like you learn
the PEMPOT basics using this bottle challenge.
But when you actually go into more advanced topics, this is what you really need.
So go and check the PEMPOT design system because it's kind of neatly organized.
And then we get something so cool that no one had, which is FlexLayout.
So every design and prototyping system out there would have this killer feature where
you can smartly apply rules to your design.
Say I want me to decide to flow this way, and then you would change the content within
that design, and those rules would apply automatically.
So for designers, I'm seeing people are saying yes, yes, I know why we're talking here.
Some designers would feel a massive productivity boost thanks to that.
You can call it auto layout, smart layout, fancy layout, whatever.
They could not have this once they were exposed to that.
It's like not having this once you know about this intelligent layout system is like going
really back in time and having to do everything manually.
So the problem with this, as we thought at PEMPOT, was that unfortunately these layout
systems were design-centric, which is not bad per se, but was not developer-friendly.
Basically it was not team-friendly, meaning designers would do their smart layout system,
and then all the vocabulary and the ideas, the abstractions were just for designers to
understand and to enjoy, and then developers would go there and say, I need to translate
this into code.
Let's hope there's no issues, by the way, issues.
Not only technical issues, but also friction issues, like back and forth.
This, am I in control?
No, I'm not.
Neither the designer nor the developer.
They would feel like they would have to constantly double check, double check.
And you don't scale up your design or your code if you have to do that.
PEMPOT came with a completely different approach and said, what if we have code first design
layout?
What if already the design is the code?
You can do a ton of stuff with Flex CSS.
It's actually quite advanced.
So what if we say, let's do a developer first design layout system?
And we came out with Flex layout, and please do a plot here, because it's the first ever
tool to have this, and it's open source.
And the great thing about this is that this is not a gift from engineers to designers
saying, I made this for you, please use it.
I hope you're excited about this.
But actually, designers wanted this.
So no compromises here.
Everyone wins.
We got 50 to 60 volunteers for the beta testing of this.
I mean, I'm not saying you could not test it using our development branch, but like
the proper environment setup for people to go and do some simple tests like this one
and give us feedback.
And the feedback was phenomenal.
I think 80% came from designers, and 20% from engineers.
So that was nice, that was nice.
Given the fact that in the world, so that you know it, statistically, there's one designer
pretend developers, roughly.
We don't think that's a good ratio.
At colleagues, we have one to two, so pretty different.
Somewhere in between, perhaps one to four would be great.
But of course, to beta test this, we couldn't have the one to ten ratio in our poll.
We needed to reverse that.
But we didn't have to work hard to achieve that, because designers were actually asking
to beta test this in the first place.
So if you're familiar with Flex CSS, you can see properties there.
And then, of course, you get, here I'm simulating to, this is a real-time collaboration, because
we do have real-time collaboration, of course.
And this is like two browsers.
It doesn't look like that, because I made it, like, pixel-perfect in a way.
But that code pane there, the coding spec, is actually a second browser just beneath,
right?
Nothing fancy.
But you can see how real-time that is changing.
So A designer is changing the design using Flex layout.
And as the designer does that, the developer can see that code being changed.
Just, it's a different tab selection there.
That's all it takes.
So I'm not saying that a developer should be, like, quickly copying and pasting when
it changes, but it's nice for the demo.
You see that it's real, there's no, like, export concept of anything.
And really, that's it.
Thank you.
It happened.
I do hope we have some time for questions, because I planned for that.
That is great.
Thank you for the point.
Okay.
I'd rather not pick if you could store that.
You had done a really, really quick test.
Thank you for the talk.
My company is providing a design system, and they provide it for Sigma, or Sigma, sorry.
And is there any kind of process I can follow to use the assets in Pentwork, or do we have
something that exists to guide me?
So the question was about, perhaps, migrating the design system from...
No, we already have a company design system, so I have to respect this library with the
assets and the design itself.
I just want to use it in Pentport.
You could, so if you're using a design system on Figma right now, and you want also to
use Pentport, there's a ton of overlap.
So it might feel weird for you to use the tool if you're not migrating.
The answer is, I'm not sure it makes sense, because this is about team dynamics.
This is about people collaborating.
So unless you want to export these Figma assets, and use it privately for you, with
no going back, if that is... I mean, you're smiling, so I guess that's what I want.
I want to live in my private open-source world.
We're going to pay for licenses for the whole team, so anyone...
Okay.
Do we have it for 10 people?
And that seems to me, I get that you can save some money doing that, but honestly, it's
going to not save you much time.
So you have to keep a balance there, because it's going to be back and forth, not within
Pentport, but within two tools that compete in the space of the use case.
But I mean, go ahead and tell me how it looks.
Perhaps I'm mistaken, but I think it's going to have a bit of overhead for you.
If you're willing to check that, you have a sticker.
I'll give you a sticker, like the shiny one, you know?
By the way, who was... May I ask a question?
Who was here three years ago?
Can you raise your hand?
Okay, yeah.
Okay.
We have stickers, like super premium stickers for you, all right?
Next question.
Yeah.
My question is, you showed us there was a live update of the output code when you were
in the designer.
Yes.
Is there a reverse also possible?
Can I, as a developer, give a piece of code to the designer and can he copy and paste
it into some... So the question is, we saw the real-time transformation between the
design and the code.
Is it for duplex?
Can I change the code?
Not for now.
But of course, it feels like you would like to do the other way around, right?
I'll actually go on with that question theme and say, what if you connect that with a
gift repository?
And you change that in the gift repository that comes back and changes the design.
If you save as a designer, you change something that also goes to the gift repository and
triggers the CICD process.
Ah.
Okay.
So we thought about that because it's kind of what comes next, obviously.
But yeah, so good question.
We've got to cover it.
Okay.
I should just run over and save this person.
Thank you.
So resources for helping teams migrating from other tools to PEMPOT?
Yeah.
Specifically PEMPOT for me.
Yeah.
I mean, Figma, what is that?
Figma owns 80 percent of the market for designers, 80 percent.
Adobe now owns 87 percent of the market, thanks to that.
So obviously, yeah, I get that.
We have a plugin, an export plugin.
We hope that the community can help us just improve it so that you can basically export
all that from.
We actually don't know how much time we've got for that plugin to be okay for Figma.
But it's still there.
So that is one way you can quickly test that.
It's not any means complete.
So it will give you the basics, but it might be enough.
And then I think everything like exporting stuff and just re-importing that is really
quick for teams to have the design system re-uploaded here somehow.
I don't think it's going to take much time.
If you have the motivation, it's just, you know, I mean, depending on the complexity
of the prototypes and design, this is for prototyping, and this is also for design.
So depending on the quality for each topic, it might get.
But yeah, the export plugin, we really hope that we get more help from the community.
So if anyone here is interested in those serialization challenges for the SVG and the JSON, because
it's all it has, really, that would be great.
So the abstraction model that we have from Figma to actually proper, you know, open
standards, fine.
So yeah, those, good.
I actually realized that I can figure it out myself.
Okay.
So answer your question.
So there was somebody over here that had, and then again.
And congrats on the launch.
Thank you.
I'm really great to see you.
I'm curious about the business side of things.
You mentioned Figma as an obvious competitor.
Mm-hmm.
How do you plan to continue with Figma and be successful?
At the same time, drive your business forward?
So Caledis is a company.
Actually the original title is Caledis Open Source.
That's the SL, because we're a Spanish company.
So the idea for us is to make sure that we follow this, we think it's going to be kind
of an enterprise edition that will give companies things that the power user does not want
or doesn't need.
We call that privately, publicly tax the controller.
Okay.
So that is something that we don't really need right now, because to be honest, there's
still a ton of things that we have to do for the product, but basically perhaps in two
years, if we are relevant, we hope we are relevant, we'll see.
See you in two years, force them, you know.
But if we are really relevant, then we will look for those tax the controller features
that big companies are fine.
They won't contribute with code.
They won't contribute with content.
They will contribute with money, right?
So we don't have like the details, but it's going to be like, and this has been publicly
said many times, the power user gets open source forever.
Is the companies wanting to have this control mechanism that will have to pay for something
that is exclusive to them, whether it's self-host or SaaS.
We don't care.
Actually by the way, there is also a desktop app by the community that encapsulated PEMPOT
with Electron, so you can also have the pure desktop native experience.
So yeah, it's there actually in the community space, community.pempo.app.
We elaborate a bit more on that.
The only way this will be sustainable as a company is that we are really relevant.
Surprisingly, the design space in our view is quite immature.
You have one tool, winner takes all, then the next tool, then the next, subsequent winners.
We hope that we add fragmentation to that, but still and still be relevant.
So we have like one minute left, if you can.
Yeah, I answer your question.
You answered the second part.
And this is the first part of the hug actually, you tend to compete with Figma.
You tend to maybe drive business away from Figma toward PEMPOT.
Well I think the playbook that we have is quite unique and unprecedented.
This is open source design and prototyping tool.
So we hope that we have a bottom up distribution model.
People are really saying this is actually much better.
And we are hoping, this is part of our, yeah, this is hope, that you remember that ratio,
one designer per 10 developers, that developers actually loving open source do bring PEMPOT
to the forefront.
Without the help from open source developers, I'm sure this is not going to happen.
Not because designers don't like open source, just because the economics of that will take
much longer.
So yeah, that one to 10 ratio is the only time I'm happy with that ratio, in this particular
case it's like.
So we are counting on open source developers to be.
Okay, if you want to have a chat afterwards, I'm sure Pablo is very, very happy to answer
a question.
So that's, we have five minutes for people to leave and people to come in.
So I'm going to say thank you Pablo.
Thank you.