Introduction
At AdCentral, I led the design, development, and automation of digital menu systems for their platform, enabling the seamless deployment of content to digital signage TVs via their app. This involved creating dynamic, responsive menus that supported both design and video content layers. My work focused on modernizing the process of content management by introducing editable text layers, streamlining workflows, and enhancing customization for specific locations. Leveraging ChatGPT, I developed Figma plugins that automated repetitive tasks such as HTML/CSS template coding, asset resizing, text box adjustments, and text content QA, optimizing the production pipeline and increasing efficiency.
Vision and Innovation
The project aimed to replace manual, error-prone processes with a scalable system that streamlined the deployment of digital signage content. By crafting a Figma plugin and leveraging tools such as master components, Google Sheets synchronization, dynamic variables, and AI-powered automation through ChatGPT, I ensured that digital menus were adaptable, efficient, and customizable to individual store needs.
This solution simplified promotional updates, improved design consistency, and enabled text elements to be editable directly within the app’s HTML/CSS layer, a feature previously unavailable.
Challenges
Non-Editable Text Layers: Previously, text content on digital menus was hardcoded, making it impossible to update dynamically without replacing the entire layer.
Store-Specific Customization: Menus needed location-specific pricing and ingredient variations, requiring a flexible, automated solution.
Frequent Updates for LTOs: Managing recurring Limited Time Offers (LTOs) and seasonal campaigns demanded a more efficient system.
Coordination Across Teams: Aligning static menu designs with animated content required seamless collaboration with the video production team.
Solutions
1. Editable HTML/CSS Text Layers via Figma Plugin
AI-Powered Automation: Using ChatGPT, I developed a custom Figma plugin that transformed static text in Figma designs into editable HTML/CSS layers, enabling text to be dynamically updated directly through the AdCentral platform.
Dynamic Text for Store Customization: The generated HTML/CSS allowed location-specific ingredient lists and pricing to be easily adjusted without affecting the visual integrity of the design.
Improved Flexibility: This innovation empowered teams to make quick edits to menus without re-rendering the entire design or video layer, significantly reducing time and effort.
2. Master Component System for Layout Standardization
Consistency Through Centralization: To ensure uniformity across all menus, I created a master component in Figma that centralized design updates. This system supported both horizontal and vertical screen orientations, adapting seamlessly to various display types.
Scalable Deployment: Updates to the master component cascaded across all menu instances, ensuring design consistency and reducing manual workload.
3. Google Sheets Sync for Automated Updates
Automation with Precision: By integrating the Google Sheets Sync plugin, I automated updates to pricing, product details, and availability. This eliminated manual input errors and enabled real-time synchronization between the data source and the design.
Centralized Data Management: Menu content was controlled via a Google Sheets file, simplifying bulk updates and ensuring data accuracy.
4. Dynamic Asset Library for LTOs and Menu Items
Reusable Components: To manage promotional updates, I developed a reusable asset library in Figma. This library contained swappable components for Limited Time Offers (LTOs) and other visual elements.
Efficient Asset Swapping: Components were dynamically replaced without affecting layout or alignment.
Video Integration: Standardized assets were passed to the video production team, enabling seamless replacement in After Effects animations.
5. Streamlined Repetitive Design Tasks
AI-Assisted Automation: Using ChatGPT, I developed tools to automate repetitive tasks such as:
Coding HTML/CSS templates from Figma designs.
Resizing assets to match layout specifications.
Adjusting text box dimensions for consistent alignment.
Performing text content QA, reducing manual proofreading effort.
Collaboration and Cross-Functionality
A critical component of this project involved working closely with AdCentral’s video production team. By standardizing assets and enabling editable text layers in HTML/CSS, the workflow bridged the gap between design and video. Teams could now integrate new elements directly into existing animations without re-rendering, significantly speeding up production cycles.
Results and Impact
Editable Text Layers: Transformed previously static text into editable HTML/CSS layers, allowing dynamic updates tailored to each store’s specific needs.
Faster Production Cycles: Automated workflows and editable content layers reduced production time by over 50%.
Error-Free Updates: Synchronizing Figma designs with Google Sheets ensured data accuracy across all menus.
Dynamic Store Customization: Figma variables and editable text layers allowed for location-specific adjustments without manual redesigns.
Improved Collaboration: Standardized assets and HTML/CSS layers enhanced alignment between design and video teams, streamlining the creation of animated promotions.
Optimized Repetitive Tasks: ChatGPT-powered Figma plugins eliminated manual effort for HTML/CSS coding, resizing, and content QA, improving workflow efficiency and consistency.
