Website Designer & Developer, Figma-to-Framer

📍 Job Overview

Job Title: Website Designer & Developer, Figma-to-Framer

Company: Facctum IT Solutions India Private Limited

Location: Bangalore North, Karnataka, India

Job Type: Full time

Category: Marketing Operations / Web Development

Date Posted: 2026-06-02

Experience Level: Mid-level (2-5 years)

Remote Status: On-site

🚀 Role Summary

• Design and develop high-impact, conversion-focused marketing website pages and web experiences, leveraging Figma for design and Framer for implementation.

• Collaborate closely with the Chief Marketing Officer and Marketing Team to enhance Facctum's external website presence, driving lead generation and commercial growth.

• Translate design concepts from Figma, Canva, wireframes, or written briefs into polished, responsive, and performant live web pages.

• Build and maintain reusable Framer components, sections, and CMS structures to accelerate marketing campaign launches and ensure brand consistency.

📝 Enhancement Note: This role is positioned within a marketing operations and web development intersection, focusing on the practical application of design and development skills to achieve specific commercial and lead generation objectives for a B2B technology company. The emphasis on "Figma-to-Framer" indicates a need for a candidate who can seamlessly bridge the gap between design and functional web implementation.

📈 Primary Responsibilities

• Directly partner with the Chief Marketing Officer and the Marketing Team to strategize and execute improvements for Facctum’s external website.

• Design and build conversion-optimized marketing website pages, product pages, landing pages, and campaign pages using Figma and Framer.

• Efficiently translate Figma designs, Canva directives, wireframes, and written briefs into polished, fully responsive live web pages.

• Develop and implement reusable Framer sections, components, and CMS structures to streamline the marketing team's ability to launch and iterate on web content.

• Enhance user journeys and conversion paths by optimizing page flow, call-to-action (CTA) placement, form design, and lead capture mechanisms.

• Ensure all created web pages are visually appealing, fully responsive across devices, performant, accessible, and maintainable.

• Collaborate cross-functionally with Marketing, Brand, Content, and Product stakeholders to articulate complex ideas into clear and effective web experiences.

• Implement foundational SEO best practices, including metadata, heading structure, URL optimization, image optimization, and internal linking strategies.

• Support essential analytics and marketing technology integrations, such as HubSpot forms, GA4, Google Tag Manager (GTM), and conversion tracking setup.

• Conduct thorough Quality Assurance (QA) testing for all web pages across desktop, tablet, and mobile devices before publishing.

• Proactively recommend and implement improved design or development approaches while remaining aligned with project briefs and commercial priorities.

• Maintain strict adherence to Facctum’s brand guidelines, product positioning, and overarching commercial objectives across all website experiences.

📝 Enhancement Note: The responsibilities clearly indicate a hands-on role requiring both design aesthetic and development execution. The emphasis on "conversion-focused," "lead-capture journeys," and "commercial growth" highlights the business impact expected from this position, aligning it with revenue operations and marketing operations goals.

🎓 Skills & Qualifications

Education: While no specific degree is mandated, a strong portfolio demonstrating practical application of design and development skills is paramount. Candidates with degrees in Design, Computer Science, Marketing, or related fields may have a foundational understanding but practical experience will be prioritized.

Experience: A minimum of 2-5 years of hands-on experience in website design and development, with a specific focus on Figma-to-Framer workflows and building marketing-oriented web pages.

Required Skills:

• Proficient in designing modern website pages, landing pages, and digital experiences using Figma.

• Strong hands-on experience building and publishing responsive websites and landing pages in Framer.

• Demonstrated ability to execute the Figma-to-Framer workflow, transforming designs, concepts, or wireframes into polished, live web pages.

• Excellent visual judgment, encompassing layout, typography, spacing, hierarchy, color, imagery, and responsive behavior.

• Ability to create clean, premium, and conversion-focused web pages from various inputs including rough concepts, written briefs, or approved designs.

• Experience in building marketing websites, product pages, landing pages, campaign pages, or content-led web experiences.

• Solid understanding of responsive design principles and implementation across desktop, tablet, and mobile devices.

• Working knowledge of Framer CMS, including reusable components, page sections, variants, and scalable website structures.

• Basic understanding of fundamental SEO principles, website performance optimization, accessibility standards, and clean page structure.

• Practical working knowledge of HTML and CSS, with the capability for light customisation.

• Familiarity with implementing forms, tracking, and website integrations, specifically HubSpot forms, GA4, GTM, or similar tools.

• Proven ability to perform comprehensive Quality Assurance (QA) on web pages before publishing, checking layout accuracy, responsiveness, links, forms, and browser compatibility.

