Handshake 2.0: Figma to CSS Plugin

Design to code plugin for Figma. Generate CSS from your Figma selection.

Goal

AdorableCSS를 기반으로 개발하던 Handshake Plugin을 확장하여 CSS, TailwindCSS, Styled-components 등을 지원하면서 개발자들이 원하는 형태로 디자인에서 HTML+CSS 코드를 생성할 수 있도록 개발하고자 합니다.

아울러 Component 기능을 향상시키고 props나 Event 등을 디자인이 변경이 되어도 유지보수가 가능하도록 개선하고자 합니다.

---

Introduction

The plugin generates CSS from your Figma selection. It supports:

CSS Format

• CSS
• AdorableCSS
• TailwindCSS
• Styled-components

Template Format

• HTML
• Svelte
• React

Features

• Generate CSS from your Figma selection
• Preview HTML+CSS in browser
• Pixel perfect design to code
• Supports CSS, AdorableCSS, TailwindCSS, Styled-components
• Supports CSS variables

Installation

1. Download the [latest release](
2. Unzip the file
3. Double-click on manifest.json file
4. Open Figma and select a frame or an element
5. Run the plugin from the Plugins menu
6. Enjoy 🎉
7. If you want to update the plugin, you need to uninstall the previous version first
8. If you want to install the plugin for all users, you need to install it manually

Usage

1. Select a frame or an element
2. Run the plugin from the Plugins menu
3. Select the CSS format
4. Select the Template format
5. Click on the Generate button
6. Click on the Preview button
7. Click on the Copy button to copy the code to the clipboard
8. Paste the code in your editor
9. Enjoy 🎉

Development

1. Clone the repository
2. Install the dependencies with npm install
3. Run the plugin with npm run start:watch
4. Open Figma and select a frame or an element
5. Run the plugin from the Plugins menu
6. Enjoy 🎉

Author

👤 teo.yu

• Website: https://developer-1px.github.io/adorable-css/

Show your support

Give a ⭐️ if this project helped you!