29
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

iOSAdvent Calendar 2020

Day 2

FigmaのデザインをSwiftUIのコードに変換してくれる無料プラグインがあるらしい???

Last updated at Posted at 2020-12-01

GitHubで便利そうなライブラリを探していたらこんなものを見つけました。

FigmaToCode

https://www.figma.com/community/plugin/842128343887142055/thumbnail

FigmaのデザインをFluttertailwidcssSwiftUIにコンバートしてくれるらしい。
FigmaはUIKitしかサポートしてくれてないので、使い物になればかなり有り難い...

試しに使ってみた

今回はこちらのデザインをコンバートしてみようと思います。
ニューモーフィズムのサンプルデザインです。

image.png

コンバート結果

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()
    }
}

image.png

使ってみて

結構、再現度の高いものに仕上がっているのではないでしょうか?
AutoLayoutを再現するにはこのようなポイントに注意しなければいけないようです。
https://github.com/bernaferrari/FigmaToCode/raw/master/assets/examples.png

個人的には画面全体ではなく各パーツを1つずつ変換していく形になると思うので、あまり関係ないかなと。
絶賛開発中のプラグインなので期待していいのでは?

SwiftUIのアプリを来年から新たに開発予定なので、そのタイミングでもっと使ってみようかなって思います!

29
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?