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.  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 or get premium support for guaranteed results.
Share Your Knowledge!
Contribute to the community and help other users to benefit from your answer with experience and knowledge.
