Skip to content

Commit

Permalink
Merge 159ac14 into 71f04de
Browse files Browse the repository at this point in the history
  • Loading branch information
marcomontalbano committed Sep 6, 2020
2 parents 71f04de + 159ac14 commit e9240d5
Show file tree
Hide file tree
Showing 19 changed files with 448 additions and 51 deletions.
89 changes: 79 additions & 10 deletions README.md
Expand Up @@ -7,7 +7,7 @@
</p>

<p align="center">
You can easily and automatically export your figma components and use them directly into your website.
You can easily and automatically export your figma components and styles and use them directly into your website.
</p>

<p align="center">
Expand All @@ -16,7 +16,47 @@
</p>


## Personal Access Token
## :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 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
- [x] font-variant
- [x] text-transform
- [x] text-decoration
- [x] text-align


## :old_key: Personal Access Token

First of all you have to set the environment variable `FIGMA_TOKEN`.

Expand All @@ -34,7 +74,8 @@ export FIGMA_TOKEN=<personalAccessToken>

> You can use [dotenv](https://www.npmjs.com/package/dotenv) or `export` the variable using `.bash_profile`/`.bashrc` file.
## Just Try

## :test_tube: Just Try

If you wanna try it just run following command and you will be able to download all components from https://www.figma.com/file/RSzpKJcnb6uBRQ3rOfLIyUs5 as .svg :sunglasses:

Expand All @@ -46,7 +87,18 @@ export FIGMA_TOKEN=<personalAccessToken>
npx -p @figma-export/cli -p @figma-export/output-components-as-svg figma-export components RSzpKJcnb6uBRQ3rOfLIyUs5 -O @figma-export/output-components-as-svg
```

## Packages
or you can export all styles into `.scss`

```sh
# export figma token
export FIGMA_TOKEN=<personalAccessToken>

# export figma styles as .scss variables
npx -p @figma-export/cli -p @figma-export/output-styles-as-sass figma-export styles RSzpKJcnb6uBRQ3rOfLIyUs5 -O @figma-export/output-styles-as-sass
```


## :package: Packages

### [@figma-export/core](/packages/core)

Expand All @@ -56,7 +108,7 @@ This package contains the core functionalities for `figma-export`. You can downl

This package allows you to consume all core functionalities from your terminal.

## Usage
## :book: Usage

Typically you'll prefer to use the `cli`. Here different ways to do the same:

Expand All @@ -65,10 +117,10 @@ Typically you'll prefer to use the `cli`. Here different ways to do the same:
You can use `figma-export` as part of your build process.

```sh
npm install --save-dev @figma-export/cli @figma-export/output-components-as-svg
npm install --save-dev @figma-export/cli @figma-export/output-components-as-svg @figma-export/output-styles-as-sass

# or using `yarn`
yarn add @figma-export/cli @figma-export/output-components-as-svg --dev
yarn add @figma-export/cli @figma-export/output-components-as-svg @figma-export/output-styles-as-sass --dev
```

Now you can create a `script` command inside your `package.json`.
Expand All @@ -78,7 +130,8 @@ Following an example:
```diff
{
"scripts": {
+ "figma:export": "figma-export components RSzpKJcnb6uBRQ3rOfLIyUs5 -O @figma-export/output-components-as-svg"
+ "figma:export-components": "figma-export components RSzpKJcnb6uBRQ3rOfLIyUs5 -O @figma-export/output-components-as-svg",
+ "figma:export-styles": "figma-export styles RSzpKJcnb6uBRQ3rOfLIyUs5 -O @figma-export/output-styles-as-sass",
}
}
```
Expand Down Expand Up @@ -116,6 +169,17 @@ Let's create the file `.figmaexportrc.js` and paste the following:
module.exports = {

commands: [

['styles', {
fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5',
onlyFromPages: ['figma-styles'],
outputters: [
require('@figma-export/output-styles-as-sass')({
output: './output/styles'
})
]
}],

['components', {
fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5',
onlyFromPages: ['icons', 'monochrome'],
Expand All @@ -129,10 +193,11 @@ module.exports = {
],
outputters: [
require('@figma-export/output-components-as-svg')({
output: './output'
output: './output/components'
})
]
}]

]

};
Expand All @@ -141,7 +206,7 @@ module.exports = {
now you can install the `@figma-export` dependencies that you need

```sh
npm install --save-dev @figma-export/cli @figma-export/transform-svg-with-svgo @figma-export/output-components-as-svg
npm install --save-dev @figma-export/cli @figma-export/output-styles-as-sass @figma-export/transform-svg-with-svgo @figma-export/output-components-as-svg @figma-export/output-styles-as-sass
```

and update the `package.json`.
Expand All @@ -163,3 +228,7 @@ If needed you can also provide a different configuration file.
}
}
```

## :books: More Packages

For the list of all official packages or if you want to create your own transformer or outputter you can continue reading [CLI Documentation](/packages/cli#readme).
Binary file modified images/figma--account-menu.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 43 additions & 3 deletions packages/cli/README.md
Expand Up @@ -62,7 +62,7 @@ A transform function receives an SVG and turns it into something new.

You can create you own:

```js
```ts
// with promise
module.exports = options => {
return (svg) => new Promise((resolve, reject) => {
Expand All @@ -71,7 +71,7 @@ module.exports = options => {
}
```

```js
```ts
// with async/await
module.exports = options => {
return async (svg) => {
Expand Down Expand Up @@ -99,7 +99,7 @@ An output function receives a list of pages, in which each page contains compone

You can create you own:

```js
```ts
module.exports = options => {
return async pages => {
console.clear();
Expand All @@ -117,3 +117,43 @@ or install an official outputter:
| [`@figma-export/output-components-as-svg`](/packages/output-components-as-svg) | [![npm](https://img.shields.io/npm/v/@figma-export/output-components-as-svg.svg?maxAge=3600)](https://www.npmjs.com/package/@figma-export/output-components-as-svg) |
| [`@figma-export/output-components-as-svgr`](/packages/output-components-as-svgr) | [![npm](https://img.shields.io/npm/v/@figma-export/output-components-as-svgr.svg?maxAge=3600)](https://www.npmjs.com/package/@figma-export/output-components-as-svgr) |
| [`@figma-export/output-components-as-svgstore`](/packages/output-components-as-svgstore) | [![npm](https://img.shields.io/npm/v/@figma-export/output-components-as-svgstore.svg?maxAge=3600)](https://www.npmjs.com/package/@figma-export/output-components-as-svgstore) |


### `styles`

Exports styles from a Figma file

```sh
npx figma-export styles FILEID

# help
npx figma-export help styles
```


#### outputters

> `--outputter` `-O` option
```sh
npx figma-export styles FILEID -O OUTPUTTER
```

An output function receives a list of styles.

You can create you own:

```ts
module.exports = options => {
return async styles => {
console.clear();
console.log(JSON.stringify(styles));
};
}
```

or install an official outputter:

| Package | Version |
|---------|---------|
| [`@figma-export/output-styles-as-sass`](/packages/output-styles-as-sass) | [![npm](https://img.shields.io/npm/v/@figma-export/output-styles-as-sass.svg?maxAge=3600)](https://www.npmjs.com/package/@figma-export/output-styles-as-sass) |
17 changes: 17 additions & 0 deletions packages/types/README.md
@@ -0,0 +1,17 @@
# @figma-export/types

> Types for [@figma-export](https://github.com/marcomontalbano/figma-export).
## Install

Using npm:

```sh
npm install --save-dev @figma-export/types
```

or using yarn:

```sh
yarn add @figma-export/types --dev
```
10 changes: 10 additions & 0 deletions packages/website/.figmaexportrc.js
Expand Up @@ -3,6 +3,16 @@ const { camelCase } = require('@figma-export/output-components-utils');
module.exports = {

commands: [
['styles', {
fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5',
onlyFromPages: ['figma-styles'],
outputters: [
require('../output-styles-as-sass')({
output: './output/figma-styles'
}),
]
}],

['components', {
fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5',
onlyFromPages: ['octicons-by-github'],
Expand Down
3 changes: 2 additions & 1 deletion packages/website/index.html
Expand Up @@ -19,12 +19,13 @@
<link rel="icon" type="image/png" sizes="96x96" href="./images/icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/icon/favicon-16x16.png">
<link rel="manifest" href="./images/icon/manifest.json">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,700;1,300;1,700&family=Roboto&family=Roboto+Condensed:wght@400;700&family=Spinnaker&display=swap" rel="stylesheet">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./images/icon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-solarizedlight.min.css" rel="stylesheet" />
<link rel="stylesheet" href="./index.scss" />
<link rel="stylesheet" href="./scss/index.scss" />
</head>
<body>
<div id="root"></div>
Expand Down
43 changes: 43 additions & 0 deletions packages/website/scss/_figma-styles.scss
@@ -0,0 +1,43 @@

// just using variables from the exported Figma Styles

.color-1 { background: $color-1 }
.color-1-lighter { background: $color-1-lighter }
.color-2 { background: $color-2 }
.color-3 { background: $color-3 }
.color-4 { background: $color-4 }
.color-alpha-50 { background: $color-alpha-50 }
.color-linear-gradient { background: $color-linear-gradient }
.color-linear-gradient-complex { background: $color-linear-gradient-complex }
.color-linear-gradient-alpha { background: $color-linear-gradient-alpha }
.color-multi-gradient { background: $color-multi-gradient }
.inner-shadow { box-shadow: $inner-shadow }
.inner-shadow-bottom { box-shadow: $inner-shadow-bottom }
.drop-shadow { box-shadow: $drop-shadow }
.layer-blur { filter: $layer-blur; background: $color-1 }
.multi-shadows { box-shadow: $multi-shadows }
.mixed-effects { box-shadow: $mixed-effects }

.h1 {
@each $name, $value in $h1 {
#{$name}: $value;
}
}

.h2 {
@each $name, $value in $h2 {
#{$name}: $value;
}
}

.regular-text {
@each $name, $value in $regular-text {
#{$name}: $value;
}
}

.deleted-text {
@each $name, $value in $deleted-text {
#{$name}: $value;
}
}
5 changes: 5 additions & 0 deletions packages/website/scss/_mixin.scss
@@ -0,0 +1,5 @@
@mixin for-desktop-up {
@media (min-width: 1024px) {
@content;
}
}
32 changes: 32 additions & 0 deletions packages/website/scss/_tooltip.scss
@@ -0,0 +1,32 @@
[data-tooltip] {
@include for-desktop-up {
position: relative;
}
}

[data-tooltip]::before {
content: attr(data-tooltip);
position: absolute;
font-size: 0.9em;
padding: 1px 5px;
color: white;
background: rgba(0, 0, 0, 0.75);
border-radius: 4px;
transition: opacity 0.1s ease-out;
z-index: 99;
text-align: left;

opacity: 0;

white-space: nowrap;
pointer-events: none;

top: 100%;
left: 50%;
margin-top: 10px;
transform: translate(-50%, 0px);
}

[data-tooltip]:hover::before {
opacity: 1;
}

0 comments on commit e9240d5

Please sign in to comment.