Figma to mobile, tablet, and desktop Responsive HTML/CSS
Budget: $80 – $100 USD
I have a complete, signed-off UI in Figma and now need each screen converted into clean, component-based HTML and modern CSS so the application looks and feels identical on mobile, tablet, and desktop. The design follows a mobile-app flow, so touch-friendly interactions, smooth transitions, and lightweight assets are priorities.
Key expectations
• Pixel-perfect reproduction of every Figma frame, including fonts, colours, spacing, and micro-animations.
• Fluid breakpoints that adapt seamlessly from 320 px phones up to large desktop monitors.
• Cross-browser consistency in the latest versions of Chrome, Safari, Firefox, and Edge.
• Well-organised code (BEM, SCSS, Tailwind, or another scalable convention—open to your preference) and descriptive comments so future developers can extend it easily.
• Vanilla JavaScript or a lightweight framework for any dynamic elements shown in the prototype—no heavy dependencies unless truly required.
Deliverables
1. Zipped source folder containing all HTML, CSS/SCSS, JavaScript, and asset files.
2. A simple build/compile script if you use a pre-processor or bundler.
3. Live preview link (Netlify, Vercel, or similar) for final acceptance testing.
About the Project:
it is a CMS system that we need
Pages :
we have about 11 Screen and each page has owen Popup that need to be mede
Pleae check the attachment to get idea about the layout, later when u hired we will provide u teh figma Design .. Please not that soe screen the contnet is not done yet that has no effect on the pages
Please Note:
Chat screen we have hatml ready we can provide u that to impliment it in ur design!
About Figma:
Please export the elements like icons or Cards from figma "only SVG, No Png, no screehost ect.. our team will test each milestone u will deliver
Milestone total 3:
- Please note that section mean here the Page + Contnet + the Popups
Milestone #1
01 - Splash screen section included the Popup
02 - Dashboard section
03 - Chat + notification section
- Devliver the section to our Team
Milestone #2
01 - Create Project section
02 - Create Ticket section
03 - Create Tasks section
- Devliver the section to our Team
Milestone #3
01 - Create ToDo section
02 - Create Meeting section
03 - Create Setting section
- Devliver the section to our Team
Milestone #4
01 - Create Member section
02 - Create Team section
- Clean up the Code, Test it fix Bigs , deliver the Project sourcefiles to us !
- Devliver the section to our Team
We can provide u the host if when u need that .
Good luck
Key expectations
• Pixel-perfect reproduction of every Figma frame, including fonts, colours, spacing, and micro-animations.
• Fluid breakpoints that adapt seamlessly from 320 px phones up to large desktop monitors.
• Cross-browser consistency in the latest versions of Chrome, Safari, Firefox, and Edge.
• Well-organised code (BEM, SCSS, Tailwind, or another scalable convention—open to your preference) and descriptive comments so future developers can extend it easily.
• Vanilla JavaScript or a lightweight framework for any dynamic elements shown in the prototype—no heavy dependencies unless truly required.
Deliverables
1. Zipped source folder containing all HTML, CSS/SCSS, JavaScript, and asset files.
2. A simple build/compile script if you use a pre-processor or bundler.
3. Live preview link (Netlify, Vercel, or similar) for final acceptance testing.
About the Project:
it is a CMS system that we need
Pages :
we have about 11 Screen and each page has owen Popup that need to be mede
Pleae check the attachment to get idea about the layout, later when u hired we will provide u teh figma Design .. Please not that soe screen the contnet is not done yet that has no effect on the pages
Please Note:
Chat screen we have hatml ready we can provide u that to impliment it in ur design!
About Figma:
Please export the elements like icons or Cards from figma "only SVG, No Png, no screehost ect.. our team will test each milestone u will deliver
Milestone total 3:
- Please note that section mean here the Page + Contnet + the Popups
Milestone #1
01 - Splash screen section included the Popup
02 - Dashboard section
03 - Chat + notification section
- Devliver the section to our Team
Milestone #2
01 - Create Project section
02 - Create Ticket section
03 - Create Tasks section
- Devliver the section to our Team
Milestone #3
01 - Create ToDo section
02 - Create Meeting section
03 - Create Setting section
- Devliver the section to our Team
Milestone #4
01 - Create Member section
02 - Create Team section
- Clean up the Code, Test it fix Bigs , deliver the Project sourcefiles to us !
- Devliver the section to our Team
We can provide u the host if when u need that .
Good luck