Design break while importing mockups from figma

General
1

Hi Everyone,

I created a design on Figma and imported it into builder.io, the design was looking fine, but by default, the preview URL was showing - Builder

When I changed it to my localhost the design broke, and again when I switched back to the old one, it again fixed.

Video - Monosnap

This is the code I am using in my Angular application -

Thanks!

2

Hi @abhisheksoni I would suggest to check the following:-

  1. Check Styles and Scripts:
  • Ensure that any global styles or external stylesheets required for your design are included in your Angular application.
  • Compare the styles and scripts loaded in the Builder preview with those loaded in your localhost environment.
  1. Inspect Elements and Console:
  • Use browser development tools to inspect broken elements and check for any discrepancies or errors in the console.
  1. Sync Environment:
  • Ensure your development environment (localhost) matches as closely as possible with the production environment defined in Builder’s preview.
  1. Local Development URL:
  • Make sure that the content blocks and custom components you use are correctly registered and mapped to your local development URL.
3

Ok, Thanks for looking into this matter. I’ll check.