baybara-pavel / zepcode

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

Zepcode

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, [e-mail]

Baybara Pavel, [e-mail]

License

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