• Clear and effective communication skills, with the ability to manage work according to briefs, feedback, deadlines, and commercial priorities.

• High attention to detail and a strong sense of ownership for the final website experience. Preferred Skills:

• Experience building websites for B2B SaaS, enterprise technology, Fintech, RegTech, or professional services firms.

• Experience with WordPress, particularly with CMS updates, landing page creation, forms, or template customization.

• Familiarity with HubSpot, GA4, Google Tag Manager, tracking pixels, or other marketing automation tools.

• Basic proficiency in JavaScript.

• Experience managing CMS-based publishing workflows.

• Understanding of Conversion Rate Optimization (CRO) principles, A/B testing for landing pages, or lead-generation journey optimization.

• Ability to distill complex product messaging into clear, concise, and scannable web content.

• Experience working within lean marketing teams, with agencies, or managing fast-moving internal stakeholders.

📝 Enhancement Note: The required skills emphasize a niche but highly valuable combination of design and development expertise, specifically within the Figma/Framer ecosystem. The preference for B2B SaaS and Fintech experience suggests the company operates in a sophisticated technical market, demanding a candidate who understands its nuances.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• A robust portfolio showcasing live website links is a mandatory requirement. Static screenshots or mock-ups will not suffice, as the ability to demonstrate functional, live web experiences is critical.

• The portfolio should highlight examples of Figma-to-Framer transformations, demonstrating the candidate's skill in bringing designs to life.

• Include case studies or examples of pages designed for lead generation, conversion optimization, and clear communication of complex products, reflecting the core responsibilities.

• Showcase examples of responsive design implementation across various devices (desktop, tablet, mobile) within the portfolio.

• Demonstrate the use of reusable components, CMS structures, or efficient section building within Framer, illustrating an understanding of scalable web development. Process Documentation:

• While not explicitly stated as a deliverable, candidates should be prepared to discuss their personal workflow and process for moving from a design brief to a published, optimized web page.

• Be ready to articulate your approach to quality assurance, testing, and ensuring cross-browser/device compatibility.

• Candidates should be able to explain their strategy for incorporating SEO best practices and analytics tracking into their development process.

• Be prepared to discuss how you manage feedback and revisions from stakeholders to ensure alignment with project goals and brand consistency.

📝 Enhancement Note: For a role heavily reliant on practical output, a strong portfolio isn't just a resume supplement; it's a primary evaluation tool. The emphasis on live links and specific technologies (Figma, Framer) means the portfolio must be immediately relevant and demonstrate end-to-end capability.

💵 Compensation & Benefits

Salary Range: For a mid-level Website Designer & Developer with 2-5 years of experience in Bangalore, India, the estimated annual salary range is ₹600,000 to ₹1,200,000 (approximately $7,200 to $14,400 USD, subject to exchange rate fluctuations).

Explanation: This estimate is based on industry benchmarks for skilled web developers and designers in the Bangalore tech hub, considering the specified experience level and the niche skillset (Figma-to-Framer). Location (Bangalore) is a key factor in cost of living and salary expectations. The specific range accounts for variations in individual experience, portfolio strength, and the exact scope of responsibilities.

Research Methodology: Data was synthesized from reputable salary aggregators for IT and design roles in India, with specific attention to the Bangalore region, and cross-referenced with typical compensation for specialized web development skills.

Benefits:

• Full-time Employment: Standard employment benefits applicable to full-time roles in India.

• Health Insurance: Comprehensive medical coverage for employees and potentially dependents.

• Paid Time Off: Annual leave, sick leave, and public holidays as per Indian labor laws and company policy.

• Professional Development: Opportunities for training, workshops, and skill enhancement, particularly in design and web development tools and technologies.

• Collaborative Work Environment: Access to a dynamic team environment focused on innovation and growth.

Working Hours: The standard working hours are likely 40 hours per week, typical for a full-time role in India, with potential for flexibility depending on project deadlines and team needs.

📝 Enhancement Note: Salary was estimated based on typical compensation for a skilled web developer in Bangalore. The specific benefits are inferred based on standard offerings for full-time positions in the Indian IT sector.

🎯 Team & Company Context

🏢 Company Culture

Industry: Facctum IT Solutions operates within the B2B Technology sector, specifically focusing on solutions for Fintech, RegTech, and potentially broader enterprise technology markets. This implies a need for a professional approach to explaining complex technical products and compliance challenges.

Company Size: Facctum is likely a growing company, indicated by the need for this role to revamp its website. This suggests a dynamic environment where individual contributions have a significant impact. The exact size is not specified, but roles like this often exist in either early-stage startups or expanding mid-sized companies.

