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

00:00

πŸš€ 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.

05:00

πŸ“ 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.

10:01

πŸ”„ 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

Figma is a popular web-based interface design and collaboration tool. It allows designers to create, collaborate, and share design projects in real-time. In the video, the presenter uses Figma to create a design that will be transformed into a 3D web page, showcasing its role as a starting point for the design process.

πŸ’‘Dora Plugin

The Dora Plugin is a tool that facilitates the transition of a Figma design into a 3D web page on the Dora platform. It automates the process of transferring design elements, making it easier for designers to bring their 2D designs to life in 3D without writing code. The script demonstrates its use by importing a Figma design into the Dora platform.

πŸ’‘3D Web Page

A 3D web page is a type of website that incorporates three-dimensional elements, offering an immersive and interactive experience for users. The video's main theme revolves around creating such a page using the Dora platform and the Figma to Dora plugin, emphasizing the growing trend of 3D in web design.

πŸ’‘Responsiveness

Responsiveness refers to a web design's ability to adapt and display correctly across various devices and screen sizes. In the script, the presenter ensures that the layers in the design are set up properly to maintain responsiveness, which is crucial for a good user experience on both desktop and mobile devices.

πŸ’‘Artboard

In design software like Figma, an artboard is a workspace where designers can lay out their designs. The script mentions copying layers from the Figma artboard to the Dora platform, highlighting the artboard as a key component in the design transfer process.

πŸ’‘Viewport

The viewport in web design is the visible area of a webpage that users can see without scrolling. The script discusses constraining elements to the viewport, ensuring that the design layout remains consistent across different screen sizes and maintains a clean, organized appearance.

πŸ’‘Timeline Panel

The timeline panel is a feature in the Dora platform that allows for the creation of animations and transitions within the web page. The presenter uses the timeline panel to add animations to the 3D model and to ensure elements remain in view as the page is scrolled, adding a dynamic aspect to the web page.

πŸ’‘Keyframe

A keyframe is a specific moment in an animation sequence where a particular property, such as position or opacity, is defined. In the video, keyframes are used to animate the 3D model and create scrolling effects, which are essential for the interactive 3D experience.

πŸ’‘GLB Format

GLB is a file format used for storing 3D models and is compatible with the Dora platform. The script mentions downloading a 3D model in GLB format, which is then imported into the Dora project, demonstrating the use of 3D assets to enhance the web page's visual appeal.

πŸ’‘Easing

Easing in animation refers to the gradual transition of an object from one state to another, making movements appear more natural and smooth. The presenter adds easing to the animations in the timeline panel to improve the visual experience of the 3D web page.

πŸ’‘Fading Effect

A fading effect is a transition effect where an element gradually changes from opaque to transparent or vice versa. In the script, the presenter applies a fading effect to the numbers on the web page, creating a smooth reveal as the page is scrolled, enhancing the overall visual storytelling.

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.

Casual Browsing

AI02: Midjourney Web Design with Figma

2024-05-17 07:00:03

Web App Design with Midjourney in Figma

2024-05-08 22:35:01

AI03: Build a Website with Midjourney, Figma & ChatGPT

2024-05-08 20:55:02

Create Your Own AI Art Model with Open Art's Photobooth! (NO CODE BEST DREAMBOOTH)

2024-05-16 19:25:02

Illustrator Tutorial: Create a Vector Logo from a Rough Sketch

2024-05-17 17:50:03