Skip to content

Commit 3b387dc

Browse files
committed
update readme
1 parent acbeb42 commit 3b387dc

File tree

3 files changed

+46
-21
lines changed

3 files changed

+46
-21
lines changed

FigmaAssetsFetch/Templates/Colors.swift.stencil

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
11
import UIKit
22

3-
enum Color: Int {
3+
public enum Color {
44
{% for color in colors %}
55
case {{ color.camelCaseName }}
66
{% endfor %}
77

8-
public func color(_ color: ThemeColor) -> UIColor {
8+
public var colorValue: UIColor {
99
switch color {
1010
{% for color in colors %}
1111
case .{{ color.camelCaseName }}:
12-
return UIColor(red: {{ color.figmaColor.r }}, green: {{ color.figmaColor.g }}, blue: {{ color.figmaColor.b }}, alpha: {{ color.figmaColor.a }})
12+
return UIColor(
13+
red: {{ color.figmaColor.r }},
14+
green: {{ color.figmaColor.g }},
15+
blue: {{ color.figmaColor.b }},
16+
alpha: {{ color.figmaColor.a }}
17+
)
1318
{% endfor %}
1419
}
1520
}

README.md

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,31 +8,32 @@ It can obtain color information from the specially prepared frame in any Figma d
88
## Getting Started
99

1010
### Figma part
11-
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).
11+
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).
1212
![Figma palette example](img/figma-palette-example.png)
13-
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).
13+
14+
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).
1415
![Creating style name in Figma](img/creating-style-name-in-figma.png)
1516

1617
### Template part
17-
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.
18+
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.
1819

1920
Example template:
2021

2122
import UIKit
2223

23-
enum Color {
24+
public enum Color {
2425
{% for color in colors %}
2526
case {{ color.camelCaseName }}
2627
{% endfor %}
2728

28-
public func color(_ color: ThemeColor) -> UIColor {
29+
public var colorValue: UIColor {
2930
switch color {
3031
{% for color in colors %}
3132
case .{{ color.camelCaseName }}:
3233
return UIColor(
33-
red: {{ color.figmaColor.r }},
34-
green: {{ color.figmaColor.g }},
35-
blue: {{ color.figmaColor.b }},
34+
red: {{ color.figmaColor.r }},
35+
green: {{ color.figmaColor.g }},
36+
blue: {{ color.figmaColor.b }},
3637
alpha: {{ color.figmaColor.a }}
3738
)
3839
{% endfor %}
@@ -41,28 +42,47 @@ Example template:
4142
}
4243

4344
### Command line part
44-
To run the utility you need to pass several parameters, please refer to example below:
45+
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.
46+
47+
#### `colors` command
48+
This command is used for template-based code generation of colors obtained from Figma file.
4549

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

55-
#### Where to get `figma-token`
59+
#### `xcassets` command
60+
This command is used to generate `*.xcassets` file with colors from Figma.
61+
62+
figma-assets-fetch \
63+
xc-assets \
64+
--figma-token $FIGMA_TOKEN \ #Figma API token
65+
--figma-file-id $FIGMA_FILE_ID \ #File identifier of your Figma document
66+
--colors-node-id $FIGMA_COLOR_NODE \ #Figma frame node id that contains color palete
67+
--asset-name $XCASSET_FILENAME \ #Optional. Name of the result *.xcassets file. Default is 'Colors'.
68+
--dark-color-style-name-prefix "Dark/" \ #Optional. Dark color style name prefix.
69+
--dark-colors-node-id $FIGMA_DARK_COLOR_NODE \ #Figma node identifier that contains a collection of ellipses with dark colors.
70+
--output "$OUT_FILE_PATH" #Where to save generated file
71+
72+
It is also possible to specify another Figma file for dark colors, use `--dark-colors-figma-file-id` parameter for it.
73+
74+
## F.A.Q
75+
76+
### Where to get `figma-token`?
5677
Obtain the access token on the Figma account settings page.
5778

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

60-
#### Where to get `figma-file-id`
81+
### Where to get `figma-file-id`?
6182
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`.
6283

63-
#### Where to get `colors-node-id`
64-
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).
65-
84+
### Where to get `colors-node-id`?
85+
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).
6686

6787
## Building
68-
The utility is written in Swift for macOS. Just clone the repository and build the project with the latest version of Xcode.
88+
The utility is written in Swift for macOS. Just clone the repository and build the project with the latest version of Xcode.

img/figma-palette-example.png

-144 KB
Loading

0 commit comments

Comments
 (0)