Skip to content

Commit

Permalink
update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
movch committed May 29, 2022
1 parent acbeb42 commit 3b387dc
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 21 deletions.
11 changes: 8 additions & 3 deletions FigmaAssetsFetch/Templates/Colors.swift.stencil
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
import UIKit

enum Color: Int {
public enum Color {
{% for color in colors %}
case {{ color.camelCaseName }}
{% endfor %}

public func color(_ color: ThemeColor) -> UIColor {
public var colorValue: UIColor {
switch color {
{% for color in colors %}
case .{{ color.camelCaseName }}:
return UIColor(red: {{ color.figmaColor.r }}, green: {{ color.figmaColor.g }}, blue: {{ color.figmaColor.b }}, alpha: {{ color.figmaColor.a }})
return UIColor(
red: {{ color.figmaColor.r }},
green: {{ color.figmaColor.g }},
blue: {{ color.figmaColor.b }},
alpha: {{ color.figmaColor.a }}
)
{% endfor %}
}
}
Expand Down
56 changes: 38 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,32 @@ It can obtain color information from the specially prepared frame in any Figma d
## Getting Started

### Figma part
1. Prepare your color palette in a separate frame in your Figma file. It should contain a certain number of ellipses, each of which must be filled with the appropriate color. See the [example file](https://www.figma.com/file/lzXbn6LsYv5kesGqDcsOAl/FigmaAssetsFetch-Palette-Example?node-id=0%3A1).
1. Prepare your color palette in a separate frame in your Figma file. It should contain a certain number of ellipses, each of which must be filled with the appropriate color. See the [example file](https://www.figma.com/file/1z5n1txr0nz7qMVzcS3Oif/figma-assets-fetch-palette-example?node-id=0%3A1).
![Figma palette example](img/figma-palette-example.png)
1. Every color you use in your palette should have a style with some name. Alternatively you can set the name of the ellipse filled with that color (if the style is not set, the utility will parse color name from the ellipse name).

1. Every color you use in your palette should have a style with some name. Alternatively you can set the name of the ellipse filled with that color (if the style is not set, the utility will parse color name from the ellipse name).
![Creating style name in Figma](img/creating-style-name-in-figma.png)

### Template part
The template file is just a [Stencil](https://github.com/stencilproject/Stencil) template. All colors obtained from Figma, are being passed to template as an array of objects. Refer to [ColorObjectModel](https://github.com/movch/figma-asset-fetch/blob/main/FigmaAssetsFetch/Models/ColorObjectModel.swift) to gain understanding about such objects content.
The template file is just a [Stencil](https://github.com/stencilproject/Stencil) template. All colors obtained from Figma, are being passed to template as an array of objects. Refer to [ColorData](https://github.com/movch/figma-asset-fetch/blob/main/FigmaAssetsFetch/Models/ColorData.swift) to gain understanding about such objects content.

Example template:

import UIKit

enum Color {
public enum Color {
{% for color in colors %}
case {{ color.camelCaseName }}
{% endfor %}

public func color(_ color: ThemeColor) -> UIColor {
public var colorValue: UIColor {
switch color {
{% for color in colors %}
case .{{ color.camelCaseName }}:
return UIColor(
red: {{ color.figmaColor.r }},
green: {{ color.figmaColor.g }},
blue: {{ color.figmaColor.b }},
red: {{ color.figmaColor.r }},
green: {{ color.figmaColor.g }},
blue: {{ color.figmaColor.b }},
alpha: {{ color.figmaColor.a }}
)
{% endfor %}
Expand All @@ -41,28 +42,47 @@ Example template:
}

### Command line part
To run the utility you need to pass several parameters, please refer to example below:
To run the utility you need to pass several parameters, use `figma-assets-fetch help` for detail description of parameters, or refer to the examples below.

#### `colors` command
This command is used for template-based code generation of colors obtained from Figma file.

figma-assets-fetch \
colors \
--figma-token $FIGMA_TOKEN \ #Figma API token obtained from your account page in Figma
--figma-token $FIGMA_TOKEN \ #Figma API token
--templates-directory "$TEMPLATES_DIR" \ #Path to directory with Stencil templates
--figma-file-id $FIGMA_FILE_ID \ #File identifier of your Figma document, can be extracted from the URL
--figma-file-id $FIGMA_FILE_ID \ #File identifier of your Figma document
--template-name Colors.swift.stencil \ #File name of the Stencil template to use
--colors-node-id $FIGMA_COLOR_NODE \ #Figma frame node id that contains color palete, can be obtained from Figma frame url
--colors-node-id $FIGMA_COLOR_NODE \ #Figma frame node id that contains color palete
--output "$OUT_FILE_PATH" #Where to save generated file

#### Where to get `figma-token`
#### `xcassets` command
This command is used to generate `*.xcassets` file with colors from Figma.

figma-assets-fetch \
xc-assets \
--figma-token $FIGMA_TOKEN \ #Figma API token
--figma-file-id $FIGMA_FILE_ID \ #File identifier of your Figma document
--colors-node-id $FIGMA_COLOR_NODE \ #Figma frame node id that contains color palete
--asset-name $XCASSET_FILENAME \ #Optional. Name of the result *.xcassets file. Default is 'Colors'.
--dark-color-style-name-prefix "Dark/" \ #Optional. Dark color style name prefix.
--dark-colors-node-id $FIGMA_DARK_COLOR_NODE \ #Figma node identifier that contains a collection of ellipses with dark colors.
--output "$OUT_FILE_PATH" #Where to save generated file

It is also possible to specify another Figma file for dark colors, use `--dark-colors-figma-file-id` parameter for it.

## F.A.Q

### Where to get `figma-token`?
Obtain the access token on the Figma account settings page.

![](img/figma-personal-access-token.png)

#### Where to get `figma-file-id`
### Where to get `figma-file-id`?
It can be parsed from the Figma file URL. For example, your Figma file URL is `https://www.figma.com/file/lzXbn6LsYv5kesGqDcsOAl/FigmaAssetsFetch-Palette-Example?node-id=0%3A1` then `figma-file-id` will be `lzXbn6LsYv5kesGqDcsOAl`.

#### Where to get `colors-node-id`
It can be parsed from the Figma file URL. For example, your Figma file URL is `https://www.figma.com/file/lzXbn6LsYv5kesGqDcsOAl/FigmaAssetsFetch-Palette-Example?node-id=0%3A1` then `colors-node-id` will be `0:1` (this is a decoded version of the URL encoded `0%3A1` string, you can use any [online decoder/encoder](https://meyerweb.com/eric/tools/dencoder/) to get it).

### Where to get `colors-node-id`?
It can be parsed from the Figma file URL. For example, your Figma file URL is `https://www.figma.com/file/lzXbn6LsYv5kesGqDcsOAl/FigmaAssetsFetch-Palette-Example?node-id=0%3A1` then `colors-node-id` will be `0:1` (this is a decoded version of the URL encoded `0%3A1` string, you can use any online decoder/encoder ([like this](https://meyerweb.com/eric/tools/dencoder/)) to get it).

## Building
The utility is written in Swift for macOS. Just clone the repository and build the project with the latest version of Xcode.
The utility is written in Swift for macOS. Just clone the repository and build the project with the latest version of Xcode.
Binary file modified img/figma-palette-example.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 3b387dc

Please sign in to comment.