Code your own UI.

Published in

CGRectMake App

3 min readFeb 21, 2016

I've used to have a sketchbook alongside my MacBook to make calculations to secure that my UI components will be responsive on my iOS apps, but now I don't need this anymore.

There are developers and designers that code their UI creating a .swift file (a UIView subclass), creating UIKit components with frames that are created with the CGRectMake( ).

In this article,We will teach you how to use CGRectMake Mac App (https://goo.gl/p3zcSE) to help you while coding your UI, from Sketch to Xcode.

1. Make your UI very organized.

Group your layers, name them and delete any unnecessary alpha space on them;
Make sure what is the device that you've made your UI (in this case we've made this UI for iPhone 5);

2. Setup your subclass of UIView

Create a <name>View.Swift file;
Programmatically create the UIKit component that you want, then add to the view;

Create a <name>ViewController.Swift;
Create a variable called <name>View that is an instance of your previous created view;
Initialize your view in the "override func viewDidLoad()";

Type your <name>ViewController.swift as the Custom Class of your View Controller in the Main.storyboard;

3. Find the values on Sketch

Remember the first step? “Make your UI very organized”, if you've done something wrong in that step your component will be drawn on the View with the wrong boundaries;
In the Inspector (localized in the right side of the Sketch UI) you will have the values that you need to paste on the CGRectMake App;

4. Paste the values on CGRectMake App

You can download it here: https://goo.gl/p3zcSE

Select the device that you've designed your UI;
Copy the values from Sketch (or any app that you use to make your UI) and Calculate;
Copy the CGRect code and paste on the <name>View.swift, set your component frame as <rectname> after you paste the code;