Founded: The founding date is not provided, but the company's focus on modern technology implies it's a relatively contemporary organization.

Team Structure:

• The role reports directly to the Chief Marketing Officer (CMO), indicating a high level of visibility and direct collaboration with senior leadership.

• The candidate will work closely with the wider Marketing Team, suggesting a cross-functional dynamic where web development supports marketing initiatives.

• Collaboration will also extend to Brand, Content, and Product stakeholders, requiring versatility in communication and understanding of different departmental goals. Methodology:

• Data-Driven Design & Development: While explicit methodologies aren't detailed, the emphasis on conversion optimization, lead generation, and analytics integration suggests a data-driven approach to website improvements.

• Agile/Iterative Development: The need to "launch faster" and support "lean marketing teams" implies an iterative process where quick updates and improvements are valued.

• User-Centric Design: The focus on clear explanations of complex products and user journeys points towards a user-centric approach to designing web experiences.

Company Website: http://facctum.com/

📝 Enhancement Note: The company's industry and focus on B2B technology, particularly in Fintech/RegTech, mean the website's presentation must convey sophistication, trustworthiness, and clarity. This role is critical in achieving that.

📈 Career & Growth Analysis

Operations Career Level: This role is positioned as a Mid-Level Specialist or Senior Individual Contributor. It requires a strong foundation of practical skills and the ability to work independently on defined projects, while also collaborating with senior stakeholders. The direct reporting to the CMO suggests a significant level of responsibility and trust.

Reporting Structure: The role reports directly to the Chief Marketing Officer (CMO). This provides a direct line of communication to senior leadership and allows for clear alignment with strategic marketing objectives. Collaboration will be with various marketing team members and other departments.

Operations Impact: This role has a direct and measurable impact on Facctum’s commercial success. By improving the website's effectiveness in explaining products, generating leads, and strengthening brand credibility, the candidate will directly contribute to sales pipeline growth and overall revenue. The "Figma-to-Framer" specialization is key to enabling faster marketing execution and driving these outcomes.

Growth Opportunities:

• Skill Specialization: Deepen expertise in Framer and advanced web design/development techniques, potentially becoming a go-to expert for web experiences within the company.

• Cross-Functional Leadership: As the website's impact grows, there may be opportunities to lead small projects or mentor junior team members in design and development best practices.

• Strategic Input: Contribute to broader website strategy discussions, influencing the direction of digital marketing efforts and user experience across Facctum's online presence.

• Broader Tech Stack Exposure: While Framer is primary, opportunities to work with other web technologies or integrations may arise as the company's needs evolve.

📝 Enhancement Note: The direct reporting line to the CMO offers significant visibility, which can accelerate career progression for a high-performing individual. The focus on conversion and lead generation ties the role directly to business outcomes, making impact measurement clear.

🌐 Work Environment

Office Type: The role is listed as On-site, indicating a traditional office-based work environment. This suggests opportunities for in-person collaboration, team building, and direct mentorship.

Office Location(s): The office is located in Bangalore North, Karnataka, India, with a postal code of 560038. This is a well-established IT and business hub in India.

Workspace Context:

• Collaborative Environment: As an on-site role within a marketing team, expect a collaborative workspace where communication and interaction with colleagues are encouraged.

• Tools & Technology: Access to the necessary design and development tools, including Figma and Framer, will be provided. The company will likely support a robust technology stack to facilitate efficient work.

• Team Interaction: Opportunities for regular face-to-face interaction with the CMO, marketing team members, and other cross-functional stakeholders, fostering a strong team dynamic.

Work Schedule: The standard work schedule is likely aligned with typical business hours in India (Asia/Kolkata timezone), approximately 40 hours per week. While on-site, there may be some flexibility depending on project demands and company culture, but the primary expectation is presence in the office.

📝 Enhancement Note: The on-site nature of the role in a major tech city like Bangalore suggests a professional, potentially fast-paced work environment with ample opportunities for direct collaboration and mentorship.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A review of your resume and, crucially, your portfolio. Ensure your portfolio prominently features live links and examples relevant to the "Figma-to-Framer" workflow and conversion-focused web pages.

• Technical/Skills Assessment: Likely an interview focused on your Figma and Framer expertise. Be prepared to discuss your design process, Framer component building, responsive design implementation, and problem-solving approaches. A portfolio walkthrough will be essential here.

• Case Study/Challenge: You might be given a small design or development challenge, or asked to discuss how you would approach a specific website improvement task for Facctum. Focus on demonstrating your thought process, efficiency, and ability to translate requirements into functional web pages.

