You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+38-18Lines changed: 38 additions & 18 deletions
Original file line number
Diff line number
Diff line change
@@ -8,31 +8,32 @@ It can obtain color information from the specially prepared frame in any Figma d
8
8
## Getting Started
9
9
10
10
### 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).
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).
14
15

15
16
16
17
### 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.
18
19
19
20
Example template:
20
21
21
22
import UIKit
22
23
23
-
enum Color {
24
+
public enum Color {
24
25
{% for color in colors %}
25
26
case {{ color.camelCaseName }}
26
27
{% endfor %}
27
28
28
-
public func color(_ color: ThemeColor) -> UIColor {
29
+
public var colorValue: UIColor {
29
30
switch color {
30
31
{% for color in colors %}
31
32
case .{{ color.camelCaseName }}:
32
33
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 }},
36
37
alpha: {{ color.figmaColor.a }}
37
38
)
38
39
{% endfor %}
@@ -41,28 +42,47 @@ Example template:
41
42
}
42
43
43
44
### 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.
45
49
46
50
figma-assets-fetch \
47
51
colors \
48
-
--figma-token $FIGMA_TOKEN \ #Figma API token obtained from your account page in Figma
52
+
--figma-token $FIGMA_TOKEN \ #Figma API token
49
53
--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
51
55
--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
53
57
--output "$OUT_FILE_PATH" #Where to save generated file
54
58
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`?
56
77
Obtain the access token on the Figma account settings page.
57
78
58
79

59
80
60
-
####Where to get `figma-file-id`
81
+
### Where to get `figma-file-id`?
61
82
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`.
62
83
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).
66
86
67
87
## 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.
0 commit comments