Component
Component
Component
2 mins
Component
2 mins
2 mins
2 mins
📢 Currently, the Safari browser does not support the Figma to Dora plugin. We recommend using Chrome or the Figma desktop application.
How to install and run the plugin?
1
1
With this Figma plugin, you can easily transfer layers from Figma to Dora. Simply copy the layers from Figma and paste them onto the Dora canvas.
VIEW NEXT
Step 1.
Best Practices
2
2
You can run the last plugin again using (Mac) or (Windows).
Step 1. Open Keyframe Drivers
Step 5.
Click the Drivers button show or hide the current page's keyframe drivers.
Paste the copied content onto the canvas.
Click the Drivers button show or hide the current page's keyframe drivers.
Paste the copied content onto the canvas.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 5.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 5.
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
https://youtu.be/v_xPsgwMf6EStep 1. Open Keyframe Drivers
Step 1. Add a Driver
Click the Drivers button show or hide the current page's keyframe drivers.
1. Select the "Container" Layer. 2. Click "Add a Driver from Container" in the upper right corner of the keyframe panel.
Click the Drivers button show or hide the current page's keyframe drivers.
- Capability to transfer custom fonts - Support for transferring vectors - Ability to transfer corner smoothing translations - Fully functional Components/Instances - Support for importing Figma libraries
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
The Dora team is constantly working to improve Figma-Dora compatibility. Here are some features we will include in future releases:
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
App TourDora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
01. Constraint LayoutConstraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
02. KeyframeKeyframe
Keyframe
Keyframe
Keyframe
01. Constraint LayoutConstraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
06. Image SequenceImage sequence
Image sequence
Image sequence
Image sequence
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
01. Constraint LayoutConstraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
07. DatabaseDatabase
Database
Database
Database
05. ComponentComponent
Component
Component
Component
06. Image SequenceImage sequence
Image sequence
Image sequence
Image sequence
App TourDora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
07. DatabaseDatabase
Database
Database
Database
03. 3D3D
3D
3D
3D
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
01. Constraint LayoutConstraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
02. KeyframeKeyframe
Keyframe
Keyframe
Keyframe
05. ComponentComponent
Component
Component
Component
01. Constraint LayoutConstraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
02. KeyframeKeyframe
Keyframe
Keyframe
Keyframe
Database
Database
Database
Database
App TourDora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
07. DatabaseDatabase
Database
Database
Database
App TourDora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
App TourDora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
03. 3D3D
3D
3D
3D
06. Image SequenceImage sequence
Image sequence
Image sequence
Image sequence
06. Image SequenceImage sequence
Image sequence
Image sequence
Image sequence
01. Constraint LayoutConstraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
05. ComponentComponent
Component
Component
Component
App TourDora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
05. ComponentComponent
Component
Component
Component
07. DatabaseDatabase
Database
Database
Database
Component
Component
Component
Component
02. KeyframeKeyframe
Keyframe
Keyframe
Keyframe
05. ComponentComponent
Component
Component
Component
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
03. 3D3D
3D
3D
3D
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
05. ComponentComponent
Component
Component
Component
02. KeyframeKeyframe
Keyframe
Keyframe
Keyframe
07. DatabaseDatabase
Database
Database
Database
02. KeyframeKeyframe
Keyframe
Keyframe
Keyframe
06. Image SequenceImage sequence
Image sequence
Image sequence
Image sequence
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
07. DatabaseDatabase
Database
Database
Database
03. 3D3D
3D
3D
3D
06. Image SequenceImage sequence
Image sequence
Image sequence
Image sequence
App TourDora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
Keyframe
Keyframe
Keyframe
Keyframe
03. 3D3D
3D
3D
3D
Image sequence
Image sequence
Image sequence
Image sequence
03. 3D3D
3D
3D
3D
03. 3D3D
3D
3D
3D
Step 1. Open Keyframe Drivers
Less is More
Click the Drivers button show or hide the current page's keyframe drivers.
Opt for small and incremental imports when possible.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
P
Step 1. Open Keyframe Drivers
Merge Layers
Click the Drivers button show or hide the current page's keyframe drivers.
Merge individual layers together to improve upload speed.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Watch tutorial video
Step 1. Open Keyframe Drivers
Only import what you will publish
Click the Drivers button show or hide the current page's keyframe drivers.
Select the Rectangle and add two keyframes at 100 and 200 in the Container Driver.
Click the Drivers button show or hide the current page's keyframe drivers.
As Dora is a tool for building functional websites, we recommend importing only the content you intend to publish. Importing multiple drafts from Figma may clutter your Dora workspace.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Only import what you will publish
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Only import what you will publish
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Need help? For support or to report any issues with the plugin, please contact the Dora support team at ➡️ help@dora.run
Import from Figma
Step 1. Open Keyframe Drivers
Step 3.
Click the Drivers button show or hide the current page's keyframe drivers.
Right-click and select "Plugins" → "Figma to Dora"
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Upcoming Features
3
3
Step 1. Open Keyframe Drivers
Step 2.
Click the Drivers button show or hide the current page's keyframe drivers.
In Figma, select the layers you want to copy.
Click the Drivers button show or hide the current page's keyframe drivers.
In Figma, select the layers you want to copy.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 2.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 2.
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Control
Alt
Step 1. Open Keyframe Drivers
Step 4.
Click the Drivers button show or hide the current page's keyframe drivers.
In Dora, open a new or existing project
Click the Drivers button show or hide the current page's keyframe drivers.
In Dora, open a new or existing project
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 4.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 4.
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
⌘
➡️ https://youtu.be/v_xPsgwMf6E
⌥
P
Install the Figma to Dora plugin.
05. Component➡️ https://www.figma.com/community/plugin/1237284331245025847