Figma to HTML5 - Avoids all effects (Drop Shadow, Layer blend mode)« Back to Questions List

When I try to export the figma to HTML5, most of the things works fine. But the design is not same as figma prototype. The layer blend mode or drop shadow, blur etc are not converted in CSS/HTML.

In Some screens the icons move outside the frame. which breaks the design flow. for eg. in my figma design header has home and back button (icons). in HTML the back button icon is squeezed and move to top of the screen, outside the header area.

Anyone facing the similar issue. Or am I doing something wrong while exporting. Please need help.

Asked by bhavinksoni
Added April 10, 2023 6:22 pm

Do you have the right answer? If you do other users will benefit from your contribution, share your knowledge with the community!

as a new user i suggest you take each issue one by one.

1. layer blend mode and dropshadow
- the plugin work with all environments universally and not all support the same things, eg. html and android are not the same but the plugin can convert to each equally.
- use ${img} tag on the folder or layer to generate an image of the effect
- enable the effect on a layer only! and not the folder

2. elements squeezed outside the view
- you have to create a background element to use as a shape container for the group (in your case the header)
- the plugin requires you to create backgrounds for folders / content sections as shapes to use as both the background color and an area for the folder
- you can fix this by drawing a shape the same size as your folder and giving it a color or an effect rather an applying it to the folder
Answered On April 10, 2023 7:37 pm #
Looking for another answer? View other questions in HTML CSS Screen or get premium support for guaranteed results.
Asked by bhavinksoni
397 views
1 answer
Last Answered 1 year ago by Support

Categories

Recent Answers

asked by admin
asked by anup-sarkar
asked by originalife07
asked by yudhis
[+] View All Recent Questions

Share Your Knowledge!

Contribute to the community and help other users to benefit from your answer with experience and knowledge.