Experiences designing with XCode Interface Builder?

8 days ago from

Hey there, I'm curious how feasible this is as a pragmatic and effective workflow for mobile design (at least for iOS). Has anyone had any experience with this process? What are the pros/cons? Is it even a realistic possibility?

8 comments

  • Thanasis RigThanasis Rig, 2 days ago

    Hello there,

    For the past year or so, my workflow was around Xcode storyboard and Auto Layout. I was part of a 5 person team consisting of three developers and me as the designer of the team!

    So for iOS I was designing or better say prototyping in sketch and then I was moving on to implement my own designs in Xcode with the use of Auto Layout.

    This workflow has many upsides, first and for most you as the designer you can make sure that your designs are implemented the way you wanted them to be, second it takes away all the frustrating back and forth between designer and developer!Third, you can see from first hand what it takes to implement your designs and get to know the limitations because yes they are limitations! You can also control the assets which is very important as you may already know!

    Regarding the learning curve, I could say it's easy. And when I say easy, it took me about 2 weeks to be proficient with Auto Layout and be able to implement my designs from start to finish without extra help from the developers, I can also say that I personally believe that Auto LAyout and storyboards are built for designers and not for developers, I mean it even has designer like software shortcuts!

    The only down to this workflow I could say it is that you will have to learn a versioning system, most popular for the last years is Git. Which ok has a very steep learning curve and it's a bit hard concept to grasp, but after you learn it you will be a very helpful asset to any team that you join in the future!

    And after been through with this workflow for over a year, I could say to you that knowing Auto Layout and Git as a mobile designer, it's going to be a must-have on the years to come!

    I have also written an article about it. Should Mobile Designers Learn Xcode? And why?

    It's a short read, but it could help you get started. I also have some great resources at the end of the article!

    Chears

    7 points
  • Brln .Brln ., 2 days ago

    I would say that the interface builder is a really good start to fully understand how to build responsive layouts for iOS.

    I would really recommend the following course, the first section teaches you how to make a game and add in all the interface elements that would work on all devices.

    https://www.udemy.com/ios-and-swift-for-beginners-200-hands-on-tutorials/learn/v4/overview

    2 points
  • Mark Horgan, 2 days ago

    I wouldn't recommend you design in Interface Builder. Auto Layout can be frustrating at times where components are not positioned correctly in Interface Builder but look ok in the built app. You're better off designing in Sketch and then trying to implement the design in Interface Builder. Unlike Sketch you can't just move things around to try out different designs - some elements will have constraints that depend on other elements.

    I don't think Auto Layout is a great layout system. It doesn't have explicit support for dynamic interfaces i.e. showing and hiding components. You have to use stack views for that.

    0 points
  • Or Arbel, 1 day ago

    If Auto Layout is what you're after you can do it in Sketch as well:

    https://animaapp.github.io/docs/v1/guide/

    This Auto Layout is exactly the same as XCode, including Stack Views.

    0 points
    • Todd FTodd F, 22 hours ago

      I don't see any mention of it outputting code for iOS - What good is building it in Sketch if your output doesn't contain all that information?

      0 points
      • Or Arbel, 22 hours ago

        That you use Sketch rather than XCode :)

        0 points
        • Todd FTodd F, 1 hour ago

          Sketch to make something that only works in Sketch? That's my point. If that information about how something is adaptive is trapped inside Sketch, what's the point? The goal is to make the thing that's in Sketch real at some point, right?

          0 points