Only convert solid fills to colors

[alldne]

Hi there

When I run figma-export colors on my project, there's a decoding error as follows:

$ figma-export --version
0.18.6

$ figma-export colors -i figma-export.yaml 
2020-12-29T13:13:30+0900 info com.redmadrobot.figma-export : Using FigmaExport to export colors.
2020-12-29T13:13:30+0900 info com.redmadrobot.figma-export : Fetching colors. Please wait...
Error: keyNotFound(CodingKeys(stringValue: "color", intValue: nil), Swift.DecodingError.Context(codingPath: [CodingKeys(stringValue: "nodes", intValue: nil), _JSONKey(stringValue: "1:66", intValue: nil), CodingKeys(stringValue: "document", intValue: nil), CodingKeys(stringValue: "fills", intValue: nil), _JSONKey(stringValue: "Index 0", intValue: 0)], debugDescription: "No value associated with key CodingKeys(stringValue: \"color\", intValue: nil) (\"color\").", underlyingError: nil))

This is because the key color is only defined in a paint of type SOLID according to the figma API reference. My project has paints of type IMAGE which don't have color and that's why the decoding error came out.

This PR makes the property color of Paint optional and replaces type: String with type: PaintType so that we can distinguish each paint type.

[subdan]

My project has paints of type IMAGE which don't have color and that's why the decoding error came out. It is a valid error because Figma doesn't support exporting image fills.

Is it correct that you have color style with image fill?

Mark this color style with "none" keyword to exclude it from export.

or Don‘t add this color style to your team library.

[subdan]

Alternatively, we can parse all types of color styles, but export only those that are supported by iOS and Android. For those color styles that aren't supported, we can show warning in the console.

[alldne]

My project has paints of type IMAGE which don't have color and that's why the decoding error came out. It is a valid error because Figma doesn't support exporting image fills.

Is it correct that you have color style with image fill?

To be honest I'm not sure if there's color style with image fill in my project and this is my first time using figma so please bear with me. But mine had a decoding error and when I printed out the JSON response, there were documents with "IMAGE" fill. I attached the part of the JSON response causing the error below:

{
    "name": "iOS - Light Mode",
    "lastModified": "2020-12-29T13:30:16Z",
    "thumbnailUrl": "redacted",
    "version": "607321799",
    "role": "viewer",
    "nodes": {
        "392:13": {
            "document": {
                "id": "392:13",
                "name": "Avatars/Logo/PG",
                "type": "RECTANGLE",
                "blendMode": "PASS_THROUGH",
                "absoluteBoundingBox": {
                    "x": 0,
                    "y": 0,
                    "width": 100,
                    "height": 100
                },
                "constraints": {
                    "vertical": "TOP",
                    "horizontal": "LEFT"
                },
                "fills": [
                    {
                        "blendMode": "NORMAL",
                        "type": "IMAGE",
                        "scaleMode": "FILL",
                        "imageRef": "eb6a720748f764bf4694ad99efa3825d5c8f72d5"
                    }
                ],
                "strokes": [],
                "strokeWeight": 1,
                "strokeAlign": "INSIDE",
                "effects": []
            },
            "components": {},
            "schemaVersion": 0,
            "styles": {}
        },
        "121:155": {
            "document": {
                "id": "121:155",
                "name": "Neutral/Gray4",
                "visible": false,
                "type": "RECTANGLE",
                "locked": true,
                "blendMode": "PASS_THROUGH",
                "absoluteBoundingBox": {
                    "x": 0,
                    "y": 0,
                    "width": 100,
                    "height": 100
                },
                "constraints": {
                    "vertical": "TOP",
                    "horizontal": "LEFT"
                },
                "fills": [
                    {
                        "blendMode": "NORMAL",
                        "type": "SOLID",
                        "color": {
                            "r": 0.8941176533699036,
                            "g": 0.8941176533699036,
                            "b": 0.8941176533699036,
                            "a": 1
                        }
                    }
                ],
                "strokes": [],
                "strokeWeight": 1,
                "strokeAlign": "INSIDE",
                "effects": []
            },
            "components": {},
            "schemaVersion": 0,
            "styles": {}
        },
...

You can see

                "fills": [
                    {
                        "blendMode": "NORMAL",
                        "type": "IMAGE",
                        "scaleMode": "FILL",
                        "imageRef": "eb6a720748f764bf4694ad99efa3825d5c8f72d5"
                    }

, which causes the decoding error as the decoder is assuming there must be color property in the object.

And there are too many nodes in the project so it's impossible for the designer to mark them as 'none'. In my humble opinion, I think the assumption you have in the code (= a paint always has color field.) is making the program fragile. Also figma document recommends that you make sure if the type is "SOLID" before accessing other properties.

The string literal "SOLID" representing the type of paint this is. Always check the type before reading other properties.

How do you think about this?

By the way thank you for the great tool! And it's 100% okay for you to not merge this to upstream as I can build my own for my use.

[subdan]

I look at your JSON and noticed that you have Figma’s color style with image fill.

FigmaExport expects that all the color styles are solid colors. Example:

But there is at least one color style with image fill. Example:

This is a raster image fill. FigmaExport doesn’t support this type of color style.

And there are too many nodes in the project so it's impossible for the designer to mark them as 'none'.

You don’t need to mark all nodes as "none". You should mark "none" only those color styles that you don’t want to be exported. In the example below only last color style must be marked as none:

---

I agree with you that FigmaExport should ignores unsupported fills. I will accept your PR.

[subdan]

Thanks for the PR! The new version released 0.18.7