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 the design is pasted. The tutorial covers setting up layers for responsiveness, creating vertical lines, and aligning text and elements. The presenter also shows how to adjust the background, add a navigation bar layer, and implement animations for a fading effect on numbers. A 3D model is imported from getfab.com, and the Dora platform's timeline feature is used to animate the model and create a dynamic scrolling effect. The video concludes with the presenter encouraging viewers to explore Dora for more in-depth tutorials on building websites without coding.
Takeaways
- 🎨 **Design Cleanup**: Before transferring a Figma design to Dora, it's important to ensure the design is clean, with essential layers only and no hidden layers.
- 🔍 **Plugin Installation**: For first-time users, the Dora plugin can be found by searching for 'Figma to Dora' in the plugin tab.
- 📋 **Artboard Transfer**: With the artboard selected in Figma, running the plugin initiates the process of copying all layers to the Dora platform.
- 🌐 **Responsive Setup**: After transferring, each layer needs to be checked for proper responsiveness, ensuring elements are correctly constrained to the viewport.
- 📏 **Canvas Matching**: Ensure the canvas in Dora matches the height of the Figma artboard to maintain the design's integrity.
- 🔄 **Layer Positioning**: The design from Figma retains its position and layer separation in Dora, allowing for easy editing.
- 📊 **Vertical Lines Creation**: Creating vertical lines that span the page height involves setting the height to 100% of the viewport height.
- 🔗 **Alignment and Linking**: Text and elements can be linked to vertical lines to maintain alignment as the browser is scaled.
- 🔍 **Background Adjustment**: To fix gaps in the background, switching to 'Field Space' in the Wiz settings can help eliminate unwanted spacing.
- 📏 **Under Navigation Bar**: Adding a layer under the navigation bar can prevent overlap and ensure a clean layout.
- 🕒 **Timeline Animation**: The timeline panel in Dora allows for the creation of animations, such as fading in effects for elements as they come into the viewport.
- 📄 **3D Model Integration**: Dora supports the import of 3D models, which can be animated and positioned to enhance the web page's interactivity and visual appeal.
- 🎥 **Keyframe Animation**: Keyframes can be set for 3D models and the camera to create dynamic scrolling effects that respond to user interaction.
Q & A
What is the main topic of the video?
-The video is about converting a Figma design into a 3D web page using the Dora plugin without any coding.
What is the first step before moving the design to the Dora platform?
-The first step is to clean up the Figma design to ensure that all layers are essential and there are no hidden layers or unnecessary elements.
How does one access the Dora plugin in Figma?
-If it's your first time, you can click on 'Find more plugins' and search for 'Figma to Doras'. If you already have it, you can find it in the plugin tab.
What is the purpose of the Dora platform?
-Dora is a platform that allows users to create websites without any coding.
How does the Figma design get transferred to the Dora platform?
-After running the plugin with the artboard selected in Figma, the design is copied and then pasted into the Dora platform.
What does the video demonstrate about the layers after transferring from Figma to Dora?
-The layers remain in their exact position from the Figma layout, separated, and editable within the Dora platform.
How is responsiveness ensured for the layers in the Dora platform?
-Each layer is individually checked and adjusted. Elements are constrained to the viewport edges to ensure they behave correctly on different screen sizes.
What is the process for creating a vertical line that spans the entire page height in Dora?
-Create a container, set the width to one pixel, switch the height to viewport height, and set it to 100%, then align it to the top and connect it to the viewport top.
How does the video address the issue of a gap in the background?
-The video suggests going back to the canvas, accessing the Wiz settings, and switching it to 'field space' to eliminate the gap.
What is the purpose of linking text to a line in the Dora platform?
-Linking text to a line ensures that the text aligns with the line as the browser is scaled, maintaining a visually appealing layout.
How does the video demonstrate adding a 3D model to the web page?
-The video shows the process of importing a 3D model from a marketplace like getfab.com, downloading it in GLB format, and then importing it into Dora to add it to the page.
What additional feature is added to the 3D model to enhance the user experience?
-Keyframes are added to the 3D model to create an animation that makes the model move or rotate as the user scrolls, adding a dynamic element to the web page.
Outlines
🚀 Introduction to 3D Web Page Creation with Dora Plugin
The video begins with an introduction to converting a Figma design into a 3D web page using the Dora plugin. The presenter shows a simple landing page design in Figma and emphasizes the need to clean up the design by removing unnecessary layers. The Dora plugin is then used to transfer the design to the Dora platform, which is described as a no-code website creation tool. The process includes pasting the design onto the Dora canvas, ensuring the design's position and layer separation are maintained, and setting up layers for responsiveness.
📐 Aligning and Animating Elements for Responsive Design
The presenter continues by detailing the steps to align and animate elements for a responsive design. This includes adjusting headers, creating vertical lines to span the page, and ensuring elements like the hamburger menu and profile icon are constrained to the viewport. The process of publishing the design to check its responsiveness and fixing background gaps is also covered. Further, the text alignment with guidelines and the addition of a layer underneath the navigation bar to prevent overlapping are discussed. The presenter also introduces animations, such as fading in effects for numbers and 3D model importation from getfab.com, detailing how to set up constraints and create keyframes for animation.
🔄 Adjusting and Finalizing the 3D Animation and Background
The final paragraph covers the adjustment of a 3D model animation and the reintroduction of a previously removed blurry background. The presenter explains how to create keyframes for the 3D scene to add rotation as the user scrolls. The process of copying the background image from Figma using the plugin and pasting it into the Dora platform is demonstrated. The video concludes with a brief overview of the completed web page, highlighting the simplicity and the effectiveness of the Dora plugin in streamlining the design-to-web process. The presenter encourages viewers to learn more about Dora through its official YouTube channel for in-depth tutorials on no-code website creation.
Mindmap
Keywords
Figma
Dora Plugin
3D Web Page
Responsiveness
Artboard
Viewport
Timeline Panel
Keyframe
GLB Format
Easing
Fading Effect
Highlights
The video tutorial demonstrates how to convert a Figma design into a 3D web page using the Dora plugin.
Cleaning up the Figma design to ensure only essential layers are included is a crucial first step.
The Dora plugin can be found and installed through the Figma plugin tab for easy access.
A new project is created in the Dora platform and named for organization.
The artboard height from Figma is matched in Dora to maintain design integrity.
Layers from Figma are copied and pasted into the Dora platform, retaining their position and editability.
Each layer must be checked for proper setup to ensure responsiveness of the web page.
Elements can be constrained to the viewport for alignment and positioning.
Creating vertical lines that span the entire page height can add structure and visual appeal.
Publishing the page allows for a preview to check responsiveness and functionality.
Addressing background gaps by adjusting settings can improve the overall design.
Text elements can be tied to guidelines or lines for consistent alignment across the page.
Adding a layer under the navigation bar prevents overlap and enhances visual hierarchy.
The timeline panel in Dora is used to create and adjust scrolling animations.
Keyframes are utilized to create fading in animations for elements as they enter the viewport.
Importing a 3D model from a marketplace like GetFab and adding it to the page enhances interactivity.
3D models can be animated and keyframed to move as the user scrolls, adding depth to the design.
The tutorial concludes with a fully responsive and interactive 3D web page, showcasing the power of the Dora plugin.
For further learning, viewers are directed to Dora's official YouTube channel for more in-depth tutorials.