Introduction:
As the lead designer and developer at AdCentral TV Templates, I managed and developed visual and promotional content for CPR (Cell Phone Repair). I was responsible for designing and developing HTML/inline CSS templates for in-store screens, ensuring the seamless integration of dynamic content and background videos. In addition to template development, I created a series of custom Figma plugins that significantly boosted production efficiency by automating design-to-code processes and ensuring design accuracy for AdCentral’s platform requirements.
Role and Responsibilities:
In my role at AdCentral, I led template development and design production for CPR, focusing on:
Designing and developing responsive TV screen templates using HTML and inline CSS.
Creating brand visuals and marketing materials for CPR’s digital and social media campaigns.
Coordinating with the video team to integrate video assets into templates, ensuring cohesive multimedia experiences.
Developing and deploying templates for the "Deal of the Month" promotions, ensuring timely activation at the end of each month.
Building multiple Figma plugins to enhance production, including tools that checked text boxes for overflow issues and converted designs directly into HTML/CSS inline code for AdCentral templates.
Figma Plugin Development:
To streamline production and minimize errors, I developed a set of custom Figma plugins that addressed critical parts of the design-to-code workflow:
HTML and CSS Converter Plugin: Automatically converted design content into HTML and inline CSS, ensuring that text, spacing, and layout from Figma designs were accurately translated for TV screen templates. This allowed the exact text and design to transfer seamlessly without manual adjustments.
Text Box Checker Plugin: Scanned all text boxes within a design to ensure no text was cut off or misaligned, preserving design integrity across screen sizes and formats.
These plugins allowed for dynamic text color changes, editable sections, and precise positioning, all tailored to AdCentral’s platform specifications.
Automation and Coordination:
I also contributed to the development of a Slack application to coordinate with the design and video teams, streamlining the process of gathering assets and activating templates. This tool facilitated:
Automated mid-month reminders to collect design materials and promotional content.
Dynamic link sharing to easily exchange files and content.
HTML/CSS template development and deployment at the end of each month, ensuring promotions were ready for store screens.
Technical Details:
Template development required advanced knowledge of HTML and inline CSS to meet AdCentral’s specific formatting needs. The Figma plugins played a critical role in automating the manual coding process, ensuring responsive designs that maintained their integrity across different screen sizes.
Innovation and Creativity:
By integrating technical development with creative design, I brought innovative solutions to the production process. The Figma plugins not only increased efficiency but also reduced the likelihood of errors, enabling faster turnaround times and more consistent designs across all campaigns.
