The main focus for this month's Melbourne Drupal Meetup was a presentation by Akhil Bhandari on how Figma is used within CivicTheme.
Revolutionising web development with CivicTheme — A Figma-fueled approach: summary of Akhil’s presentation
Akhil Bhandari from Salsa presents an innovative approach to web development, showcasing the power of and in rapidly designing and deploying websites.
Quick intro
Akhil introduces himself, highlighting his 22 years in the tech industry and his diverse roles in product sales, web design and digital engagement management. He mentions the interactive nature of the session and dives into the agenda.
Web development process overview
Akhil outlines the typical stages in web development, emphasising the sequential nature of design and build phases.
Challenges in traditional approach
Akhil talks about the challenges of the traditional process, including the time-consuming coding process and the potential degradation of the initial design vision over time.
Introducing true design systems
Akhil introduces the concept of a true design system, differentiating it from a standard design system. He emphasises the dynamic nature of a true design system, highlighting it as a living system that matures with the product and incorporates coding standards and documentation.
Overview of Figma
Next, Akhil gives a brief overview of , describing it as a collaborative, cloud-based tool for user experience (UX) design and prototyping. He highlights its accessibility and user-friendly interface.
Benefits of true design system for Drupal builds
Akhil explains how a true design system, such as , can benefit Drupal builds. It facilitates collaboration between designers and developers, ensures a common understanding of design language, and creates a consistent user experience across different platforms.
Introduction to CivicTheme
Akhil introduces as an open-source, inclusive, component-based design system for rapidly assembling modern, consistent and compliant digital experiences. He touches on its atomic-based design system, which includes 60 components in and is also codified in .
How true design system accelerates projects:
Akhil elaborates on how a true design system accelerates projects by enabling functional prototyping, reducing design discrepancies, and allowing for minimal development out-of-the-box. This allows for a focus on improving user experience rather than redundant design and development efforts.
Case study: Climate Change Authority website
Akhil presents a real-life example of using CivicTheme for the Climate Change Authority website. The project was completed in four weeks, including the migration of 250 pages and almost 1000 media files.
How to start an open-source Drupal project with CivicTheme
Akhil suggests options for starting a Drupal project with , including adopting it as-is, extending Figma designs, or building a Drupal site directly, with low-to-no-code assembly.
Addressing UX challenges
During the Q&A session, Akhil addresses questions about handling complicated user journeys and the role of UX in the approach. He talks about the modularity of components and the iterative nature of the design system to accommodate UX improvements.
Conclusion
Akhil concludes by reiterating the speed and efficiency achieved by using CivicTheme and , revolutionising the traditional web development process and empowering both designers and developers to create high-quality digital experiences in days, not weeks.