In a fast-growing staffing and outsourcing business serving 500+ clients across the GCC region, the ability to generate professional, compliant, and branded documents at scale is mission-critical. TASC Outsourcing, managing contracts, proposals, agreements, and service annexures for diverse client needs, faced a documentation challenge: creating dynamic, visually sophisticated PDFs that reflected their premium brand while maintaining data accuracy and regulatory compliance.
Key Tools & Technologies:
Figma Design System
HTML5 & CSS3 PDF Rendering
My Role & Scope
Served as Salesforce Visualforce Developer, UI/UX Designer for Document Templates, Image Asset Optimization Specialist, and QA & Document Validation Lead throughout the project lifecycle.
The scope encompassed building 20+ custom Visualforce PDF page designs, implementing dynamic field rendering and conditional logic, customizing table layouts, integrating graphical content, developing running footers with dynamic page counts, managing multi-document types (contracts, proposals, agreements, annexures), and ensuring cross-system design fidelity from Figma to Visualforce.
The Challenge
TASC’s document generation workflow was fragmented. Sales teams manually created proposals in Word or generic templates, leading to inconsistent branding, compliance gaps, and time-intensive revisions. Each document type required different layouts, conditional content, and field mappings.
The vision was to automate this through Salesforce Visualforce PDFs while maintaining the visual sophistication matching TASC’s premium brand identity and Figma design systems.
The core complexity involved translating complex, graphically rich Figma designs into Visualforce’s constraint-filled HTML/CSS rendering engine, where certain advanced styling properties were not natively supported.
Key Solutions & Technical Implementations
Designed and developed a comprehensive library of Visualforce pages across staffing contracts, project proposals, RFP responses, fee schedules, compliance appendices, and master service agreements. Built each template with modular Visualforce code for easy reuse and rapid maintenance.
Implemented Apex-driven logic to conditionally display sections based on document type, client tier, and contract terms. Built multi-currency support for regional GCC contracts, automatic inclusion/exclusion of regional compliance clauses, and service-type-specific terms populated directly from Salesforce records.
Constructed sophisticated table structures for service rate matrices, resource allocation breakdowns, fee schedules with conditional columns, and compliance checklists. Integrated graphical branding assets and data visualizations directly into PDFs through optimized image rendering.
Implemented fixed footer logic displaying dynamic page counts (“Page X of Y”), document dates, and reference numbers. Configured conditional headers rendering brand logos (TASC primary vs. sub-brands like AIQU) and security classifications (Confidential, Standard) dynamically.
Translating high-fidelity designs into Visualforce meant working around unsupported CSS properties like gradient overlays, custom font weights, and transparency layering. Strategically edited and optimized image assets in Figma, exporting decorative elements as high-quality PNGs or base64-encoded references. Established font-family fallbacks and mapped Figma design tokens directly to Visualforce CSS variables.
Visualforce Implementation Code
Below is a condensed excerpt demonstrating the conditional header logic, dynamic section rendering, and fixed footer setup used across the template engine:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- Conditional Header with Dynamic Logo & Page Setup --> <apex:page controller="DocumentController" renderAs="pdf" pageSize="A4"> <head> <style> .header { page-break-after: avoid; } .page-break { page-break-after: always; } </style> </head> <body> <div class="header"> <apex:outputPanel rendered="{!document.brandType == 'AIQU'}"> <img src="{!URLFOR($Resource.AIQULogo)}" width="150px" /> </apex:outputPanel> <apex:outputPanel rendered="{!document.brandType == 'TASC_DEFAULT'}"> <img src="{!URLFOR($Resource.TASCLogo)}" width="150px" /> </apex:outputPanel> <p>{!document.documentType} | {!NOW()}</p> </div> <!-- Dynamic Content Based on Record Type --> <apex:repeat var="section" value="{!documentSections}"> {!section.content} </apex:repeat> <!-- Running Footer --> <div style="position: fixed; bottom: 10mm; left: 10mm; right: 10mm;"> <p>Page <span class="pageNum"></span> of <span class="pageCount"></span> | Confidential</p> </div> </body> </apex:page>
Testing & Retrospective
Testing & Refinement: Executed comprehensive QA across all document types to validate content accuracy, page break positioning, image rendering, and footer consistency. Tested cross-browser and PDF viewer compatibility while validating real-time data population from Salesforce custom objects.
Retrospective: This project reinforced the importance of design-to-development fidelity in enterprise systems. Bridging Figma’s capabilities with Visualforce’s constraints required creative problem-solving – particularly in image asset optimization and CSS workarounds.
Managing a complex document pipeline highlighted the value of modular Visualforce architecture and clear field mapping strategies. Automating TASC’s document generation demonstrated how thoughtful technical implementation directly impacts business efficiency and client perception, turning a tedious, error-prone process into a competitive advantage.
