From Figma to a 3D Web Page with Dora Plugin - No code Tutorial

Minh Pham
6 Jun 202312:15

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

00:00

🎨 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.

05:00

🔗 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.

10:01

🚀 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

Figma is a cloud-based interface design and collaboration tool that allows designers to create, collaborate, and share their design projects. In the video, Figma is used to create a simple landing page design which is then transferred to the Dora platform using the Dora plugin.

💡Dora Plugin

The Dora Plugin is a tool that facilitates the transfer of designs from Figma to the Dora platform. It is used in the video to automate the process of moving a Figma design into a 3D web page on the Dora platform without the need for coding.

💡3D Web Page

A 3D web page is a type of website that incorporates three-dimensional graphics and elements to create a more immersive and interactive user experience. The video demonstrates how to create a 3D web page using the Dora platform and a plugin that connects with Figma.

💡Responsiveness

Responsiveness in web design refers to the ability of a website to adapt to different screen sizes and resolutions, ensuring that it looks and functions well on all devices. In the video, the designer checks and adjusts the layers to ensure that the 3D web page is responsive.

💡Viewport

The viewport in web design is the visible area of a web page that users can see without scrolling. It is the part of the browser window where the web content is displayed. In the video, elements are constrained to the viewport to ensure they remain in view as the page is scrolled.

💡Timeline Panel

The timeline panel in Dora is a feature that allows for the creation and manipulation of animations and transitions within the web page. It is used in the video to create animations for elements such as the big numbers and the 3D model.

💡Keyframe

A keyframe in animation is a specific moment in time where the state of an animated object is defined. In the video, keyframes are used to create animations for the 3D model and to adjust the camera angle as the user scrolls through the web page.

💡GLB Format

GLB is a file format for 3D models that is optimized for the web and is widely supported by platforms like Dora. In the video, a 3D model in GLB format is downloaded from getfab.com and imported into the Dora platform to be used in the 3D web page.

💡Easing

Easing in animation refers to the gradual acceleration or deceleration of an animated element, making the movement appear more natural. In the video, easing is added to the animations of the 3D model to enhance the visual effect as the user scrolls.

💡Sticky

A sticky element in web design is one that remains fixed in a specific position on the screen even when scrolling. In the video, the navigation bar is made sticky so that it stays at the top of the viewport as the user scrolls down the page.

💡Fading In Animation

A fading in animation is a type of animation where an element gradually becomes visible, appearing to fade in from transparent to opaque. In the video, a fading in animation is applied to the big numbers on the web page to create a smooth transition as they come into view.

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.