Most of the problems we had were related to gradients, here are some snapshots …

1. The first strip is original graphic created in Illustrator
2. The second strip FXG Exported from Illustrator
3. The third strip is original Illustrator file imported into Catalyst and then FXG exported from Catalyst

Clearly, all of them are different. While this difference may not feel significant when looked at in this isolated manner, if you have many gradients in your design it can significantly affect the fidelity of the design.

Here’s the code generated by Illustrator’s FXG export feature ..

Here’s the code generated by first importing the Illustrator file into Catalyst and then exporting FXG ..

Note that the colors exported by each are different.

Suggestion: Illustrator’s FXG export should have a way to add namespace prefixes while exporting, would be helpful

At this point, I asked about this problem on an Adobe forum and one of the team members replied and suggested I should … In Illustrator, convert colors to SRGB and turn off color management. So I did that.
Here’s the original followed by what it looks like with the new settings …

So, our designer will have to redo some work in the new settings to create the original look, that’s fine, as long as we can get the exact same look in out final Flex application. But that didn’t work out either ..

1. The original graphic with the new color settings applied
2. FXG exported from illustrator
3. FXG exported from Catalyst
4. The original graphic without the new color settings

Here’s the code of FXG exported from Illustrator …

Here’s the code of FXG exported from Catalyst …

Note that this time both the FXGs are exactly the same except they still don’t look like the desired look drawn in Illustrator. Even if we use different color settings.

Now I noticed that Illustrator also allows exporting to SVG so I exported my original graphic as SVG …

1. Original
2. SVG exported from Illustrator

So that’s not perfect either but its much closer than any of the FXG output above …

When I looked at the code of the exported SVG …

Clearly there is more color detail in there, it has 10 gradient stops as opposed to only 3 in the FXG output we got, this explains lower fidelity of our FXG output .. so I translated this SVG manually to FXG ..

Here’s the original followed by the final FXG I created manually …

Not perfect, but fairly close.

Suggestion: Illustrator and Catalyst FXG export should not drop gradient stops

Since, Catalyst is still in beta, I think Adobe will probably fix this by the time it releases but till then you can use the SVG workaround if you run into a similar situation.

I had to convince our designer to settle at “fairly close” for now, but if this Designer-Developer Workflow thing has to work, we need to get better at generating the exact look a designer draws in his/her design tool, at the click of a button.