Welcome to Eaze! 🥳 #
We’re excited to help you turn your Figma prototypes into fully functional websites. To get started, you’ll need to ensure your designs are ready for web, mobile, and tablet display.
This guide will walk you through the essential steps and best practices for creating responsive designs in Figma.
Make sure you’ve completed the following steps for a smooth setup of your Figma designs on Eaze:
1. Create Your Designs in Figma: #
- Ensure you have separate layouts for desktop, tablet, and mobile, or use Auto Layout for responsive designs.
- Recommended Frame Sizes:
- Desktop: 1440 x 1024 pixels
(This is a common size for desktop designs, but for a broader range, you might consider 1280 x 720 to 1920 x 1080 pixels.) - Tablet: 834 x 1112 pixels (iPad Pro)
(A good range for tablets is typically 768 x 1024 to 1280 x 800 pixels.) - Mobile: 375 x 812 pixels (iPhone X)
(Mobile designs often range from 320 x 568 to 414 x 896 pixels to accommodate different screen sizes and resolutions.)
- Desktop: 1440 x 1024 pixels
2. Prototype Your Design: #
- Connect all frames for seamless navigation between pages.
- Add interactions (hover effects, clicks) and animations for a better user experience.
3. Prepare for Responsiveness: #
- Use Auto Layout for elements to adapt to different screen sizes.
- Ensure consistent spacing, scalable fonts, and images across all layouts.
- Test your designs on various devices in Figma.
4. Finalize Your Prototype: #
- Double-check all links and buttons are connected to the correct frames or URLs.
- Review and test all interactions to ensure they work properly.
5. Ready to Go Live with Eaze: #
- Export your Figma file and log in to your Eaze account.
- Upload your file, choose your plan, and publish your website!