About this plugin

☕ This plugin is free to use.If it has helped you in your work and you’d like to show your appreciation, feel free to buy me a coffee!📝 DescriptionExport Design is an innovative plugin for Figma that allows me to quickly and efficiently convert my Figma projects into HTML and CSS code. Designed with designers and developers in mind, it streamlines the process of moving from design to finished code by eliminating the need for manual coding and reducing the risk of errors.Test it on the demo file.🚀 Main featuresit automatically converts to working HTML links between pages.Smart Component Detection: The plugin automatically detects reused components and generates optimized, shared CSS - resulting in up to 70% smaller files!Multi-Page Websites: I can select multiple frames and export them as a complete website with shared CSS and working navigation.Seamless Conversion: I can intuitively export selected frames and components from Figma directly to HTML/CSS.Semantic Class Naming: The plugin automatically generates descriptive and understandable class names, making the code easier to maintain and scale.Responsive Design: The generated HTML/CSS code is optimized for responsiveness using Flexbox, ensuring it looks great on all devices.CSS Optimization: It minimizes redundant styles and uses CSS variables for consistent management of colors and fonts.Image Exporting: Images are automatically exported in optimized formats (PNG/SVG) and integrated directly into the generated HTML.Google Fonts Integration: The plugin automatically adds links to Google Fonts based on the fonts used in my design, ensuring typography consistency.Advanced Selection: I can select multiple frames with Shift-click for range selection or use "Select All" for entire projects.Flexible Export Options: I can export complete projects as ZIP, individual HTML/CSS files, or just assets - whatever I need!ℹ️ How to Use the PluginSelect Frame(s) - Choose one or multiple frames you want to export. Hold Shift to select a range, or use "Select All" for entire project.Configure Options - Toggle "Generate prototype links" if you've created navigation interactions in Figma.Generate the Code - Click the "Generate Code" button in the plugin interface to start the conversion process.Preview*- Review the generated HTML and CSS directly in the plugin. For multi-page projects, switch between pages using the dropdown.Export Files - Choose your export option:Export Project (ZIP) - Complete website ready to deployExport HTML - Individual pages or all pages as ZIPExport CSS only - Shared stylesheetExport Images - Individual assets or all as ZIPDeploy** - Unzip and upload to your server - it just works! 🚀💡 TipsAdding Tags HTMLTo specify a semantic HTML tag for an element, include the appropriate tag in the element’s name, such as ,

,

. The plugin will use these tags when generating the HTML code.Example"

CTA""

Hello World "Using Prototype Links1. In Figma: Create prototype interactions (Button → On Click → Navigate to "About Page")2. In Plugin: Enable "Generate prototype links" checkbox🔧 Future UpdatesExport Design is currently in its second version and will be regularly updated with new features and improvements. I encourage you to test the plugin and share your feedback to help us continue developing this tool.⚠️ WarrningThe generated files are not intended for production use. They are designed to accelerate your workflow and serve as a starting point for further modifications.