• Cultural Fit & Collaboration: Interviews with the CMO and potentially other marketing team members to assess your communication style, ability to collaborate, understanding of business goals, and alignment with the company's values.

Portfolio Review Tips:

• Highlight Live Work: Prioritize live website links over static mockups. For each project, briefly explain the objective, your role, the tools used (especially Figma and Framer), and the outcomes achieved.

• Showcase Figma-to-Framer: Clearly demonstrate your ability to take a design from Figma and build it effectively in Framer. This could be a dedicated section or highlighted within project descriptions.

• Emphasize Conversion & Business Impact: For each relevant project, articulate how your design and development contributed to lead generation, user engagement, or other commercial goals. Use metrics if possible.

• Demonstrate Responsiveness: Ensure your portfolio clearly shows how your designs and developed pages adapt seamlessly across different screen sizes.

• Organize for Clarity: Make it easy for the reviewer to navigate your portfolio and quickly find examples that match the job requirements.

Challenge Preparation:

• Understand Facctum's Business: Research Facctum's products, target market (Fintech, RegTech), and current website. Think about how a website can best serve a B2B technology audience.

• Practice Framer Workflows: Be ready to discuss your approach to building reusable components, CMS structures, and optimizing for performance and responsiveness in Framer.

• Articulate Design Rationale: Practice explaining the "why" behind your design choices, focusing on user experience, conversion optimization, and brand consistency.

• Prepare for Technical Questions: Brush up on HTML, CSS, basic SEO, and analytics tracking concepts, as these are mentioned in the requirements.

📝 Enhancement Note: The interview process will heavily weigh practical demonstration of skills via a portfolio. Candidates should tailor their portfolio and preparation to directly address the "Figma-to-Framer" requirement and the B2B technology context.

🛠 Tools & Technology Stack

Primary Tools:

• Figma: Essential for all design work, wireframing, and prototyping. Proficiency in creating design systems, components, and detailed mockups is expected.

• Framer: The core platform for building and publishing live websites. Expertise in Framer's design interface, component system, CMS, and publishing workflows is critical.

Analytics & Reporting:

• Google Analytics 4 (GA4): For tracking website traffic, user behavior, and conversion events. Understanding how to interpret GA4 data to inform website improvements is beneficial.

• Google Tag Manager (GTM): For managing and deploying tracking codes, tags, and pixels without directly editing website code.

CRM & Automation:

• HubSpot: Specifically mentioned for forms. Familiarity with integrating HubSpot forms into web pages and understanding its role in lead capture and marketing automation is important.

• Marketing Automation Tools: General familiarity with how websites integrate with broader marketing automation platforms for lead nurturing and campaign tracking.

Other Relevant Technologies:

• HTML & CSS: Fundamental for web development, especially for custom styling or minor code adjustments within Framer.

• Basic JavaScript: Preferred for adding interactive elements or custom functionality.

• WordPress: Mentioned as an additional skill, indicating potential exposure to other CMS platforms.

📝 Enhancement Note: This role is highly tool-specific, with a strong emphasis on the Figma-to-Framer pipeline. Candidates must demonstrate hands-on proficiency with these tools. Understanding how these tools integrate with analytics and CRM systems is also key.

👥 Team Culture & Values

Operations Values:

• Efficiency and Speed: The emphasis on "launch faster" and "reusable Framer sections" highlights a value placed on efficient workflows and rapid deployment of marketing initiatives.

• Quality and Polish: Despite the speed requirement, there's a strong emphasis on "visually polished," "clean," and "premium" web experiences, indicating a commitment to high-quality output.

• Commercial Focus: The role is explicitly tied to "lead generation and commercial growth," suggesting that business objectives and ROI are paramount in decision-making.

• Collaboration and Communication: Working closely with the CMO and various teams necessitates strong communication, teamwork, and the ability to incorporate feedback effectively.

• Detail-Oriented Ownership: The requirement for "strong attention to detail and ownership" implies a culture where individuals take pride in their work and ensure its accuracy and completeness.

Collaboration Style:

• Cross-Functional Integration: The role requires close collaboration with Marketing, Brand, Content, and Product teams, indicating a need for a collaborative approach that bridges departmental silos.

• Feedback-Driven Iteration: The process of taking briefs, incorporating feedback, and refining designs/pages suggests a culture that values constructive criticism and iterative improvement.

• Agile Marketing Support: The desire for Marketing to "launch faster" points to a support-oriented collaboration style, where the web development function enables marketing agility.

