From Figma to a 3D Web Page with Dora Plugin - No code Tutorial
TLDRIn this tutorial, the presenter demonstrates how to transform a Figma design into an interactive 3D web page using the Dora plugin. The process begins with cleaning up the Figma design to ensure only essential layers are included. The Dora plugin is then used to transfer the design to the Dora platform, where a new project is created and layers are arranged to match the Figma layout. The tutorial covers making the design responsive, creating vertical lines for layout structure, and adjusting elements to align with the viewport. The presenter also adds a 3D model from getfab.com, sets up keyframes for animation, and ensures the layout remains responsive across different browser sizes. The video concludes with a fully responsive and interactive 3D web page, showcasing the efficiency of the Dora plugin for web design without coding.
Takeaways
- 🎨 **Use Dora Plugin to Convert Figma Design**: The video demonstrates how to use the Dora plugin to convert a Figma design into a 3D web page without coding.
- 🧹 **Clean Up Figma Design**: Before transferring, ensure the Figma design is clean, with essential layers only and no hidden layers.
- 🔍 **Find and Install Dora Plugin**: If it's your first time, find the Dora plugin in Figma by searching for 'Figma to Dora'.
- 📋 **Transfer Layers to Dora**: Copy the layers from the Figma artboard and paste them into a new project on the Dora platform.
- 📏 **Ensure Responsiveness**: Check and adjust layers for proper responsiveness, including aligning elements to the viewport edges.
- 📐 **Create Vertical Lines**: Make vertical lines that span the height of the viewport for design elements alignment.
- 🔄 **Distribute Lines Evenly**: Distribute the vertical lines evenly across the viewport for a balanced layout.
- 🔍 **Preview and Adjust**: Preview the design to check for any gaps or issues, and adjust the settings as needed to fix them.
- 🔗 **Link Text to Lines**: Align text elements to the vertical lines for a clean, structured look that maintains alignment on different screen sizes.
- 📊 **Add Animations**: Create animations such as fading in for numbers as they come into the viewport for a dynamic user experience.
- 🛍️ **Import 3D Models**: Enhance the web page by importing 3D models from a marketplace like getfab.com, compatible with Dora.
- 🎥 **Animate 3D Models**: Add keyframes to the 3D models to create animations, such as flying or rotating, for an interactive and engaging effect.
Q & A
What is the purpose of the Dora plugin mentioned in the video?
-The Dora plugin is used to convert a Figma design into a 3D web page without the need for coding.
How does one find and use the Dora plugin in Figma?
-If it's your first time using the plugin, you can find it by clicking on 'Find more plugins' in Figma and searching for 'Figma to Dora'. Once found, select the artboard and click 'Run' to start the process.
What is the first step to take after transferring the design to the Dora platform?
-The first step is to create a new project in the Dora platform, name it, and ensure that the canvas size matches the Figma artboard's dimensions.
How does the video ensure that the design remains responsive after being transferred to the Dora platform?
-The video demonstrates setting constraints for various elements, such as headers and navigation icons, to ensure they align properly with the viewport and maintain responsiveness.
What is the process for creating vertical lines that span the entire height of the page?
-A container is created with a width of one pixel and a height set to 100% of the viewport height. Then, the lines are aligned to the top and connected to the viewport top and sides to distribute them evenly.
How is the background gap issue resolved in the video?
-The background gap is resolved by going to the Wiz settings in the Dora platform and switching it to 'Field Space'.
What is done to ensure that text aligns with the vertical lines as the browser is scaled?
-The text is linked to the vertical lines, ensuring that as the browser is scaled, the text will always align to the lines.
How does the video address the issue of overlapping elements on the web page?
-A layer is added underneath the navigation bar and is set to have a width of 100% of the viewport width and is positioned correctly to prevent overlapping.
What is the method used to create a fading in animation for the numbers on the web page?
-A keyframe is created at the point where the numbers appear in the viewport, the opacity is set to zero, and then the opacity is increased to create a fading effect.
How does the video demonstrate the import and use of a 3D model on the web page?
-A 3D model is downloaded from getfab.com in GLB format, imported into Dora, and constraints are set to fill the whole screen. Animations and camera angles are adjusted using keyframes in the timeline panel.
What additional step is taken to make the 3D model more dynamic on the web page?
-Keyframes are added to the camera and the 3D model to create movement, such as flying around, and easing is applied to these animations for a smoother effect.
How can viewers learn more about Dora and creating websites without coding?
-Viewers can learn more about Dora by visiting the official Dora YouTube channel, where they can find in-depth tutorials on creating websites without coding.
Outlines
🎨 Figma to Dora: 3D Web Page Creation
The video begins with an introduction to converting a Figma design into a 3D web page using the Dora plugin. The presenter shows how to clean up the Figma design by removing unnecessary layers and ensuring only essential elements remain. They then demonstrate the process of using the Dora plugin to copy layers from Figma and paste them into the Dora platform. The importance of setting up layers for responsiveness is emphasized, and the presenter guides viewers through aligning elements, creating vertical lines, and ensuring the layout is fully responsive. The video also addresses how to fix background gaps and link text to guidelines for alignment.
🔗 Aligning Elements and Adding a Background Layer
This paragraph focuses on the alignment of elements on the web page and the addition of a background layer to prevent overlapping. The presenter moves elements to ensure they do not overlap with the navigation bar and creates a container to serve as a background layer. They adjust the layer's width, position, and color to match the design's background. The presenter also uses the timeline panel to ensure the panel stays at the top of the viewport during scrolling animations. They add keyframes to create a fading-in animation for large numbers, making the page feel more natural. The process is repeated for the rest of the page to maintain proper alignment and responsiveness.
🚀 Importing 3D Models and Adding Animation
The presenter moves on to importing a 3D model into the web page from getfab.com, a marketplace for compatible 3D models. They download a model in GLB format and import it into Dora, setting constraints to fill the whole screen. After importing, the presenter enables the animation for the model and adds keyframes to the camera to create a dynamic scrolling effect. They also adjust the 3D model's position and add easing to the animation for a smoother transition. The video concludes with the presenter fixing a missing blurry background by copying it from Figma to Dora and adding a rotation animation to the 3D scene for added dynamism. The presenter summarizes the benefits of using the Dora plugin for speeding up the design-to-web process and encourages viewers to learn more about Dora through their official YouTube channel.
Mindmap
Keywords
💡Figma
💡Dora Plugin
💡3D Web Page
💡Responsiveness
💡Viewport
💡Timeline Panel
💡Keyframe
💡GLB Format
💡Easing
💡Sticky
💡Fading In Animation
Highlights
The video tutorial demonstrates converting a Figma design into a 3D web page using the Dora plugin.
The process begins with cleaning up the Figma design to ensure only essential layers are included.
The Dora plugin can be found and installed from Figma's plugin tab for easy integration.
After copying layers from Figma, they can be pasted directly into the Dora platform.
Dora is a no-code platform that allows users to create websites with a visual interface.
The tutorial shows how to ensure layers are set up properly for responsiveness.
Elements can be constrained to the viewport for alignment and positioning.
Creating vertical lines can help in structuring the layout and maintaining consistency across the page.
The tutorial covers how to publish the design to check its responsiveness and make necessary adjustments.
Background gaps can be fixed by adjusting settings in the Dora platform.
Text elements can be tied to lines or other elements to maintain alignment as the page scales.
Adding a layer under the navigation bar prevents overlapping and improves the layout.
The timeline panel in Dora is used to create scrolling animations and keyframes.
Fading in animations can be added to elements for a more dynamic and natural feel.
3D models can be imported from marketplaces like getfab.com and integrated into the Dora project.
Keyframes can be used to animate 3D models, making them move as the user scrolls.
The tutorial shows how to adjust camera angles and add easing to 3D model animations.
Blurry backgrounds can be reintegrated into the design using the Dora plugin.
The final result is a responsive and interactive 3D web page created without any coding.
The Dora platform and its plugin significantly speed up the process of turning designs into functional web pages.
For more in-depth tutorials on using Dora, viewers are encouraged to follow the official Dora YouTube channel.
