How will Penpot outperform Figma?

First up, I want to say that congrats on all the work as having built user interfaces for graphics editors myself, this is no small task. I apologise ahead of time for the length of this post but I hope that it provides feedback from a heavy user of your competition. And please understand that my following questions and critique come from first being very impressed. I’m another Figma refugee who has been burnt by Adobe too many times when they buy my choice tools and run them into the ground.

Is Penpot just a Clojure Clone of Figma that’s open source or is it going to offer something solid that sets it apart from Figma?

Free and Open Source is a great idea but if it comes down to Figma vs. Penpot, I’m not going to trust my career and company on Penpot if it doesn’t help us get any more work done than Figma does. That’s what it’s down to: How will Penpot be the most effective software for what task?

Running the design department at a 50 person SaaS startup, I oversaw our migration to Figma from Sketch/Illustrator and that ended up leaking outside our department and radically changed how we worked across the whole company. We ended up with the c-suite, marketing and even sales using Figma. It unlocked communication and ideas in a way that nothing else could (all of our Office, Zoom and task management software). We had 20 odd seats and the productivity it released in the business more than paid for itself. There is just simply so many bits of work that wouldn’t have happened without Figma because we would have been bogged down, receiving Google Slides presentations and notes in our task management system.

Key reasons why Figma was better:

  • Multiplayer

  • Simple Onboarding (No installation, simple tools)

  • Infinite Canvas / Guides / Library (compared to Google Slides as a visual communication tool for non designers, as it was the way devs and c-suite did all their communication of problems)

  • Nested Components that meant we could have a single place to change and update across the design system.

  • Handover (Improvement over Zepplin but still very flawed)

  • Auto Layout, Responsive Frames

  • Single source of Status of Design/Ideation which anyone could access with great sharing

  • Google Sheets as a data source (free plugin but it sucked that it would only update items 3 nests deep)

So all of those things, are free for teams of three so how is Penpot competing?

  • Figma didn’t cost that much, when our team went beyond three, for how much time it would save us. It was a complete no-brainer to have the entire company use it, if it saved even 15mins per month per person.

Where we hit Figma’s Limits:

  • Auto Layout doesn’t work with Tables ( CSS Grid is the solution). Meant we had to rebuild screen designs 3+ times for different devices. Or have 3x the components we wanted.

  • Huge amount of wasted hours related to fonts because it doesn’t allow font stacks (multiple fonts in one CSS selector) which is key in web. It needed a way to preview a screen in different states (eg. OS limits of fonts)

  • The need for frames to have variables that flow down to items within.

  • Dark/Light variation management was a nightmare

  • Variations created more work than it was worth. Instead of it making our job easier managing all the different states of a button, it was so dumb to have hundreds of versions that needed to be manually set up. As it’s an exponential function of each new variable you add to a single componet. It was so short sighted how they implemented that. It needed to be nestable and that all child variables would be available at the top frame. Which here connects to the system for controlling variables at root frames.

  • The ability to create duplications of a tree of components. This was improved with a plug-in but it struggled to go deep or do this to a selection.

  • How to manage creative ideation and delivery. When you’re making new screens alone and then presenting to colleagues how to manage updates and status. Keeping derivatives. (Partly user problem but Figma didn’t make this easier)

  • Figma got distracted from improving things for UX design when they took on FigJam. Our company didn’t see the point of a cut back version of Figma that worked differently to other files. It didn’t produce structured data, so it was just visual and didn’t empower us any better than the usual version did.

  • Prototypes were all a bit dumb. It was ok for one button or a short flow but even a sign up was too complex. UXPin was light years better but it didn’t have a few of the above loved features about Figma which led to it taking over visuals at the company. I still had to code prototypes in JS to get anyone to understand things in one presentation.

As a UX designer, what are the biggest time sucks:

  • Managing a single element’s design across multiple screens (eg. a button). (Fireworks first helped, then Sketch, then Figma took this to a new level of “This is how this should work!” but it had new problems it still hasn’t dealt with for several years.)

  • Needing to make multiple versions of the same screen because I can’t set rules that help the dev team understand how it reacts to certain circumstances.

  • When I make multiple versions, that I lose the relationships between the components in screens so when I change a column width, colour, font or icon that carries to others.

  • The dev team struggling to understand what changed between the previous and new version. They would miss something and you’d have to go back and explain. (Sure a Diff type thing would help but some kind of clear version version control for a screen/board would help)

  • That rearranging screen flows for prototypes. Having to select all to the right and then drag over is a pain, yes putting things in an auto layout might help but you you have branches in the flow it gets messed up. Somehow having a way that works a bit like FCP X with the way you can insert things into the timeline and it shifts everything over, all accessed by a modifier key.

  • The need to manage a design system for the design system. As in if you made all your notes and communication around a screen in the same design system as the screen, people would mistake it for the screen so we actually had two design systems. It would have been handy if the software had some kind of default design system (sure with some customization) that let you understand the status, names and titles of screens and flows easily.

  • Checking usability issues before going to tests/research

