Zepcode NPM | npm.io

Zeplin extension that generates Swift snippets from colors, fonts and layers.

Features

🖍 Color pallette for iOS

import UIKit

extension UIColor {

    static let electricBlue = UIColor(red: 0/255, green: 86/255, blue: 255/255, alpha: 1)
}

import UIKit

extension UIColor {

    convenience init(r red: Int, g green: Int, b blue: Int, a: CGFloat = 1) { // swiftlint:disable:this identifier_name
        self.init(red: CGFloat(red) / 255, 
                  green: CGFloat(green) / 255, 
                  blue: CGFloat(blue) / 255, 
                  alpha: a)
    }

    static let electricBlue = UIColor(r: 0, g: 86, b: 255)
}

import UIKit

extension UIColor {

    static let electricBlue = #colorLiteral(red: 0, green: 0.337254902, blue: 1, alpha: 1)
}

✏️ Fonts for iOS

import UIKit

extension UIFont {

    static func BloggerSansBold(ofSize: CGFloat) -> UIFont {
        return UIFont(name: "BloggerSans-Bold", size: size)!
    }
}

🚧 Snippets for borders and corner radius

view.layer.borderWidth = 4
view.layer.borderColor = UIColor.white.cgColor
view.layer.cornerRadius = 40

🌚 Snippets for shadows

view.layer.shadowColor = UIColor(r: 0, g: 0, b: 0, a: 0.5).cgColor
view.layer.shadowOpacity = 1
view.layer.shadowOffset = CGSize(width: 0, height: 2)
view.layer.shadowRadius = 4 / 2
let rect = view.bounds.insetBy(dx: -2, dy: -2)
view.layer.shadowPath = UIBezierPath(rect: rect).cgPath

🎨 Gradients (Work in progress)

Check out LinearGradientPlayground and read explanation of the implementation here.

final class RadialGradientView: UIView {

    private var radius: CGFloat {
        return min(bounds.width / 2, bounds.height / 2)
    }

    private let colors = [UIColor.red.cgColor, UIColor.neonGreen.cgColor]

    var options: CGGradientDrawingOptions = CGGradientDrawingOptions(rawValue: 0)

    // MARK: - Lifecycle

    override init(frame: CGRect) {
        super.init(frame: frame)
        clipsToBounds = true
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        layer.cornerRadius = radius
    }

    override func draw(_ rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()

        let colorSpace = CGColorSpaceCreateDeviceRGB()
        let colorsCount = colors.count
        var locations = (0..<colorsCount).map { i in
            return CGFloat(i) / CGFloat(colorsCount)
        }

        guard let gradient = CGGradient(colorsSpace: colorSpace, colors: colors as CFArray, locations: locations) else {
            return
        }

        context?.drawRadialGradient(gradient,
                                   startCenter: center,
                                   startRadius: 0,
                                   endCenter: center,
                                   endRadius: radius,
                                   options: options)
        }
}

Options

Use color names

Use color names from Color Palette or default UIColor(red:green:blue:alpha:) initializers.

Initializer style

Default — Use the default UIColor(red:green:blue:alpha:) initializer.
Custom — Use UIColor(r:g:b:a:) initializer.
Literal — Use color literals #colorLiteral(red:green:blue:alpha:) that will appear in Xcode as a colored rect that presents a color picker.

Use layer extension for shadows

Use a function below for shadow parameters. Don't forget to add this extension to your project.

import UIKit

extension CALayer {

    func makeShadow(color: UIColor,
                    x: CGFloat = 0,
                    y: CGFloat = 0,
                    blur: CGFloat = 0,
                    spread: CGFloat = 0) {
        shadowColor = color.cgColor
        shadowOpacity = 1
        shadowOffset = CGSize(width: x, height: y)
        shadowRadius = blur / 2
        if spread == 0 {
            shadowPath = nil
        }
        else {
            let rect = bounds.insetBy(dx: -spread, dy: -spread)
            shadowPath = UIBezierPath(rect: rect).cgPath
        }
    }
}