# Design break while importing mockups from figma

**URL:** <https://forum.builder.io/t/design-break-while-importing-mockups-from-figma/5944>\
**Category:** General\
**Created:** [July 9, 2024, 5:54am UTC](https://forum.builder.io/t/design-break-while-importing-mockups-from-figma/5944 "2024-07-09T05:54:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![abhisheksoni](https://avatars.discourse-cdn.com/v4/letter/a/3ec8ea/32.png) [@abhisheksoni](https://forum.builder.io/u/abhisheksoni)\
**Post date:** [July 9, 2024, 5:54am UTC](https://forum.builder.io/t/design-break-while-importing-mockups-from-figma/5944/1 "2024-07-09T05:54:05Z")

</div>

Hi Everyone,

I created a design on Figma and imported it into [builder.io](http://builder.io), the design was looking fine, but by default, the preview URL was showing - [Builder](https://preview.builder.codes?model=figma-imports)

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](https://monosnap.com/file/WudTIqCJg0Iw8CG8VqzEcLO7yIZ81j)

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

Thanks!

---

<div class="post-metadata">

**Author:** ![anon43891756](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@anon43891756](https://forum.builder.io/u/anon43891756)\
**Post date:** [July 10, 2024, 4:28pm UTC](https://forum.builder.io/t/design-break-while-importing-mockups-from-figma/5944/2 "2024-07-10T16:28:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![abhisheksoni](https://avatars.discourse-cdn.com/v4/letter/a/3ec8ea/32.png) [@abhisheksoni](https://forum.builder.io/u/abhisheksoni)\
**Post date:** [July 11, 2024, 4:21am UTC](https://forum.builder.io/t/design-break-while-importing-mockups-from-figma/5944/3 "2024-07-11T04:21:32Z")

</div>

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