Design not looking correct in code - what am I doing wrong?

Designer Topics
1

Hi All. I needed some help rendering one of my designs. Below is an example of what is happening:

Example
Example763×1057 162 KB

I am a first time user and looking to possibly start using Anima within the team. Can anyone give me some advice on what could help here?

To add some further details, I am using frames and auto layout throughout my Figma component. Here is a link to my file: https://www.figma.com/file/k4qAWWEOZkA62AP4RmCuev/Examples-%2F-Concepts?type=design&node-id=0%3A1&mode=dev

I also rendered another page, and found the HTML5 render looks very different to the React render. Is this normal?

Any help would be great. Thank you.

1 Like
2

Hello!

Thanks a lot for the message and patience!
I took a look at your design and while you did add Auto-Layout, which is a very nice start, you need to add Auto-Layout to the entire design (starting from the initial frame).

Then, afterwards it is important to test if the design is responsive within Figma before syncing to Anima. Remember that Anima will simply convert what the design is so ensuring everything is working properly within Figma is the best strategy to get the most accurate and responsive result!

Here is a short article regarding how to add Auto-Layout in an integral way in Figma: Create Responsive Designs in Figma | Anima Help Center

Let us know if this is helpful and thank you very much!

3

I can confirm the whole layout is using Auto-Layout. I’m not sure what I am doing wrong. I just can’t get it to render correctly.

4

Hello!

Thanks for the patience!
I fully understand.
Here is a short Loom I created that explains my reply a bit better regarding how to add Auto-Layout.
You can speed it up a bit as I tend to talk a bit slowly:

Let me know if this is useful and, if you have any more questions, let us know as well! :slight_smile: