Hummingbird v2 has been PrestaShop’s default theme since version 9.1. If you’ve been customizing it or building a child theme, you may have relied on unofficial resources. Today marks a significant update: the official Figma file for Hummingbird v2 is now available for public access: HUMMINGBIRD (new).
What’s Included in the Figma File
This file serves as the definitive source for Hummingbird’s user interface, including:
- Components
- Design tokens
- Spacing rules
- Page-level layouts
Whether you are adapting the front office for specific merchant needs or contributing to the theme itself, this file is an essential reference. Please note that while the desktop version is complete, mobile layouts are still under development. We will continue to update the file as more components are added.
Importance for Theme Developers
Previously, developers had to reverse-engineer design choices from SCSS and templates or rely on community-shared files that may not have been current. The introduction of a single, maintained public file offers several advantages:
- Inspect the intended design before modifying the code.
- Align customizations with the actual component structure.
- Use it as a shared reference for discussing UI changes in issues or pull requests.
How to Access the Figma File
The file is open for public viewing. To utilize it, simply open it in Figma and use the inspect panel to check spacing, typography, and color tokens.
Conclusion
The release of the official Figma file for Hummingbird v2 is a game-changer for PrestaShop theme developers. It streamlines the design process and ensures that developers have access to the most accurate and up-to-date resources. Stay tuned for further updates as we expand the file's coverage.