From Sketch Design to iOS App with Swift and Xcode

Explore iOS design themes of clarity, deference, and depth to craft apps that clearly communicate, keep content central, and use layered motion to convey hierarchy.

Learn to use Sketch to create user interface designs, a powerful design tool. Start your 30 day free trial and explore basics for creating your own designs in upcoming videos.

Learn the Sketch user interface: insert shapes, text, and images with the toolbar, adjust properties in the inspector, and manage layers in the navigator for quick previews.

Learn how art boards in sketch organize your iOS design by selecting Apple device presets, naming boards, setting backgrounds, and understanding each board’s coordinate system for later transfer to code.

Learn to create iOS interfaces in minutes with Sketch and the symbols library for status and navigation bars. Reuse symbol components to structure cells and headings like today and yesterday.

Create reusable UI elements by using the symbol library, applying overwrites, and turning symbols into custom cells with image fills, gradients, corner radius, and adjustable content.

Export your artwork using sketch shape operations to create a circular add button and export transparent assets for Xcode, covering 1x, 2x, and 3x PNGs.

Design the card drop app to share inspirational quotes on selected images. Choose an image from a category, overlay a random quote, and share via airdrop or messages.

Turn a design concept into real iPhone 10 mockups using a Monserrat font, gradient category cards, and reusable symbols for home, image selection, and share card screens.

Explore prototyping to rapidly and inexpensively test multiple design iterations and improve usability. See how sketch prototyping links artboards, adjusts animations, and enables practical navigation testing.

Translate a sketch into a real iOS app in Xcode by turning designs into UIKit components, using a collection view for categories, gradients for readability, and depth via transitions.

Open Xcode and create a single view app, drag in data and model folders, and implement simple image, quote, and category data models for a car drop app.

Embed the collection view in a navigation controller, delete the view controller, create an overview collection view controller class, and connect it in interface builder by setting its custom class.

Build a large, black navigation bar with a Monserrat title in the overview collection view controller, embed fonts, update info.plist, and test in the simulator.

Configure 150 by 200 custom collection view cells with rounded corners, a background image view, a category label, content mode aspect fill, and Monserrat 18 semi bold white font.

Load category data to populate the overview collection by fetching categories via a generic data request, handling success or failure, and reloading the collection view to render items.

Populate the collection view with eight category items using a custom cell, loading images by name and setting labels, then adjust corner radius and section insets for a polished layout.

Set up image selection view controller and a show detail segue from the overview screen, configure an image view and category label, and pass data for the selected image.

Trigger a show detail segue from the collection view, create a category from the tapped item, and pass its image and category data to the image selection view controller.

Explore custom transitions in iOS by implementing UIViewControllerAnimatedTransitioning, using transitionContext and containerView to animate a collection view cell image to the foreground view controller.

Implement a custom scale transition between the collection view and the image selection view by creating a scale transitioning delegate, adopting UIViewControllerAnimatedTransitioning, and wiring it to the navigation controller.

Define a scaling image view protocol to supply image views from the overview and image selection controllers, and drive a begin/end transition state via the transition context and container view.

Build a transition animation between the overview collection view and image selection view by defining a scaling protocol and preparing begin and end states with transforms and snapshot views.

Implement a custom iOS transition that fades the background and scales a snapshot image using a UIView animation with duration and spring damping, including cleanup via the transition context.

Implement a custom image view transition for a navigation controller by adopting a scaling protocol, using the selected collection view cell image to drive forward and backward animations.

Explore reverse animation in a two-view transition by distinguishing push and pop operations, updating background and foreground view controllers, and adjusting transition states for a seamless iOS navigation.

Export sketch button assets by making them exportable, producing three versions for the info button and light and dark variants for the other buttons, ready for the image selection workflow.

Drag and drop assets into the Xcode assets folder, then create a back button in the overview view controller to pop the navigation controller with animation.

Set up the image selection UI with a paging scroll view, an initial image view, a dimming view, and a category label, using 11 asset images and Monserrat fonts.

Apply auto layout constraints to make the interface look good on all devices by pinning the views to edges, using safe area or super view where appropriate.

Create reusable photo views using a xib file for the image selection flow, displaying image name, description, and photographer while integrating with the main storyboard and swipe-to-choose UI.

Connect a custom Interface Builder view to a class, wire outlets for image view, description label, and photographer label, and load image data from a plist on the main thread.

Learn to implement a paging scroll view that displays multiple images with captions by calculating content size from image count, positioning each image in sequence, and updating related labels.

Beautify the custom transition by fading in the dim view and back button after a scale animation, then scroll to the first image and pop back to the overview.

Adds a view controller to the storyboard and uses user defined runtime attributes to round a share button, enabling screenshot sharing via an activity view controller and a random quote.

Create a modal show segue from the image selection to the send card view, pass the selected image via prepare for segue, and use a cross dissolve transition.

Add a tap gesture recognizer to the scroll view to trigger the transition from the image selection view to the send card view, while skipping the initial page.

Capture a screenshot of the card view, then present a UIActivityViewController to share the image. Hide the buttons during the capture and restore them afterward for a clean screenshot.

Apply design thinking to iOS app development with Swift and Xcode, break large tasks into small steps, and emphasize user experience through prototypes and demos.