Set your project theme
Page Settings contains the project’s theme: Primary Color, Primary Contrast, Accent Color, Accent Contrast, Base Typography (Font), and Monospace Font. Although the dialog is called Page Settings, these are shared project theme values.
- Use the primary and accent colors for consistent brand accents.
- Choose contrast colors that remain readable on those backgrounds.
- Review several pages after changing the project font. Text can wrap differently.
Style the selected element
Use the properties panel for the selected element’s layout and appearance. Check its parent if width, alignment, or spacing does not behave as expected.
A hard-coded color or font on imported content may not follow the theme automatically. Update that element’s styling when you want it to use your shared design choices.
Respect the project’s styling system
The editor includes Hygular and Tailwind styling support. Use the controls and utilities appropriate to the current project. A framework switch is not a guarantee that every imported class or interaction will be translated.
Figma imports currently produce Hygular content. Hygular-specific event actions also depend on Hygular components and runtime behavior.
Review the final result
- Test long headings and button labels after changing fonts.
- Check focus, hover, and contrast where controls are interactive.
- Review the exported result in its destination application as well as in the editor.