The Figma to Kirki 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 Kirki.
• Access to Kirki’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 Kirki is simple:

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

The Figma to Kirki 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 Kirki.

2. Copy your Design:

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

3. Paste into Kirki:

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

4. Refine & Launch:

• Kirki will import your Figma design, maintaining layouts, styles, and spacing.
• You can now further customize your website within Kirki’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 Kirki can better transfer the design and convert the elements accordingly.