📝 Enhancement Note: The culture appears to blend the fast-paced nature of a growing tech company with a commitment to design quality and business impact. Collaboration is key, especially in aligning web development efforts with marketing and product strategy.

⚡ Challenges & Growth Opportunities

Challenges:

• Translating Complexity: A primary challenge will be simplifying Facctum's complex B2B technology products and compliance solutions into clear, accessible, and engaging web experiences for diverse audiences.

• Balancing Speed and Quality: The need to move quickly from design to live pages while maintaining high visual and functional standards can be demanding.

• Stakeholder Alignment: Ensuring that designs and implementations meet the diverse needs and expectations of multiple stakeholders (CMO, Marketing, Brand, Product) requires strong communication and negotiation skills.

• Keeping Pace with Technology: Staying current with the latest features and best practices in Figma and Framer, as well as evolving web standards, will be an ongoing challenge.

Learning & Development Opportunities:

• Advanced Framer Mastery: Opportunities to become a true expert in Framer, exploring its advanced capabilities, custom code integrations, and potentially contributing to its development ecosystem.

• Conversion Rate Optimization (CRO) Expertise: Deepen understanding of CRO principles and apply them directly to web page design and development, directly impacting lead generation metrics.

• SEO Integration: Grow expertise in on-page SEO and how it's implemented technically within Framer to improve organic search visibility.

• B2B Tech Marketing Insights: Gain a deeper understanding of the nuances of marketing for B2B technology companies, particularly in specialized sectors like Fintech and RegTech.

📝 Enhancement Note: The challenges are inherent to bridging design and development in a business-critical function. Growth opportunities lie in specializing further in the core technologies and expanding into related areas like CRO and SEO.

💡 Interview Preparation

Strategy Questions:

• "Describe your process for taking a design from Figma to a live, responsive page in Framer. What are the key steps and potential pitfalls?" (Focus on workflow, efficiency, and quality control.)

• "How would you approach designing a landing page for a complex B2B SaaS product, given a brief and some rough wireframes? What elements would you prioritize for conversion?" (Demonstrate understanding of design strategy and conversion principles.)

• "Facctum needs to explain complex financial crime compliance challenges on its website. How would you visually and structurally represent this information to be clear and engaging for potential clients?" (Assess ability to simplify complex topics.) Company & Culture Questions:

• "What do you know about Facctum and our target market (Fintech/RegTech)? How do you think our website can best serve these audiences?" (Show research and industry understanding.)

• "How do you typically collaborate with marketing teams or stakeholders when working on web projects?" (Assess collaboration style and ability to take direction.)

• "How do you ensure your web development work directly contributes to business goals like lead generation?" (Connect your work to commercial impact.) Portfolio Presentation Strategy:

• Structure Your Presentation: Begin with a brief overview of your key skills and experience, then guide the interviewer through 2-3 of your most relevant projects.

• Highlight Figma-to-Framer: For each project, clearly articulate the initial design in Figma and how you translated it into Framer, showcasing any components or reusable elements you created.

• Quantify Impact: Wherever possible, use metrics to demonstrate the success of your work (e.g., improved conversion rates, faster page load times, increased engagement).

• Showcase Responsiveness: Actively demonstrate the responsiveness of your work on different devices during your presentation.

• Be Prepared for Deep Dives: Anticipate questions about specific design choices, technical implementation details, and challenges faced during each project.

📝 Enhancement Note: Interview preparation should heavily focus on demonstrating the "Figma-to-Framer" expertise and the ability to translate business requirements into effective web pages that drive commercial outcomes.

📌 Application Steps

To apply for this Website Designer & Developer position:

• Submit your application through the provided link on the Zoho Recruit portal.

• Tailor Your Portfolio: Curate your portfolio to prominently feature live links showcasing your Figma-to-Framer workflow, responsive design capabilities, and examples of conversion-focused marketing pages. Prioritize projects relevant to B2B SaaS or Fintech/RegTech if possible.

• Optimize Your Resume: Ensure your resume clearly highlights your proficiency with Figma, Framer, HTML, CSS, and any relevant integrations (HubSpot, GA4, GTM). Use keywords from the job description and quantify your achievements where possible.

• Practice Your Presentation: Prepare a concise and compelling presentation of your portfolio, ready to walk interviewers through your process, design rationale, and the impact of your work. Practice explaining complex technical concepts simply.

• Research Facctum: Thoroughly research Facctum's company, its products, target market, and current website. Understand their business goals and how your role contributes to them.

⚠️ Important Notice: This enhanced job description includes AI-generated insights and operations industry-standard assumptions. All details should be verified directly with the hiring organization before making application decisions.

---