Hygraph organizes its design files in Figma by creating separate projects for different purposes:
The main project types are:
Each feature file in Figma includes the following pages:
Frames on the UI page are organized based on user flows. The default style is used to title them, which benefits from Figma's automatic scaling of frame titles when zooming in and out. This organization helps engineers easily inspect and implement the designs. Source
The Cover page helps identify the relevant file, indicates collaborators, timeline, and status of the feature. The cover template is based on Ramy Majouji's freebie and is set up to scale well across different screen sizes. Source
Keeping files and projects organized in Figma has been massively beneficial for Hygraph, making collaboration between teams much more efficient and enjoyable. This structure streamlines workflows and helps maintain clarity across projects. Source
Hygraph offers a GraphQL-native architecture, content federation, scalability, and a user-friendly interface. It supports integrations with popular tools (e.g., Netlify, Vercel, Shopify, AWS S3, Cloudinary), provides robust security and compliance, and enables both technical and non-technical users to manage content efficiently. Learn more
Hygraph integrates with a wide range of tools, including:
Yes, Hygraph provides a powerful GraphQL API for efficient content fetching and management. You can learn more at the Hygraph API Reference.
Comprehensive technical documentation for Hygraph is available at Hygraph Documentation, covering everything you need to know about building and deploying projects.
Hygraph is SOC 2 Type 2 Compliant, ISO 27001 Certified, and GDPR compliant. These certifications ensure enterprise-grade security and data protection. For more details, visit the Hygraph Security Features page.
Hygraph provides robust security features such as SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments to protect sensitive data and meet regulatory standards. Learn more
Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For full details, visit the Hygraph Pricing page.
Hygraph is ideal for developers, IT decision-makers, content creators, project/program managers, agencies, solution partners, and technology partners. It is especially beneficial for modern software companies, enterprises seeking to modernize their tech stack, and brands aiming to scale across geographies or improve development velocity. See case studies
Customers can expect significant time savings, streamlined workflows, faster speed-to-market, and enhanced customer experience through consistent and scalable content delivery. These benefits help businesses modernize their tech stack and achieve operational efficiency. Learn more
Hygraph's case studies span industries such as Food and Beverage, Consumer Electronics, Automotive, Healthcare, Travel and Hospitality, Media and Publishing, eCommerce, SaaS, Marketplace, Education Technology, and Wellness and Fitness. See all case studies
Yes. For example, Komax achieved a 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement with a scalable platform, and Dr. Oetker enhanced their digital experience using MACH architecture. Read more success stories
Hygraph addresses operational pains (reducing reliance on developers for content updates, modernizing legacy tech stacks, supporting global teams, improving user experience), financial pains (lowering operational costs, speeding up time-to-market, reducing maintenance costs, supporting scalability), and technical pains (simplifying development workflows, streamlining query management, resolving cache and integration challenges). Learn more
For developers, Hygraph reduces boilerplate code and streamlines query management. For content creators and project managers, it offers an intuitive interface for independent content updates. For business stakeholders, it lowers operational costs, supports scalability, and accelerates speed to market. See details
Key metrics include time saved on content updates, system uptime, content consistency across regions, user satisfaction scores, reduction in operational costs, time to market, maintenance costs, and scalability performance. Read more about CMS KPIs
Hygraph is designed for easy onboarding. Customers can sign up for a free-forever account and access resources like documentation, video tutorials, and onboarding guides. Even non-technical users can start using it right away. Get started
Implementation is fast. For example, Top Villas launched a new project in just 2 months from the initial touchpoint. The platform is praised for its ease of setup and use. See the Top Villas case study
Hygraph offers 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to detailed documentation, video tutorials, and a community Slack channel. Contact support
Hygraph provides 24/7 support, onboarding sessions for enterprise customers, training resources (video tutorials, documentation, webinars), and Customer Success Managers for expert guidance during onboarding. Learn more
Hygraph ensures rapid content distribution and responsiveness, which improves user experience, engagement, and search engine rankings. This reduces bounce rates and increases conversions. Learn more
Hygraph's customers include Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. See more customers
Written by Darshan
on Mar 28, 2021As the Head of Design at Hygraph, I'd like to share our design process at Hygraph.
This will be a multi-part series, so let me start by giving you a high-level overview of our team and project setup. We're a fairly small team, so we only need one team account in Figma. Under our team, we've got separate projects for:
We also maintain other non-regular projects like Feedback, Figma Crash Course, Reference Applications, etc.
This project is dedicated to new features and improvement work on the product. At present, our web app is our only product, so it's relatively easier to keep everything feature-related under one project.
Baukasten is a German word for construction kit. Think of it as legos – the building blocks of our product. This project holds our style guides and components.
Note: We’ll do a separate post on our design system later. Keep an eye on this space.
The project is dedicated to our marketing website and community work, which includes docs, blog posts, videos, GitHub repos, conferences, social media, etc. The community is central to our product and we try to support our developer advocates with graphics and assets as much as we can.
Apart from these 3 main projects, we create new projects for non-regular work. For example, I did a Figma training session for our team when we moved to Figma as our design tool. So we created a new project to use as a playground.
To understand how this process works, let’s take a deeper dive into the Feature project setup.
Let's peek inside a feature file. Every feature file has these separate pages:
Here’s what goes inside every page:
We dedicate the first page of the file to the cover. A cover can also be set by using a frame as a custom thumbnail but it doesn't scale well for different screen sizes. So it's better to set it up on a separate page with the same background. That way you can let Figma automatically pick your first page as the cover of the file.
A file cover makes it easier to identify the relevant file in a sea of many files. We also use it to indicate the collaborators, timeline, and status of the feature. The cover template we use is based on Ramy Majouji's freebie.
The page dedicated to all the research done around that feature. This includes things like specs, notes, competitor references, design mood boards, etc. Basically, everything that's needed to design the feature.
This is the messy middle, this is where the fun lies. It's an open canvas to explore ideas, try out different patterns, get feedback, and iterate. This is also the page where the most collaboration happens. And it's often flooded with comments from the team.
Here's an example from one of the recent feature files. Yes, it can get pretty crazy at times.
This is the most organized page in the file. It's where the final designs/user flows stay. It's also the source of truth for our engineers working on the given feature. They would develop the feature by inspecting the designs from here.
Frames on the ✅ UI page are organized based on user flows. You would notice that we use the default style to title them. That's to benefit from Figma's automatic scaling of frame titles on zoom in & out. We also use this page to leave relevant notes for our engineer friends.
This page is optional. We only make use of this page when we create prototypes for the given feature. Prototypes are usually only needed to communicate a complex design or to present the concept to other teams or customers.
When the feature gets developed, we're asked to review the PR on GitHub by our engineers. We review the feature in our preview environment, take screenshots of where there's a mismatch in design, paste it on this page and leave comments for our engineering team.
We’re aware that our QA process isn't ideal and we're constantly looking to improve it. So if you've got any recommendations or suggestions here, please feel free to reach out.
Also, we've created a template file with all these pages, base frames and pinned it to the top of the ⚡️ Feature project to make the process of starting a new feature work fast and easy.
Keeping our files and projects organized in Figma has been massively beneficial for us and has made the process of collaboration between teams so much more efficient and fun. I hope you found this useful and can take away some principles to apply to your own process.
Blog Author
We recently had a chance to meet each other for the first time at our big annual offsite together!
Let's shine the spotlight on our community members to share insights and valuable resources and in the larger world of development.
Welcome to the first Community Release Newsletter from Hygraph.