Penpot official launch!
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Subtitle |
| |
| Title of Series | ||
| Number of Parts | 542 | |
| Author | ||
| License | CC Attribution 2.0 Belgium: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/61919 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
00:00
Dean numberNormed vector spaceComputer architectureStandard deviationGraph coloringComputer fontLibrary (computing)Connectivity (graph theory)Physical system1 (number)Software developerToken ringGame theoryMassRule of inferenceContent (media)Multiplication signProjective planePlastikkarteProduct (business)Link (knot theory)CASE <Informatik>Different (Kate Ryan album)Arithmetic meanOverlay-NetzCodePrototypeAbstractionInteractive televisionRight anglePerfect groupGame controllerPixelFrictionWhiteboardElement (mathematics)RootSound effectTerm (mathematics)Doubling the cubeVector potentialEvent horizonBitScaling (geometry)Cross-site scriptingProcess (computing)Computer animation
06:48
PermianSoftware testingPay televisionInheritance (object-oriented programming)Open sourceCollaborationismBranch (computer science)Software developerReverse engineeringCodeFunction (mathematics)FeedbackProcess (computing)Integrated development environmentTransformation (genetics)Proper mapGoodness of fitRepository (publishing)Right angleReal-time operating systemCategory of beingCross-site scriptingPerfect groupWeb browserReal numberDemo (music)Selectivity (electronic)Physical systemData storage devicePoint (geometry)Multiplication signSigma-algebraDynamical systemLibrary (computing)BitCASE <Informatik>SpacetimeDuplex (telecommunications)Chemical equationOverhead (computing)Lecture/Conference
13:30
Product (business)Convex hullBitMobile appOpen sourceMereologyCapability Maturity ModelView (database)SpacetimeEndliche ModelltheorieDistribution (mathematics)Greatest elementStandard deviationProduct (business)Software developerPlug-in (computing)Expert systemMultiplication signComplete metric spaceOpen setOnline helpCASE <Informatik>PrototypeComplex (psychology)Physical systemAbstractionSerial portEnterprise architecturePower (physics)Right angleContent (media)CodeGame controllerTelecommunicationControl systemLecture/ConferenceMeeting/Interview
20:11
Product (business)Computer animationLecture/ConferenceProgram flowchart
Transcript: English(auto-generated)
00:10
Wednesday when we did the unboxing event that since we do hope that everyone will be welcome to a PenPod project we needed to make sure that the invite system could cope
00:22
with all the different use cases that you get with link expiration, who got the invite, do I need to resend 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
00:42
not only a tool for designers to just express their creativity but also for developers to join the design process to be welcome there so this is very important for us. But of course we had many improvements in the interactive prototype feature this is just one
01:00
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.
01:25
This is happening this is this is happening this is also this is so amazing so this is just about a token I do mean I mean do go and enjoy PenPod but it has many many features on advanced prototyping but this is one thing that actually came from this
01:44
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
02:01
this actually was a bit tricky because as you know PenPod 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
02:22
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 all 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 PenPod that we
02:54
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
03:05
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 it and can only go as far as your brain can cope with stuff so having like your components your libraries
03:25
and assets readily available here where 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 is actually comes from a the PenPod design system
03:49
which is the first one example that you can one click import if you go to PenPod you do the onboarding it's very nice there's a by the way it's a nice bottle challenge that you can try
04:00
and do anyone here did the bottle challenge okay some of you do it's a nice little game where you learn by fun like it's like you learn the PenPod basics using this bottle challenge but when you actually go into more advanced topics this is what you really need so but yeah go and check
04:21
the PenPod design system because it's kind of neatly organized okay and then we get something so cool that no one had which is flex layout so every design and prototyping system out there would have this killer feature where you can smartly apply rules to your design
04:46
say i want me to decide to flow this way and then you would change the content within that design and that 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
05:03
productivity boost thanks to that you know you can call it auto layout smart layout fancy layout whatever they could not not have this once they were uh you know experience you know exposed to that it's like not having this once you know about this intelligent layout system is like going
05:24
really back in time and having to do everything manually so this the problem with this as we as we thought at PenPod was that unfortunately these layout systems were design centric
05:41
which is 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
06:03
developers would go there and say i need to translate this into code let's let's let's hope there's no issues but there were issues not only technical issues but also um friction issues like back and forth this am i in control no i'm not neither the designer nor the developer
06:27
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 PenPod came with a completely different approach and said what if we have code first design layout
06:45
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
07:01
and we came up with flex layout and please do applaud 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 i made this for you
07:26
please use it i hope you're you're excited about this but actually designers wanted this so no compromises here everyone wins um we got a 50 50 to 60 volunteers for the better
07:41
testing of this i mean i'm not saying you could not test it using your our development branch but like a 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 that was nice that was a nice given the fact that
08:07
in the world so that you know it statistically there's one designer per 10 developers roughly we don't think that's a good ratio at college we have one to two so pretty pretty different somewhere in between perhaps one to four would be great but of course to better
08:24
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 you know asking to better test this in the first place so if you're familiar with flex css you can see
08:42
properties there and then of course you get i'm 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
09:02
code pane there the code inspect 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 the design using flex layout and as the designer does that the developer can see that code being changed just
09:21
it's a different uh tab selection there that's that's all it takes so i'm not saying that a developer should like be like quickly copy and pasting when it changes but it's nice for for the demo now you see that it's real um there's no like export concept of anything and really
09:46
that's it thank you it happened i do hope we have some time for questions because i planned for that you have 10 minutes that is great with the whole point okay uh i i'd rather not pick
10:08
if you could if you could uh store that they're not really really quickly so that's thank you for the talk my company is providing a design system and they provide it for sigma
10:21
or figma sorry yeah and uh is there any kind of process i can follow to use the assets in penplot or do we have something that exists to guide me so the question was about uh perhaps migrating the design system from we already have a company design system so i have to respect
10:40
this uh library is the assets and the design itself i just want to use it in penpot you could uh you could uh so if you are using a design system uh on figma right now and you want also to use penpod uh there's a ton of overlap so it might feel weird for you to use the two if you're not migrating the answer is uh i'm not sure it makes sense because this is about
11:07
team dynamics this is about people collaborating so unless you want to export these figma assets and use it like privately for you with no going back if that is i mean you're smiling so i guess that yeah that's what i want i want to live in my private open source world
11:26
but that that seems to me i get i get that you you can save some money doing that but honestly it's going to not save you much time so uh you have to keep a balance there because it's going to be back and forth not within penpot but within two tools that compete in the
11:45
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 take that you have sticker i'll give you a sticker like the the shiny one you know okay by the way who was may
12:04
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 like question yeah so congratulations for the release so my question is you showed us um there was a live update of this of the output code
12:25
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 paste it into somewhere so the question is we saw the uh real time um transformation between the design and the code is it full duplex can i change the code
12:46
uh not for now not for now not for now but of course you know 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
13:02
you connect that with a git repository and you change that in the git repository that comes back and changes the design um what if as a designer you change something that also goes to the repository and triggers a cicd process ah okay so we thought about that because it's kind of
13:27
what comes next obviously uh but yeah so good question uh we've got you covered okay the person
13:41
i should just run over and say this person thank you
14:09
so resources for helping teams migrating from other tools to penpod yeah yeah i mean so figma what is that um figma owns 80 of the market for designers 80 percent
14:26
adobe now owns 87 of the market uh thanks for that so obviously yeah i get that uh we have a plugin an expert plugin it's uh we hope that the community can help us just improve it so
14:42
you can basically export all that from we actually don't know how much time we 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 by any means complete so it will give you like the basics but it might be enough and then i think everything like exporting stuff and just
15:05
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 some i mean depending on the complexity of the prototypes and design this is for prototyping
15:22
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 contribution from the community so if anyone here is um interested in like those um like serialization uh challenges
15:41
for the svg and the uh json uh because it's all it has really that would be great from the abstraction model that we have from figma to actually proper you know open standards fine so yeah those um good um i actually realized oh okay answer your question
16:02
so there was somebody over here that had and then congrats on the launch thank you really great to see um i'm curious about the business side of things you mentioned figma and this competitor um how do you plan to compete with figma and be successful at it and at the same time and drive your business forward
16:21
so calleres is a company um actually their general title is calleres open source that's the um sl because we're a spanish company so the idea for us is to make sure that we follow this um we think it's going to be uh kind of a enterprise edition that will give companies things that the power user does
16:43
not want or doesn't need we call that privately publicly taxed the controller okay so that is uh 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 uh perhaps in two years
17:05
if we are relevant we hope we are relevant we'll see uh see you in two years post them you know but if we are really relevant then we will look for those tax the controller
17:20
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 is have been publicly said many times the power user gets open source forever is the companies wanted to have this control mechanism that will have to pay for
17:44
something that is exclusive to them whether it's self-host or sas 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 you know experience um so yeah um it's it's there
18:02
actually in the community space community dot pempo dot app we elaborate a bit more on that but yeah the only way this will be sustainable as a company is that we are really relevant surprisingly the the design space in our view is quite an immature like you have
18:21
one tool you know winner takes all then the next tool and the next there are subsequent winners we hope that we add fragmentation to that but still and to be be relevant so we have like one minute left if you did i answer your question you answer the second part and this is the first part of how you actually intend to compete with
18:43
figma how do you intend to maybe drive business away from figma well i think uh we'll we the playbook that we have is quite unique and unprecedented like this is open source design and prototyping tool so we hope that we have a bottom up uh distribution model like
19:05
people really saying this is actually much better and we are hoping this is this is part of our yeah this is hope that you remember that ratio one designer pretend developers that developers actually loving open source do bring pempo to the forefront without the help
19:23
from open source developers i'm sure this is not going to happen not because design open designers don't like open source just because the the economics of that will take much longer so yeah that one to ten ratio is the only way is the only time i would i'm happy with that ratio
19:40
like in this particular case it's like so we are counting on open source developers really if you want to have a chat afterwards i'm sure pablo is very very happy to answer your questions 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