# How the Fedora Websites and Apps Team Creates with Penpot

This article has been adapted from the talk: Mock-ups and Motions—How the Fedora Design Team uses Penpot by Ashlyn Knox and Emma Kidney, given at the Creative Freedom Summit. A recording of this can be found [here](https://peertube.linuxrocks.online/w/5H22PH66kYwiTKcKR1p2kJ).

Working with Fedora, you become exposed to a lot of different open-source software. The Fedora Website revamp started a bit over a year ago with the goal of looking into design aesthetics, creating a style guide, planning the website strategy and deciding the tech stack for delivering the Fedora Linux offerings website [1]. From a design perspective, the team needed a tool to create the mock-ups, hold the asset libraries, and be suitable to hand off to developers once complete.

## Penpot?
Figma is a popular interface designing tool that was recommended by many but was not deemed suitable at the time as they changed their free plan by imposing certain restrictions[2]. This was pre-Adobe announcing that they were acquiring Figma for $20 billion in 2022[3] so we dodged an even bigger bullet than we thought.

Penpot was looked into, and it suited all the team’s requirements. For those who are unfamiliar, Penpot is the first Open Source design and prototyping platform meant for cross-domain teams. Penpot is created by a team within Kaleidos, a technology company created in 2011 that fully focuses on open-source projects [4].

There are three ways the Websites and Apps team uses Penpot:

### Wireframes & Mock-ups
Drafting webpage designs is the main way the team uses Penpot. This enables quicker collaboration and lessens communication issues between contributors. Developers and designers are able to collaborate freely.

Community feedback is important when working within Fedora. With mock-ups, it can become a bit difficult to share designs properly. Penpot is web-based and therefore easily accessible. When entering ‘View Mode’ on a prototype, a shareable link is generated. You can also modify the permissions or destroy the link if you no longer want it to be shared.

[permissions.png] Creating a shareable link and editing permissions on Penpot

### UX Testing and Feedback
As a community initiative, this revamp has always worked really closely with the Fedora community. By running usability testing sessions on prototypes and sharing design progress, we use Penpot to keep Fedorans involved every step of the way.

### Collaboration Tool
During the revamp, our development, and design teams used Penpot to generate ideas, organize meetings, and test new concepts visually.

The Websites and Apps team used Penpot as a whiteboard in early planning sessions, and enabled the developers to contribute ideas async while engaging in the discussion. This method reduced stress, made sure everyone’s ideas could be heard, helped us see patterns, and mediated disagreements for a good compromise. A sense of understanding was created between everyone.

The team used Penpot as a source of assets. You can store elements and other content in an asset library, so one can use them again and again. You can store components, graphics, typographies, colour palettes etc. These libraries can be turned into shared libraries that the whole team can access. This can be helpful when working with a team that regularly accesses the same source files. If a new member were to join, all the assets they need to start building mock-ups for the project and right there. These assets can be exported directly from the Penpot file.

[asset-library.png] An example of an asset library within Penpot

[exporting.png] exporting selected assets in a Penpot file.

For developers, the prototype can be viewed in full on any browser. This makes building the website easier as you can code side by side with the prototype. If a designer is working on the file at the same time, changes they make can be seen by refreshing in ‘View Mode’, or in real-time if in the actual file.

[coding.png] VS Code editor open next to a Penpot file.

## How does Penpot relate to Fedora’s values?
The Fedora Project is a community of people working together to build a free and open-source software platform. Or, in plain English, we make an operating system, and we make it easy for you to do useful stuff with it. Fedora has core values that the community follow. These are called the ‘Four Foundations’: Freedom, Friends, Features, First.

### Freedom
We choose free alternatives to proprietary code and content and limit the effects of proprietary code on and within the Project. Penpot is the first Open Source design and prototyping platform. Non-dependent on operating systems, Penpot is web-based and works with open web standards (SVG, Scalable Vector Graphic). This works great along with other open-source software such as Inkscape, as they also work with SVGs.

### Friends
The Fedora community is made up of people from all walks of life, working together to advance free software. Penpot’s mission is similar. Their goal is to provide an open source & open standards tool to bring collaboration between designers and developers to the next level. Using Penpot has allowed for a smoother handoff to developers and allowed us to work more productively together. There's no back-and-forth looking for files or assets, as everything they need is in the Penpot file.

### Features
Fedora cares about excellent software. Our feature development is always done openly and transparently, and anyone may participate. Anyone can jump in and start working on any issue or as part of any team that interests them. Penpot shares this ethos. Anyone can collaborate! The code along with a contributor guide is available on the project's GitHub.

### First
Fedora adopts a strategy of advancing free software through consistent forward momentum. This usually follows a “release early, release often” workflow. Penpot also updates frequently. They have a “Dev Diary” blog that is published to the community, highlighting the work that has been done. They have also stated on their website: “We also have this sense of urgency, we need to act fast, there's too much at stake.”

## Conclusion
The project is coming close to completion, with the first deadline aligning with the release of Fedora Linux 38. Penpot has proven itself to be a valuable tool and is expanding the resources available to Open Source Design enthusiasts. With the platform celebrating its official launch [5] recently, it’s exciting to see what’s next.

### Links
1. Fedora Websites Revamp Stakeholders Team https://docs.fedoraproject.org/en-US/websites/rvmp/
2. Huge news: Figma will no longer be free from April 2021 https://dorve.com/blog/figma-no-longer-free-from-april-2021/
3. Why Figma is selling to Adobe for $20 billion, with CEO Dylan Field https://www.theverge.com/2022/11/8/23445821/figma-adobe-acquisition-design-vr-ai-meta
4. About Penpot https://penpot.app/about
5. Penpot’s official launch brings developers and designers closer than ever! https://community.penpot.app/t/penpot-s-official-launch-brings-developers-and-designers-closer-than-ever/2384