<p align="center" <img src="./images/figma-export.png" width="200" / </p
<p align="center" Export tool for Figma. </p
<p align="center" You can easily and automatically export your figma components and styles and use them directly into your website. </p
<p align="center" <a href="https://github.com/marcomontalbano/figma-export/actions/workflows/test.yml"<img alt="Test" src="https://img.shields.io/github/actions/workflow/status/marcomontalbano/figma-export/test.yml?style=for-the-badge" /</a <a href="https://coveralls.io/github/marcomontalbano/figma-export?branch=main"<img alt="Coverage Status" src="https://img.shields.io/coverallsCoverage/github/marcomontalbano/figma-export?style=for-the-badge" /</a <a href="https://github.com/sponsors/marcomontalbano"<img alt="Sponsor" src="https://img.shields.io/badge/-Sponsor-fafbfc?logo=GitHub%20Sponsors&style=for-the-badge" /</a </p
:sparkles: In Short
Components
You can export your Figma Components as SVG and use them inside your website.
This is particularly useful when you have your own icon set and you want to keep your website icons up-to-date with your Figma file.
Styles
You can export your Figma Styles into different output like .sass format, .scss format, Style Dictionary tokens or you can create your own outputter.
If you want to keep the style of your Figma file in-sync with the .css of your website, this is a must-have.
#### :art: Colors (paints)
- [x] Color
- [x] Linear Gradient
#### :lollipop: Effects
Shadow and Blur effects cannot be combined together since they use two different CSS properties.
- [x] Inner Shadow
- [x] Drop Shadow
- [x] Layer Blur
#### :pencil2: Text
- [x] font-family
- [x] font-weight
- [x] font-size
- [x] line-height
- [x] letter-spacing
- [x] font-style