Zeplin extension that generates Swift snippets from colors, fonts and layers.
Features
-
π Color pallette for iOSExample
import UIKit extension UIColor { static let electricBlue = UIColor(red: 0/255, green: 86/255, blue: 255/255, alpha: 1) }
Example with custom initializer
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) }
Example with color literals
import UIKit extension UIColor { static let electricBlue = #colorLiteral(red: 0, green: 0.337254902, blue: 1, alpha: 1) }
-
βοΈ Fonts for iOSExample
import UIKit extension UIFont { static func BloggerSansBold(ofSize: CGFloat) -> UIFont { return UIFont(name: "BloggerSans-Bold", size: size)! } }
-
π§ Snippets for borders and corner radiusExample
view.layer.borderWidth = 4 view.layer.borderColor = UIColor.white.cgColor view.layer.cornerRadius = 40
-
π Snippets for shadowsExample
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)Linear gradient example
Check out LinearGradientPlayground and read explanation of the implementation here.
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] 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
}
}
}
How to Install
Zepcode is available on Zeplin Extensions.
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, to make a build or to execute some functions from extension follow this guide.
To learn more about zem, see documentation.
If you like to take full control of your build process you can try zero boilerplate.
Authors
Artem Novichkov, [email protected]
Baybara Pavel, [email protected]
License
Zepcode is available under the MIT license. See the LICENSE file for more info.
5 Oct 29, 2022
3 Feb 12, 2022
3 May 17, 2022
13 Dec 1, 2022
6.5k Jan 7, 2023
9.3k Jan 4, 2023
4.3k Dec 27, 2022
22 Oct 21, 2022
1.7k Dec 12, 2022
34.3k Jan 2, 2023
10.1k Jan 4, 2023
12.4k Jan 4, 2023
3.8k Jan 7, 2023
877 Dec 4, 2022
476 Jan 7, 2023
105 Jul 21, 2022
82 Dec 30, 2022
1.1k Jan 2, 2023