SwiftUIで１６進数を使いたい

Tips💡

Figmaで作成したデザインが１６進数なのですが、これをSwiftUIで使うには、x-codeの設定と、Extentionが必要だった。

こちらのサイトが参考になりました

カラーピッカーでも良いけど、今回はFigmaから、１６新数を取得。

自分で色に名前をつける。#の後に、１６進数を指定するだけ。

ColorExtention.swiftを作成する。

import Foundation
import SwiftUI

extension Color {
    static let CustomPink = Color("CustomPink")
    static let CustomPurple = Color("CustomPurple")
}

背景色を設定するときは、background(Color.customPurple)といった感じで書く。趣味で作ったUIがあるのですがこんな感じですね。

import SwiftUI

struct GestStartPage: View {
    var body: some View {
        
        Color.customPink.edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
            .overlay(Group {
                VStack {
                    Image("meido")
                        .resizable()
                        .frame(width: 286, height: 286)
                    Button(action: {
                        print("tap")
                    }, label: {
                        /*@START_MENU_TOKEN@*/Text("Button")/*@END_MENU_TOKEN@*/
                            .frame(width: 278, height: 85)
                    })
                    .padding()
                        .accentColor(Color.white)
                        .background(Color.customPurple)
                }
            })
    }
}

#Preview {
    GestStartPage()
}

最後に

標準の色だと物足りないので、カスタマイズしたいことありますよね。ぜひぜひ１６進数を使うのを活用してみてください。