9

Adobe Illustrator vs XD for animation-heavy project (After Effects/Bodymovin'/Lottie)

over 5 years ago from , Interaction Designer

I'm about to start a new mobile project that will be light on the total number of screens and have a pretty compact design library, but it will be very heavy in animation. We will be using After Effects and Bodymovin'/Lottie quite a bit to deliver production animation and also as a primary method of expression/prototyping (there will be a bit of Framer work for any interaction-focused prototypes and some user testing, but the bulk of the design review will be in video format).

We generally design in Sketch but, for this project, we're considering designing in Illustrator for the sake of a streamlined AE flow. I realize XD is more adept at screen layout & UX design, but I'm wary of the apparent gap between XD, AI and AE. (https://helpx.adobe.com/xd/help/working-with-external-assets.html#illustrator)

Is my concern valid? Interested to know the experience others have had designing in XD when heavier AE animation work is required.

32 comments

  • Marc EdwardsMarc Edwards, over 5 years ago

    I think a lot of it will depend on your comfort level with Illustrator. Illustrator is very capable in the right hands. XD honestly doesn’t do a whole lot right now. The prototyping is fairly basic, and its drawing abilities are weak compared to Illustrator. Symbols in XD are lacking, too (you can’t yet resize individual instances without affecting all other instances). If you want to build high level prototypes with basic interactions, XD is a good choice. But then, so is Sketch. Flinto’s a great choice as well.

    It’s also worth mentioning that Illustrator is colour managed. XD isn’t. That’s a huge concern, especially when you get to the production end of the process. Illustrator isn’t perfect though — if you plan on using a lot of bitmap assets in the project, then exporting them from Illustrator is noticeably worse quality than most other tools (poor quality shape antialiasing, gradient banding, other issues). If they’re going to be predominately vector and Ai → AE → Lottie, then all should be good, quality wise.

    Having said that, if you have all the parts built in almost any tool, and if you have Ai and AE installed, it should be possible to get everything into AE. It’ll honestly come down to the volume of assets and which part of the process you want to be easy.

    7 points
    • Dirk HCM van BoxtelDirk HCM van Boxtel, over 5 years ago

      Hey Marc, out of curiosity, how often do you use Photoshop in your design process these days?

      0 points
      • Marc EdwardsMarc Edwards, over 5 years ago

        Photoshop and Illustrator are still my main screen design tools, for now. Early work and anything slightly complex vector-wise is done in Illustrator. Photoshop for all the final work and exporting. It’s not ideal, but there’s some things I require that other tools just don’t have.

        2 points
        • Justin Fraga, over 5 years ago

          I am the first to bag on Sketch and its, well, sketchiness. But I'm very curious to know what features are keeping you in Ps...

          0 points
          • Dirk HCM van BoxtelDirk HCM van Boxtel, over 5 years ago

            For me; Windows.

            0 points
          • Marc EdwardsMarc Edwards, over 5 years ago

            Feature wise, it’s quite a few things. I do also realise that all tools have their own strengths and weaknesses, and there’s plenty of things Ai and Ps do badly or not at all. Artboards are terrible in Ps, and you can forget about component driven design in Ai and Ps. I want component driven design, but there aren’t any good options that also have the other manadatory features I want. I try my best to use everything, even if I just use some tools casually.

            There’s so many vector abilities that Illustrator has that I miss in other tools. Not even sure where to start. Making these icons would be painful in anything that’s not Ai.

            For Photoshop, the main things other tools lack relate to masking and styling abilities. Adjustment layers (levels, gradient maps etc) are nice, but not as essential as having masking that actually works.

            Oh, and colour management. Colour management is non-negotiable. If a tool doesn’t have it, I can not use that tool professionally.

            (Apologies for the thread hijack!)

            1 point
            • Justin Fraga, over 5 years ago

              Hijacking is encouraged.

              I am a Sketch native and Im pretty good at icon design using its terrible vector tools and Booleans, and even still, I've gone back to Illustrator for icon work. So at this point I'm designing vector art in Ai, layout in Sketch, porting SVG back to Ai so I can prep for AE so I can export to JSON and prototype everything in Framer.

              Wow, I've never written this out before, but things have really changed in the past several years. [edit] Also, we have to buy a lot more licenses these days!

              0 points
              • Marc EdwardsMarc Edwards, over 5 years ago

                Thanks for allowing the hijack. :)

                Although I am using some different tools to you, my workflow is spread across lots of things and also pretty fragmented. I guess we’re getting things done, but some of the jumping between tools isn't very smooth.

                0 points
        • Dirk HCM van BoxtelDirk HCM van Boxtel, over 5 years ago

          Understood. I don't excel at Illustrator at all, so most of even my vector work gets done in Photoshop! But I'm suppose I'm the "odd one out" in that :)

          0 points
          • Marc EdwardsMarc Edwards, over 5 years ago

            Ps has some pretty solid vector abilities, but I always just have them both open anyway. ¯_(ツ)_/¯

            0 points
            • Svenni DavidssonSvenni Davidsson, over 5 years ago

              I use Ai all day for almost everything and I draw a lot of icons — I have never been able to use the vector tools in Ps, I don't get it ლ(ಠ益ಠლ)

              0 points
              • Marc EdwardsMarc Edwards, over 5 years ago

                It’s definitely better than it used to be. Remember when Ps couldn’t draw a pixel snapped circle? That was baaaaaaaad.

                0 points
  • Stuart McCoyStuart McCoy, over 5 years ago

    I know a lot of people are suggesting sketch2AE, which is fine I guess, but if you go with Illustrator, consider getting Overlord from Battle Axe. As with all Adobe tools, there is a learning curve with AE and Overlord, but it's worth it in the end.

    4 points
  • Marvin Bruns, over 5 years ago

    Sketch2AE is a nice way to get your Sketch things into After Effects. Works pretty good in my eyes. There are times where I definitely prefer the sketch2AE over illustrator. https://google.github.io/sketch2ae/

    3 points
    • Tim Kjær LangeTim Kjær Lange, over 5 years ago

      Never heard of this plugin before, what a lifesaver. Tested it out, I really like how it creates a null layer from a group in Sketch and makes the layers inside the group children of the null layer.

      0 points
    • Dustin Locke, over 5 years ago

      How much have you used this? If it actually works, it will be worth so much to me. I inevitably end up re-drawing everything in Ae because the shape layers are so different between the two.

      0 points
  • Justin Fraga, over 5 years ago

    Update: My visual designer did his early explorations in Ai and when the time was right we moved everything into Sketch. I've found the Sketch2AE plugin to be highly useful for this project. We've used Overlord, Flow and Bodymovin plugins for AE and the process has been flawless.

    If anyone comes across this thread and wants to pick my brain, DM me and I'm happy to help.

    0 points
  • Justin Fraga, over 5 years ago

    Thanks a ton for all the great responses and clues to tools and plugins! I'm going to reassess Sketch2AE, as it seems much more performant now than it was when first released. Also, Overlord FTW.

    0 points
  • Andrew Richardson, over 5 years ago

    Have you given Haiku a try? It exports to Lottie. Unless you have some very specific animation needs that only AE can do then it's a really good program.

    0 points
    • Justin Fraga, over 5 years ago

      Thanks, yes I did check it out. As I mentioned in a different response above, I am lucky enough to be able to animate with imagery, not just vector/shape. My devs are able to reference the /images folder that gets generated by Bodymovin' when you do this, no problem. So, animations that generate the "missing image" error on LottieFiles, for example, will play just fine for me. This is a big advantage, and I don't think Haiku or Keyshape can do this.

      0 points
  • Jan SemlerJan Semler, over 5 years ago

    I design in sketch apps, i would consider illustrator not really suited for app design. Adobe put some functionalities in for mobile design but not what sketch does give to you.

    If i need a Lottie Animation than i go into illustrator and create there my illustrations for Lottie. You can copy paste vectors between illustrator and sketch, but with some glitches in terms of mask and strokes. I don*t know how heavy your project is in terms of illustrations for the app.

    If your project depends heavily on Lottie than you might be right to do everything in Illustrator/XD. But you should think about your workflow. I guess you know how strong sketch for handoff to the de is. So it might result in cluttered files when converting stuff in between (Sketch > Lottie, XD > Illustrator > Lottie)

    I would go with Sketch and create the Lottie Animations in Illustrator. There is a SketchtoAE Converter out there, tested it but does not bring me the result i need for Lottie. I would suggest try the "hard" way and copy paste the "Animation Illustration" from Sketch to Illustrator and prep it up for Lottie. In After Effects convert the Illustrator layers to Forms/Shapes and delete the Illustrator layers. See it like this: Illustrator is just the prep up workflow, after that you don*t necessarily need the illustrator file anymore after it is imported in After effects.

    Hope i could help.

    0 points
  • Noel Smetanig, over 5 years ago

    I have been using Bodymovin/Lottie with Sketch2Ae and found it pretty convenient. Most of the times it copied everything over to AE without any issues. I have found that Bodymovin/Lottie animations get pretty big in file size however.

    0 points
    • Justin Fraga, over 5 years ago

      I'm confused-- the JSON exports from Bodymovin' are many magnitudes smaller than they would be as image series animations. Are you referring to the size of the AE files?

      0 points
    • joe andersonjoe anderson, over 5 years ago

      How big are the file sizes? Do you have any sample animations and how big of a difference in file size they were when going from gif to lottie?

      0 points
      • Justin Fraga, over 5 years ago

        Off the top of my head most UI animations are in the 100k range. I don't bother checking because they're so small. A gif at a frame rate you'd find acceptable for production work would be... well... the size of the img x 24 fps (at min) x duration. And even still, it won't look as good as a Lottie animation.

        0 points
        • joe andersonjoe anderson, over 5 years ago

          Interesting, I'm looking to explore something like this soon. Let me know if you have any files laying around I'd love to add them to a site to do a comparison

          0 points
  • Marcel van Werkhoven, over 5 years ago

    I'm quite a fan of XD but never used the set-up you propose. I mainly use XD to create a high-fidelity prototype and animations and such aren't added until production.

    How is Lottie/Bodymovin these days? I remember trying it last year but finding it a bit cumbersome. Some AE functions are supported. others aren't so it got kinda complicated to figure out what would work. Compared to say a GSAP or AnimeJS solution the bar to get started was also fairly high. You need to be both an expert in AI, AE as well as in the basic concepts of SVG animation.

    0 points
  • A B, over 5 years ago

    Or... continue to use Sketch with Keyshape for animations / prototyping with Lottie export. That would be my preferred flow.

    I would not use Ai for production layout and that's coming from an Illustrator fan. Everything from artboard control to export options is just clunky in comparison to Sketch, to the point of being frustrating.

    Keyshape is a total gem by the way. There's a 2 week demo, so no excuse for not checking it out ;)

    0 points
    • Justin Fraga, over 5 years ago

      Thanks! I downloaded the trial. Not really clear to me on the proper flow using Keyshape. Are you exporting Sketch as SVG or designing natively in KS?

      Here's one apparent critical difference: I am actually able to export Lottie animations with imagery, not just vector/shape. My devs learned to reference the source files (/images) that Bodymovin' generates when you use bitmaps in an animation. This is a subject for a different post, but so far I'm getting away with using gradients, shadows, glows, textures, etc. It doesn't appear I can do that with Keyshape.

      There's no question Ai is cumbersome. But, when the total number of artboards and assets is low, and the number of complex animations is high, is it more cumbersome than dealing with Sketch's atrocious SVG export and constantly cleaning/prepping the layers for animation? These are unique circumstances and perhaps they give Ai the edge just this once. For every other mobile project I have going on, it's Sketch all the way.

      0 points