High Level Issues with Penpot

  • Biggest red flag to using this seriously is how the component system works. The way updates to a component need to be pushed back onto it (unlike how Figma works) just makes extra work. Not having a master component makes this frustrating. The updates should apply to it and the rest of the components. It makes more work.

    • All I did was change the text content in one item in a list of component instances and now it considers that whole text field over-ridden, now it’s X & Y field are locked so when I update the component via a different instance, the changes don’t flow on to that text field. Like nice, I can adjust things within a component that Figma didn’t let me but now components are actually useless to me. Webflow has an interesting way of handling overrides within the UI, the input fields change colour and you can reset it back to just using the default. It only applies overrides on a property by property basis, not to whole objects. Then controlling access to who can write to components is another thing altogether.

    • This is absolutely the most important feature for me personally as to why Figma is more powerful than Sketch and thus Penpot too.

    • The lack of being able to swap an item from the library and having folders in the library to search/narrow selection.

  • Auto layout is next but this is talked about a lot.

  • Can we have 2000+ screens with hundreds of items each in one file? (Our master library for Figma is this)

  • Is SVG rendering the way forward? (There is a solid reason that Figma uses the Canvas)

UI issues

  • The colour system is very confusing. I can have colours on the right, left and bottom of the screen. The way you create a library colour doesn’t make sense because you have to choose a colour, add to library, rename it, then go back to the item and select that named colour again.

    • Also adding something to the library is buried in the colour picker, it’s not present until you drop “recent colors” to “library colors”

    • There’s no tool tips in the colour picker to tell you what an item is (especially colours themselves, or what the + is going to do).

    • The picker also ignores grey colours in the recent colours

    • I just think this whole area needs a rethink. It’s too complicated and wrecks any flow.

  • Issue that was also in Figma, the left layers column is as far away as possible from the right properties column, so if using the layers column to select something for editing, it’s too far away. I want to rearrange the UI (like Adobe or Blender)

  • Alt-Drag sometimes duplicates, sometimes doesn’t. If you’re slow and Alt first then drag, it works but if you do it too quick for the app it fails even when showing the duplicate icon on the cursor.

  • Using the Text tool, doesn’t select text within a board. This runs counter to usability in all other apps like this.

  • Mouse scroll should be zoom. Ctrl+Wheel should be pan up down. Because then you can navigate a board without two hands. I don’t care about breaking with other software’s conventions here because this is a massive slow down.

  • The Ctrl+Up (Cmd+Up) to move a layer up is just too far to reach on a desktop keyboard. Cmd+[ makes a lot of sense.

  • I want some kind of feedback that an object I am dragging is about to go within a board. Change the drag icon like Figma?

  • Also when dragging an item out of a frame, it remains hidden until you release so you don’t know where it’s going to drop exactly.

  • The lack of live preview when resizing components is a slowdown, again is SVG really the right technology?

  • All the sharing settings aren’t there so wasn’t sure where they are or how to enable them (after looking through all the setup/user menus). Otherwise all of this would be in a file that I could share to you with screenshots to show things.

  • “Typographies” seems odd. Is there anything wrong with just “Typography” or “Type Presets”? When I see “Typographies”, I’m thinking of whole different ways of the study of type (Eg. One graphic designer’s style vs. another designer’s style). The label is just referring to type presets which are typically named by function so the plural doesn’t seem like the right word.

  • The Penpot context menu only works in the art board and feels odd when the browser context menu appears on other panels. I’m often clicking it to search for expected features.

  • There is no ‘create component’ option in the context menu when right clicking on a board. The Ctrl+K shortcut still creates one.

  • Drag select a number ‘0’ on entry to a property input field and but when you release outside it deselects the field.

  • When using Up and down cursors in an input field the caret moves from the start to end of the value in the field? Why?

  • I cannot replicate the interaction on the Penpot homescreen of dragging a button component into a board and it pops into the right size? How can you do that? (In Figma you need auto-layout enabled to do that)

  • Sign Up - the @ mark in the email field is confusing (especially to non-techies) as they wonder how to move their cursor to the right of it and enter their domain. Saw this happen with a colleague.

Feature requests

  • Allow variables to be passed down from a frame to children and that child options can be collated at the parent.

  • Related is the need to have a colour slot/symbol which can have multiple colours within it. When you set a root level variable like Dark or Light, it’ll pick the correct colour from within the slot. You can tie a single colour slot to a dark and light state. So if you have these theme sets you can just design a screen once by choosing a colour slot for some text and when changing the theme it’ll change to the right colour. Why I think ‘themes’ is the way to go is because just building a ‘dark/light’ feature isn’t very future proofed. Maybe this could be just as smart as “BodyText:Dark” in the label. But it needs to ignore everything after the : when selecting colours on an object. If a color’s theme label isn’t there, just defaults to the one that is available.

  • Make a text field more powerful

    • When typing a minus, turn it into a bullet point like Figma does and then allow tabs to move things in and out.

    • Then use the layer up and down shortcut keys to move that line of text up and down in the text field

    • Offer an ability to split or combine text fields (this is useful when brainstorming/whiteboarding with others)

      • Allow through the context menu to export this in some kind of structured way (JSON, markdown)
  • Bring over Blender’s click drag within a property input field to select two field at the same time to set a value. (X & Y and W & H are often needed to be set together)

  • The drag the property label to adjust value and that when you hold shift it move in smaller increments (Figma & Blender)

  • Let me pick my own shortcuts (right now they are too far apart for serious use, eg. Flip horizontal and vertical need to be next to each other or a modifier key different)

  • Have UI themes that let you change the colour of the UI (lower importance for me)

  • Colourpicker helps with relative colour and legibility. Relative colour is quite the rabbit hole but it’s valuable for coming up with good palettes.

  • How does Penpot integrate with a task management system Jira/Confluence/Trello/Asana (eg. Can you just link to a URL and it will provide a preview image)

  • I18n

  • Rearrange screens based on prototype links

  • Duplicate the zoom shortcuts as they do in Figma (+ and Ctrl +) so that people that still need to use Illustrator for icon design don’t get stuck resizing the browser.

  • Why does the marketing for Penpot even look like Figma? Neo-memphis? Can’t it have it’s own unique design?

Self Hosted

(I only installed this because the site was down for a hour or so when attempting to log in)

  • I’ve only used Docker for a few projects so part of this might be related to that but:

  • Followed instructions and couldn’t get an initial user to work. Because there are conflicting instructions or they were written for an older version?

  • There is no console feedback when creating a user to activate their account as…

  • The instructions use a command flag that lead the system to run headless so I didn’t have any console responses.

  • The default version doesn’t have the create temp user option.

  • So then I try to set up SMTP which I couldn’t get to work.

  • If a user who registered but didn’t activate, attempts to login, no activation message is resent. So you end up needing to clean the database…

  • Was about to wipe my installation and try again but then found the site was back up so I got to see how it worked there before investing more time in self-hosting.

Clojure / Contributing

I’ve not used Clojure before but a lot of JS/Typescript, AS3 and Python, even after watching Alonso’s video talking through some of what he’s built in this video - Challenges of developing a tool for designers - YouTube - it’s not enough for someone from outside to get in and contribute or understand how things are working. Maybe a video explaining top to bottom how a feature was added would be good. Here’s the UI elements for it, here’s the logic for the feature, etc. If there’s smaller pieces where people can work on without having to understand the whole thing, then you can get them engaged faster.

I think having clear ways that people can contribute and an onboarding for your contributors is really important. The issue with open source is that you have two audiences to keep engaged, users and developers. I would be looking at how Blender solved it’s biggest problems as it developed because it’s only in recent years that they had the tools to engage developers and take it beyond the competition.

I’m eager to see where this goes.

12 Likes

Wow, this is a very thorough post! I agree with a lot of the points here, especially in regards to having a more powerful text field and a better workflow for saving and using colour assets.

This is pretty minor, but I do want to mention that it is possible to create folders in the library and group assets.

I had no idea this was a thing! I just tried it in Word (CTRL + ALT + Arrow key) and I’m mindblown. :exploding_head:

1 Like