Brief summary
The Wikimedia Design Systems team has created an extensive set of assets for Codex (the Wikimedia design system) in Figma. The team is interested in transferring this work to Penpot, an open-source design tool, as an experiment to allow for increased collaboration with contributors.
This project will require proficiency in Figma and a willingness to learn the ins and outs of Penpot. This project will be self-directed with support from design managers and the Design Systems Team. The goal of this project is to create as many components and component libraries from Codex in Penpot using the Codex Figma libraries as a guide. If time allows, there will be an opportunity to work with product designers to create Figma and Penpot templates of Wikimedia interfaces.
Skills required
Specific technologies required
- Figma proficiency: Ability to navigate through Figma files including components, variables, tokens, and libraries.
Skills required
- Design systems: Experience utilizing design systems such as Material Design, the Human Interface Guidelines or internal design systems.
- Consistency and Standards: Ability to recognize and maintain consistency in design elements by adhering to design principles and standards.
- Testing: Ability to test and verify that transferred components function correctly within Penpot and match their original design specifications in Figma (including variables) and Codex.
- Adaptability: Willingness and ability to continuously seek out opportunities to develop skills, learn from others, and quickly understand the nuances of Penpot.
- Collaboration: Ability to communicate effectively with mentors to ensure that the transferred assets meet intended design specifications and address any issues that arise.
- Documentation: Ability to clearly and efficiently document learnings throughout the process and share issues that arise in a timely manner.
- Time management: Think tactically about the best way to deliver the task at hand.
Relevant Phabricator project tags
Learning outcomes
- Technical Skills Development: Mentee will gain hands-on experience with Figma and Penpot.
- Understanding of Design Systems: Mentee will gain knowledge and experience utilizing a design system.
- Documentation and Communication: Mentee will improve their documentation and communication skills through creating documentation for the Codex Penpot library and other deliverables.
- Collaboration and Mentorship: Mentee will gain experience working with design managers and mentors, learning to effectively communicate and collaborate on design projects.
- Time Management and Task Prioritization: Mentee will develop their ability to manage time and prioritize tasks effectively with the support of design managers.
Possible mentor(s)
If you have questions about this project or the tasks below, please respond to this Phabricator ticket. Please do not email mentors, any questions emailed directly to mentors (via email or LinkedIn) will not be responded to.
Having all the questions on Phabricator helps the mentors keep track of where help is needed and also benefits the other participants.
Project coordination and support from @cmadeo and @mwilliams. Design mentorship support from @DTorsani-WMF and @bmartinezcalvo via scheduled check-ins.
Microtasks
Familiarity with design systems and Penpot
- Utilize the Codex Figma Kit, Design tokens file on Figma and documentation on InfoChip to recreate the InfoChip component in Penpot. Penpot does not allow for variables, so please ensure that each variable of the InfoChip is represented in your Penpot file. Please present the component in Penpot as closely as you can to the component in the Codex Figma Kit.
- Name your file (InfoChip_YourFullName.penpot).
- Download / export your .penpot file.
To complete the task above you will need to create a free web-based account for Penpot, an open source design tool.
Documenting your experience
Please denote if you utilize an AI tool (such as ChatGPT) to assist you with this task. Proofreading is the only permitted use for AI tools in completing this task.
Based on your experiences translating the InfoChip component from Figma to Penpot, please create a tutorial that could help others to build existing Codex components (from Figma) in Penpot. Please feel free to use images, video, or any other tools, the goal of this tutorial is to make it possible for someone to do this task without additional 'hands-on' assistance.
Please be sure to share any insights you had from the transfer process (notable differences between Penpot and Figma, tips and tricks you learned, approaches you tried, etc).
Share your task
- Create a sub-task from this task in Phabricator:
- Review the subscribers and remove all of them except for the mentors. Also remove the Developer-Outreach tag.
- In the project description, include your .penpot file along with your tutorial. Feel free to link out to a document for your tutorial or include it in the body text of your task.
Tutorials and resources
These tools were not created by the Wikimedia design team, but they are available for reference from Penpot.
- Penpot user guide (website)
- Hands-on guide to wireframing (video)
If you have a question related to this task, please leave a comment on this Phabricator ticket. Please do not directly email (via email or LinkedIn) mentors -- direct emails will not be responded to. Having all the questions on Phabricator helps the mentors keep track of where help is needed and also benefits the other participants.
Microtask evaluation
- Quality of design assets: Did the assets in Penpot match the assets as described in Codex and as create in Figma?
- Quality of Penpot file: Is the file well organized and easy to use?
- Communication and creativity: Was tutorial documentation clear and easy to follow? Were creative approaches used to complete the task? AI tools (such as ChatGPT) should have only been used for proofreading.
As we will only provide one round of feedback for each applicant, we recommend submitting your task when you are fairly confident it is in a complete state. You will not be evaluated on the quality of your initial task, but rather how you adapt to the feedback so it's okay to have mistakes, etc., in your task in the initial review and you will not be penalized for that. If you would like to ensure that your task receives a round of feedback please submit it by end of day UTC on October 16.
If you have received feedback from the mentors, we recommend that you include a section in your final task briefly listing all the changes you made to address our comments.
