At a Glance
- Tasks: Transform Figma designs into stunning, mobile-first websites with TypeScript and trendy animations.
- Company: Join a dynamic team focused on innovative web development.
- Benefits: Opportunity for long-term collaboration and creative freedom.
- Why this job: Showcase your skills in pixel-perfect design and modern web practices.
- Qualifications: Experience in front-end development, Figma, and SEO best practices.
- Other info: Tight budget for initial phase, but potential for more work if successful.
The predicted salary is between 30000 - 42000 £ per year.
I'm looking for a front-end developer to convert a Figma design into a pixel-perfect, mobile-first website using TypeScript, with best-practice SEO and modern, trendy animations. This is a small first phase with a tight budget, with potential for additional pages and long-term work if the quality is strong.
Figma (Design Source)
Figma link:
Tech Stack (Required)
- TypeScript (App Router preferred)
- Tailwind CSS (required)
UI approach: shadcn/ui + Tailwind or pure Tailwind (either is fine)
Core Requirements
- Pixel-perfect implementation (match Figma layout, spacing, typography, and responsiveness)
- Mobile-first development approach (start with mobile and scale up)
- Best SEO practices baked into the build:
- Semantic HTML structure and correct heading hierarchy
- Proper metadata (title/description), Open Graph/Twitter tags where applicable
- Performance-conscious implementation (optimized images, minimal bloat)
- Basic accessibility hygiene (alt text, logical structure)
Project Budget (Phase 1)
Fixed price: $50 USD (tight budget for the first phase). If Phase 1 goes well, there will be more work and potential long-term collaboration.
What to Include in Your Proposal (Required)
- Confirm you reviewed the Figma link above
- Share 2–3 portfolio links showing Figma → (or equivalent) pixel-perfect conversions
- Confirm you can deliver mobile-first + pixel-perfect output
- Confirm your preferred styling approach (shadcn/ui + Tailwind or pure Tailwind)
- Briefly mention which animation approach you’d use (Framer Motion / GSAP / CSS, etc.) and why
- Your estimated delivery timeline for Phase 1
Preferred Candidate
- Strong attention to detail (spacing/typography)
- Experience building SEO-friendly marketing pages
- Comfortable implementing modern motion/animation tastefully
Note
I’ll share additional details and the animation reference site after the initial conversation to confirm fit and expectations. Contract duration of 1 to 3 months.
Mandatory skills: JavaScript, Animation, React, Figma, Front-End Development, Web Application, Website
Pixel-Perfect Figma → employer: FreelanceJobs
Contact Detail:
FreelanceJobs Recruiting Team
StudySmarter Expert Advice 🤫
We think this is how you could land Pixel-Perfect Figma →
✨Nail Your Portfolio
Make sure your portfolio showcases your best work, especially any Figma to pixel-perfect projects. We want to see that you can deliver on the mobile-first approach and have a keen eye for detail!
✨Show Off Your Skills
When you apply, highlight your experience with TypeScript and Tailwind CSS. We love seeing candidates who can demonstrate their knowledge of SEO best practices and modern animations, so don’t hold back!
✨Be Ready to Chat
Prepare for a conversation about your approach to the project. We want to know how you’d tackle the pixel-perfect implementation and what animation techniques you’d use. This is your chance to shine!
✨Apply Through Our Website
Don’t forget to apply through our website! It’s the best way for us to keep track of your application and ensure you’re considered for this exciting opportunity.
We think you need these skills to ace Pixel-Perfect Figma →
Some tips for your application 🫡
Review the Figma Design: Before you start your application, make sure you've thoroughly reviewed the Figma link provided. This shows us that you're detail-oriented and ready to deliver a pixel-perfect implementation.
Show Off Your Work: Include 2-3 links to your portfolio that showcase your skills in converting Figma designs into pixel-perfect websites. We want to see your best work, so pick projects that highlight your attention to detail and mobile-first approach.
Be Clear About Your Approach: In your proposal, confirm your preferred styling approach—whether it's shadcn/ui + Tailwind or pure Tailwind. This helps us understand how you plan to tackle the project and ensures we're on the same page from the get-go.
Timeline and Animation Style: Don't forget to mention your estimated delivery timeline for Phase 1 and briefly describe which animation approach you'd use. Whether it's Framer Motion, GSAP, or CSS, let us know why you think it fits the project!
How to prepare for a job interview at FreelanceJobs
✨Know Your Figma Inside Out
Before the interview, make sure you thoroughly review the Figma design linked in the job description. Understand every detail, from spacing to typography, so you can confidently discuss how you'll achieve a pixel-perfect implementation.
✨Showcase Your Portfolio
Prepare 2-3 portfolio links that highlight your previous work converting Figma designs into pixel-perfect websites. Make sure these examples demonstrate your attention to detail and ability to create mobile-first designs, as this is crucial for the role.
✨Be Ready to Discuss SEO Practices
Brush up on best-practice SEO techniques, especially those related to semantic HTML and metadata. Be prepared to explain how you’ll incorporate these practices into your build, as it’s a key requirement for the project.
✨Animation Approach Matters
Think about the animation styles you’d use and be ready to discuss them during the interview. Whether you prefer Framer Motion, GSAP, or CSS, explain why your choice fits the project’s needs and how it enhances user experience without compromising performance.