Skip to content

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

License

Notifications You must be signed in to change notification settings

ignatovSA/zepcode

 
 

Repository files navigation

Built with Zero

Zeplin Extension

Generates Swift snippets from colors, fonts and layers.

Features

  • 🖍 Color pallette for iOS

    Example
    import UIKit
    
    extension UIColor {
    
        static let electricBlue = UIColor(red: 0/255, green: 86/255, blue: 255/255, alpha: 1)
    }
  • ✏️ Fonts for iOS

    Example
    import UIKit
    
    extension UIFont {
    
        static func BloggerSansBold(ofSize: CGFloat) -> UIFont {
            return UIFont(name: "BloggerSans-Bold", size: size)!
        }
    }
  • 🚧 Snippets for borders and corner radius

    Example
    view.layer.borderWidth = 4
    view.layer.borderColor = UIColor.white.cgColor
    view.layer.cornerRadius = 40
  • 🌚 Snippets for shadows

    Example
    view.layer.shadowColor = UIColor.black8.cgColor
    view.layer.shadowOffset = CGSize(width: 0, height: 4)
    view.layer.shadowRadius = 8
  • 🎨 Gradients (Work in progress)

    Linear gradient example
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = view.bounds
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
    gradientLayer.colors = [UIColor.lightishRed.cgColor, UIColor.barbiePink.cgColor]
    gradientLayer.locations = [0, 1]
    view.layer.insertSublayer(gradientLayer, at: 0)
    Radial gradient example
    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]
    
        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 - 1).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: CGGradientDrawingOptions(rawValue: 0))
            }
    }

How to Install

Download and unzip the latest release. Follow the instruction from official tutorial.

How to make a changes

First, you need last stable Node.js ^8.9.4. Follow this guide if you don't have any.

Next, install project dependencies:

npm i

To start developing run:

npm start

And finally, to make a production ready build run:

npm run build

Authors

Artem Novichkov, [email protected] Get help on Codementor

Baybara Pavel, [email protected]

License

Zepcode is available under the MIT license. See the LICENSE file for more info.

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%