將 Figma 設計的畫面變成 SwiftUI 或 UIKit 的程式

以設計檔 contra wireframe kit 為例

Figma - contra wireframe kit | A starter wireframe kit for quick design and prototyping your idea…

我們目標將下圖的 Sign in button 變成程式。

切換到 Dev Mode

選擇 SwiftUI 或 UIKit

從下圖的 Code 區塊選擇想輸出的程式，iOS 可選擇 SwiftUI 或 UIKit。

• SwiftUI。

選擇 SwiftUI 後顯示的程式如下，它將產生按鈕的外框，不過並沒有包含文字。

我們可進一步點選設計圖的 Sign in，查看 Sign in 的程式碼。

合併後的程式如下。

struct ContentView: View {
    var body: some View {
        VStack(alignment: .center, spacing: 10) {
            Text("Sign in")
                .font(
                    Font.custom("Montserrat", size: 21)
                        .weight(.heavy)
                )
                .multilineTextAlignment(.center)
                .foregroundColor(Color(red: 0.09, green: 0.1, blue: 0.12))
        }
        .padding(16)
        .frame(width: 327, alignment: .top)
        .background(Color(red: 1, green: 0.74, blue: 0.07))
        .cornerRadius(16)
        .shadow(color: Color(red: 0.09, green: 0.1, blue: 0.12), radius: 0, x: 0, y: 4)
        .overlay(
            RoundedRectangle(cornerRadius: 16)
                .inset(by: 1)
                .stroke(Color(red: 0.09, green: 0.1, blue: 0.12), lineWidth: 2)
        )
    }
}

成功生成跟設計圖類似的 Sign in button。(ps: 字體 Montserrat 要另外安裝才能顯示跟設計圖一樣的字體)

• UIKit。

選擇 UIKit 後顯示的程式如下，它將產生按鈕的外框，不過並沒有包含文字。

我們可進一步點選設計圖的 Sign in，查看 Sign in 的程式碼。

將以上的程式合併和稍微調整後加到 view controller 的 viewDidLoad，程式如下。

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        var buttonView = UIView()
        buttonView.frame = CGRect(x: 0, y: 0, width: 327, height: 60)
        var shadows = UIView()
        shadows.frame = buttonView.frame
        shadows.clipsToBounds = false
        buttonView.addSubview(shadows)

        let shadowPath0 = UIBezierPath(roundedRect: shadows.bounds, cornerRadius: 16)
        let layer0 = CALayer()
        layer0.shadowPath = shadowPath0.cgPath
        layer0.shadowColor = UIColor(red: 0.094, green: 0.098, blue: 0.122, alpha: 1).cgColor
        layer0.shadowOpacity = 1
        layer0.shadowRadius = 0
        layer0.shadowOffset = CGSize(width: 0, height: 4)
        layer0.bounds = shadows.bounds
        layer0.position = shadows.center
        shadows.layer.addSublayer(layer0)

        var shapes = UIView()
        shapes.frame = buttonView.frame
        shapes.clipsToBounds = true
        buttonView.addSubview(shapes)

        let layer1 = CALayer()
        layer1.backgroundColor = UIColor(red: 1, green: 0.74, blue: 0.071, alpha: 1).cgColor
        layer1.bounds = shapes.bounds
        layer1.position = shapes.center
        shapes.layer.addSublayer(layer1)

        shapes.layer.cornerRadius = 16
        shapes.layer.borderWidth = 2
        shapes.layer.borderColor = UIColor(red: 0.094, green: 0.098, blue: 0.122, alpha: 1).cgColor

        var parent = self.view!
        parent.addSubview(buttonView)
        buttonView.translatesAutoresizingMaskIntoConstraints = false
        buttonView.widthAnchor.constraint(equalToConstant: 327).isActive = true
        buttonView.heightAnchor.constraint(equalToConstant: 60).isActive = true
        buttonView.leadingAnchor.constraint(equalTo: parent.leadingAnchor, constant: 24).isActive = true
        buttonView.topAnchor.constraint(equalTo: parent.topAnchor, constant: 332).isActive = true
        
        var buttonLabel = UILabel()
        buttonLabel.frame = CGRect(x: 0, y: 0, width: 77, height: 28)
        buttonLabel.textColor = UIColor(red: 0.094, green: 0.098, blue: 0.122, alpha: 1)
        buttonLabel.font = UIFont(name: "Montserrat-ExtraBold", size: 21)
        var paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.lineHeightMultiple = 1.09
        // Line height: 28 pt
        // (identical to box height)
        buttonLabel.textAlignment = .center
        buttonLabel.attributedText = NSMutableAttributedString(string: "Sign in", attributes: [NSAttributedString.Key.paragraphStyle: paragraphStyle])

        buttonView.addSubview(buttonLabel)
        buttonLabel.translatesAutoresizingMaskIntoConstraints = false
        buttonLabel.widthAnchor.constraint(equalToConstant: 77).isActive = true
        buttonLabel.heightAnchor.constraint(equalToConstant: 28).isActive = true
        buttonLabel.centerXAnchor.constraint(equalTo: buttonView.centerXAnchor).isActive = true
        buttonLabel.centerYAnchor.constraint(equalTo: buttonView.centerYAnchor).isActive = true
        
    }
    
    
}

成功生成跟設計圖類似的 Sign in button。(ps: 字體 Montserrat-ExtraBold 要另外安裝才能顯示跟設計圖一樣的字體)