This is for the UX/UI designers that are thinking about moving over from Figma, Sketch or Adobe XD.
I’m using Penpot in my own time as the sole design application for some of my own inhouse professional projects. I thought it might be a good idea to document the process as I go along.
Starting I created a new project with ease and started an Atomic Design based project file that I adapted from the official Penpot Design System file and made into a ‘template’ that I copied into the project and renamed.
Before I start a completely new design project I thought it would be a good idea to partially create a design project from my professional work from scratch in Penpot. It is currently a huge project from many different designers in built Figma.
I have started building the different design elements in the ‘Atoms’ sections along with a grid layout in the Layouts and Pages.
I have come across a few awesome bit and also a few problems. I will start listing them as I go along with a diary/documentation of the progress from switching to Penpot from Figma for a full project.
Great selection for libraries (such as material icons etc)
Cons:
Sometimes has troubles with memory and freezes, not a good sign as I have just started building components
Some simple things like creating button states are a great deal more difficult than used to
Sometimes dragging out a component onto a board, just adds the component next to the board (when boards have been spaced out with auto layout) - But if i cut the component, select the board and paste it’s fine
Boards not showing in the prototype preview???
All in all, the designing parts if pretty good, a very good standard for the age of the app but the prototyping at the moment seems quite early, almost beta, which is fine for just me, but difficult when working with a client.
It may not be the most well-structured comments at first, but it will definitely be something helpful, I hope. If there are any comments or particular areas that would help, please do let me know
I would like to add to this thread if you don’t mind.
I work a lot with colors, and my biggest issue is there isn’t a way to shift+move the gradient line to lock into perfect horizontal or 45 degree angles, or snap to corners of shapes.
Same goes for points on a shape when editing. It will be great if shift locks the point to x/y axis.
One thing that can be added to gradients to one up on Figma is allow us to enter the coordinates of each stop, so if we have 5 colors in a gradient we can put them at positions (0,25,50,75,100) for example. This allows us to refine the gradients and have a system to them.
(A visual bug but not a big deal) is when typing text in fluid components, the corners look weird until off-clicking, then it re-renders. Not an issue, but it threw me off at first.
For prototyping we really need to have auto-animate functions.
When planning for animations, I really suggest looking at being able to do micro-animations whereby we can delay certain objects or allow them to come in with different methods. (not the greatest example, but keynote does amazing to have a simple micro-animation that I had given feedback to figma so many times but have yet to do it. Perhaps its a technical challenge)
One more note I forgot, being able to name our library assets and see details will be very helpful. For example in the screenshot I have two headings, but I don’t know which is which, what their sizes are and other properties since they just go by the name of the font itself.
I used to be a Sketch user, then switched to Adobe XD, followed by Figma. Now, I believe it’s time for me to transition to Penpot. I’ve had some reservations about Figma lately. It seems that Figma has become dependent on plugins and addons for its functionality. Without third-party addons, the core usage of Figma feels quite basic. This situation reminds me of my experience with Sketch, which eventually led me to stop using it after relying on it for years. I was even paying a monthly fee for addons and app usage, which seemed unreasonable. Now, Figma appears to be heading down a similar path. In contrast, I’ve been using Penpot and I really appreciate its simplicity and user-friendliness. I’m willing to invest time in learning this new tool and I don’t expect it to match my previous experiences. It’s not fair to judge an app solely based on how it compares to others I’ve used before. The only minor annoyance I’ve encountered with Penpot is occasional difficulty accessing projects. Sometimes I need to retry or clear the cache to gain access. Apart from that, I find it to be a professional tool.
Add ons and extensions are a good thing, but over loading the app with loads of them or the apps functionality needing them is never a good thing. I’m genuinely looking forward to Penpot opening up the app for plugins and feel this will be the big push that many designers are waiting for.
Hey you can rename your fonts and colors. It might not be obvious, but if you right click on them in the assets panel, you can select the edit or rename options (I’m answering you from my mobile so I’m not 100 sure of the terminology but you got the idea).
I’ve been a bit caught up with bits but still have been tinkering with Penpot.
I’m thinking of breaking down the features into a real life project video. The main thing I have come to the realisation is that comparing Penpot to Figma is foolish. The Figma team is a powerhouse and they are many years ahead of Penpot so inevitably this will also make it like Penpot is failing on comparison when whilst certain features are still needed, this just isn’t fair.
So the best solution I can think of is to just make something and document the process rather than falling into the “Penpot doesn’t have this, this and this” - Although as I type this, I know I will compare and highlight areas that Figma has and Penpot doesn’t. I’ll just try and make it more of a ‘suggestion’.
These tools aren’t beneficial if you become entirely dependent on them. With my 30 years of experience in design, I can confidently identify the potential issues that these small aids may cause in your projects. The situation has been ongoing since Photoshop began to decline after version 5.5. While plugins and add-ons are nice extras, they’re not ideal if you’re only using your application as a mere host for these tools to function. I’m speaking from a place of knowledge. You, on the other hand, may not be fully aware of this.
I’ve been designing UI and digital products for close to 30 years and whilst I get what you are saying, I’m not going to dismiss something that could save me time, make life easier or just organise my work better.
Your theory is like saying why use React or Vue, just code in vanilla JavaScript, actually scrap that, why are you reliant on that, you should be using C# now get to the office on your horse, I don’t want to see you relying on a car! What do you want for lunch? I’ll start the bonfire.
If they hopefully build out the plugin structure awesome, it just adds choice. Those that don’t want to use it, that’s completely up to them but choice is always good.
No, what I’m saying is that If you heavily depend on add-ons or plugins to the point where your app is just a shell, then you might not actually need the app. Many platforms, such as Adobe, Rapidweaver, and Sketch, have fallen into the trap of becoming reliant on add-ons. While I understand the need to use such tools in a business context to speed up work, it’s crucial for developers to not let their original work be overshadowed. It’s disheartening when your creative tool becomes just a foundation for others’ work, leaving you holding the ladder while others climb.
