The Figma to Droip plugin streamlines the workflow between design and development, empowering you to create stunning websites with unparalleled ease and efficiency. 

• Seamless transfer of design components and styling from Figma to Droip.
• Access to Droip’s comprehensive set of features and tools for website development.
• Effortlessly maintain design consistency and efficiency throughout the design-to-development process.

Installation

Getting started with Figma to Droip is simple:

1. Open Figma and navigate to the Resources tab.
2. Search for Figma to Droip and select the plugin.
3. Click on Install.

The Figma to Droip plugin will now be available in your Figma interface.

Using the Plugin

1. Prepare your Figma Design:

• Ensure your Figma design is complete and uses well-organized layers and groups.
• Utilize Figma’s auto layout feature to adjust every section for optimal transfer to Droip.

2. Copy your Design:

• Select the Figma frame or group containing your website design.
• Click on Generate on the Figma to Droip plugin. 
• Once generated, simply choose copy. 

3. Paste into Droip:

• Open Droip and navigate to your desired project or create a new one.
• Paste the copied Figma design element into the Droip workspace using Cmd + V.

4. Refine & Launch:

• Droip will import your Figma design, maintaining layouts, styles, and spacing.
• You can now further customize your website within Droip’s user-friendly interface.
• Add interactivity, personalize elements with content and media, and adjust functionalities as needed.
• Once satisfied, hit publish to showcase your live website to the world!

Guidelines

For the following element types, use these specific built-in element names in Figma for easy identification during import. 

For example, if you have a button, label it as “__button__”, “__Button__”, or “__BUTTON__”. By following this naming convention, Figma to Droip can better transfer the design and convert the elements accordingly.