Best practices

Layer Naming

Proper layer naming helps generate predictable and maintainable code.

• Name your section frames, for example, "Hero Section"
• Use "Container" for wrappers that should use the Tailwind CSS container class
• Use "Flex" for horizontal auto-layout frames
• Use "Flex Vertical" for vertical auto-layout frames
• Use "Grid" for grid layouts
• Name video frames as "Video"
• Name images as "Image" or "Aspect Ratio" when you want to use the images with fixed proportions

Spacing and Layout

• Use spacing and size variables from our Figma kit
• Avoid using fixed widths — this ensures better responsiveness

Colors

• Background variable for backgrounds
• Foreground or muted-foreground variables for text
• Primary variable for primary actions or links
• etc

Typography and Icons

Use the typography styles and variables defined in the UI kit as they follow Tailwind CSS conventions and ensure consistency. The plugin works best with Lucide icons included in the UI kit. Use these icons to avoid issues and guarantee compatibility.

By following these best practices, you'll achieve the most accurate and efficient results when generating code with our plugin, ensuring your design and development remain perfectly in sync.