GitHubで便利そうなライブラリを探していたらこんなものを見つけました。
FigmaToCode
FigmaのデザインをFlutter
、tailwidcss
、SwiftUI
にコンバートしてくれるらしい。
FigmaはUIKitしかサポートしてくれてないので、使い物になればかなり有り難い...
試しに使ってみた
今回はこちらのデザインをコンバートしてみようと思います。
ニューモーフィズムのサンプルデザインです。
コンバート結果
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(spacing: 43) {
Text("Neumorphism UI Kit")
.fontWeight(.medium)
.font(.largeTitle)
.padding(.vertical, 49)
.padding(.leading, 116)
.padding(.trailing, 117)
.frame(width: 693, height: 155)
.foregroundColor(Color.init("text"))
.background(Color.init("background"))
.cornerRadius(98)
.shadow(radius: 30)
Text("Button / Switch / Progress / Pagination/ Selector ... and more")
.font(.title)
}
.background(Color.init("background"))
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
使ってみて
結構、再現度の高いものに仕上がっているのではないでしょうか?
AutoLayoutを再現するにはこのようなポイントに注意しなければいけないようです。
個人的には画面全体ではなく各パーツを1つずつ変換していく形になると思うので、あまり関係ないかなと。
絶賛開発中のプラグインなので期待していいのでは?
SwiftUIのアプリを来年から新たに開発予定なので、そのタイミングでもっと使ってみようかなって思います!