Quick Start

This tutorial is designed to help you quickly transform your designs into websites using Daruma. We plan to offer two methods for this process:

  1. Publishing through the plugin provided by Daruma;
  2. Uploading local files to the Daruma dashboard for publishing.

Both methods allow for easy website creation without the need for coding.

Publishing through the plugin provided by Daruma

Step 1: Run the Daruma Plugin

  • Visit the Figma Community, search for Daruma, and add the plugin to your Figma design file that you want to publish as a website. Alternatively, open your Figma design file and search for and run the Daruma plugin within the Plugins menu.

Step 2: Log In and Authenticate

  • Log in using your account credentials or authenticate using a token to connect to Daruma services.

    log in

Step 3: Select File Operation

  • You can choose to create a new Daruma file for synchronization or select a previously synced Daruma file for an overwrite sync.

    new daruma

Step 4: Choose Frames for Sync or Deployment

  • Within your design file, select the Frames you wish to sync or deploy by clicking on their names in the list or directly select on the canvas.

    selected frames

Step 5: Transfer to Sync List

  • Add the selected Frames to the "Frames for Sync" list by dragging and dropping or using the transfer button in the list.

    frames for sync

Step 6: Preview Web Page

  • After adding Frames to the sync list, click the "Preview" button to review the web page effects and ensure they match your design expectations.

Step 7: Deploy or Sync

  • Click the "Deploy" button to initiate the sync and deployment process. You can add or edit website information before deploying. If you only want to sync design content to Daruma without deploying, click the "Sync" button.

    site information

Step 8: Successful Deployment

  • Upon successful deployment, a "Visit" button will appear next to the Deploy button. Click this button to view and experience the website you've just deployed.

    visit

Step 9: Update Design Content

  • If you need to make changes to the design, simply modify it in Figma and click the "Deploy" button again to update.

Explore More Features

  • The Daruma Dashboard offers more advanced features for you to explore, allowing for more in-depth website management and design sync settings.

Uploading local files to the Daruma dashboard for publishing

Step 1: Prepare Your Local Design File

  • Ensure your design file is in a format supported by Daruma, such as Figma, Sketch, or Adobe Illustrator, and has been saved locally.

Step 2: Access Daruma

  • Open your web browser, go to the official Daruma website, and log in to your account.

    dashboard_login

Step 3: Upload Design File

  • In the Daruma dashboard, locate and select "Upload File."

  • Choose your local design file and upload it to the Daruma.

    dashboard_select files

Step 4: Confirm Upload

  • After the upload is complete, verify that the file has been uploaded correctly.

    dashboard_uploaded

Step 5: Preview Design

  • Use Daruma's design preview feature to make sure the design content is displayed accurately on the Daruma.

    dashboard_preview

Step 6: Deploy Design

  • Select the "More" button, then click "Deploy" to begin the deployment process of your design.

    dashboard_deploy

Step 7: Successful Deployment

  • Upon successful deployment, a web page address will be provided. Click on this address to open your browser and view the deployed web page.

    dashboard_deploy_done

Step 8: Update Design Content

  • If you wish to update the web page, first, you need to re-import the new design file.
  • After that, you need to close the current deployment and open it again.
  • Once the deployment is done, you will see the updated version of your web page.