Learn how Azyrom transforms your visual designs into semantic HTML, CSS classes, and styles. Understanding this mapping helps you create more web-friendly designs.
The Conversion Process
When you publish or export your site, Azyrom converts your design elements into clean, semantic HTML and CSS:
- Elements become HTML tags (div, section, button, etc.)
- Visual properties become CSS styles
- Groups become nested containers
- Text elements become headings, paragraphs, or spans
Element to HTML Mapping
- Frame/Container - Becomes <div> or <section>
- Text - Becomes <h1-h6>, <p>, or <span>
- Rectangle - Becomes <div> with background
- Image - Becomes <img> with srcset for responsive
- Button - Becomes <button> or <a>
- Link - Becomes <a> with href
- Input - Becomes <input> or <textarea>
CSS Generation
Design properties are converted to CSS:
- Position/Size - width, height, position, top, left
- Colors - background-color, color, border-color
- Typography - font-family, font-size, font-weight, line-height
- Spacing - padding, margin, gap
- Layout - display, flex-direction, justify-content, align-items
- Effects - box-shadow, opacity, border-radius
Semantic HTML Tips
Improve your site's accessibility and SEO:
- Use text hierarchy (h1, h2, h3) for headings
- Mark navigation areas as nav elements
- Use button for interactive elements, a for links
- Add alt text to images
- Use semantic section wrappers (header, main, footer)
The Code Layers Panel
View and customize the generated code:
- Preview HTML structure
- See generated CSS
- Add custom classes and IDs
- Override automatic tag selection
- Add accessibility attributes
Responsive Output
- CSS media queries generated for each breakpoint
- Images exported at multiple resolutions
- Flexible units (%, rem) used where appropriate
- Mobile-first CSS structure
Best Practices
- Name layers descriptively - they become class names
- Use Auto Layout for flexible, responsive designs
- Group related elements logically
- Keep nesting depth reasonable
- Test exported code across browsers