Inspiration

As a mobile developer, I was sick of coding user interfaces. These days, if you're creating a chat app, for example, you'll probably find by far the longest part is designing and coding the user interface. I wanted to find a way to speed this process up.

What it does

UICode is an iPad app that has a mobile screen as a canvas. You can drag and drop mobile elements such as Views (UIView), buttons (UIButton) and images, then quickly align and adjust their properties, for instance, color, corner radius, and shadows to name a few.

Next, you can resize the mobile canvas to see how your UI will respond in real time to different phone sizes. This saves developers a lot of time, as previously, one would have to essentially "guess" the coordinates of an element they were placing, then wait for their code to compile to see the result.

How I built it

UICode is built in pure Swift using Xcode. I made use of a few notable iOS libraries and frameworks, such as Snapkit, and a few smaller open source projects for managing minor aspects such as gradients.

Challenges I ran into

I ran into quite a few challenges. Originally, UICode was intended to be a Mac app, similar to the UI program, Sketch, however, I found developing for iOS to be infinitely times easier for me so I just went with an iPad app instead.

Another challenge was coding the logic for aligning elements with each other. It became fairly complicated when a user drags an element, UICode had to determine when and where was appropriate to snap a view.

Accomplishments that I'm proud of

I'm proud that I've taken an idea that I wanted to exist, and brought it into existence as a tangible product. This is a product I am going to be happy to use for my app development.

What I learned

I learned a lot about constraints and handling views with gestures. UICode has a UIScrollView as it's canvas, then inside that it has multiple elements that can be dragged around and manipulated. This created a level of complexity in terms of when what gesture would be triggered (e.g scroll view or dragging an element), that I had to learn to navigate to ensure a smooth user experience.

What's next for UICode

I plan to keep adding features to UICode and releasing it on the AppStore. It will be free to use, however, if you want to export your UI Designs to code you will have to purchase a subscription.

Built With

Share this project:
×

Updates