beta

Maximize Figma’s auto layout feature to ensure your HTML output is consistent and responsive. Avoid using fixed-width constraints to allow elements to adapt smoothly across different screen sizes.

Consistent naming across your frames is crucial. Use clear, descriptive names for frames and elements—these will become the class names in your HTML. Consistency here means your HTML will be organized, semantic, and easy to maintain.

Keep your frames well-organized and in logical order. This structure directly translates to your HTML output, making it easier to manage and ensuring the final code is both coherent and maintainable.

For accurate rendering, stick to the recommended naming conventions for HTML elements. For example:

Define your colors and fonts using CSS variables. This approach not only promotes consistency across your design but also simplifies global style adjustments down the line.

To ensure your text renders correctly in the exported HTML, use Google Fonts. If your design includes non-Google Fonts, replace them with similar Google Fonts to maintain the intended look.

1. Text formatting
   Ordered lists only work if they are explicitly defined as text characters. Inline list items that aren’t text won’t be supported, so ensure your lists are text-based.
2. Image Handling
   Be cautious with images inside auto layout frames—shadows might not render as expected. Additionally, if a layer uses a mask, the parent node may be treated as an image, affecting how the mask is applied
3. Font Compatibility
   Only Google Fonts are fully supported. Non-Google Fonts may not render as intended, so always substitute them with equivalent Google Fonts.
4. Rotations and Transformations
   Complex rotations or combined transformations might not translate perfectly into the exported HTML. Simpler transformations are generally more reliable.