【STUDIO】ノーコードでFigma連携してデザインから一瞬でサイトを作成してみた考察

これは[no plan inc.の Advent Calendar 2023](https://qiita.com/advent-calendar/2023/noplan_inc)の16日目の記事です。

どもー、no plan inc.の[おかむー](https://twitter.com/okamu_ro)です。
弊社ではノーコードツールを積極的に使っており、STUDIOは大変得意としています。
最近、STUDIOがFigmaのデザインをそのままサイトにできる機能を発表していましたので、それを試してみたいと思います。


# この記事でわかること
- STUDIOでFigma連携してデザインから一瞬でサイトを作成してみた考察

# まずは結論
- まだ脳死では使えない
    - 考慮することが多い
- STUDIOのテンプレから作成した方が効率はいい
参考
https://qiita.com/okamu_/items/6fcc93e43da9caa945d5


# index
- ❶Figmaファイルを用意しプラグインをインストールする
- ❷STUDIOプロジェクトを先に作っておきます
- ❸Figma to STUDIOプラグインから要素をコピーする(ハマりポイント有り)

# ❶Figmaファイルを用意しプラグインをインストールする
- 今回は記事用に「商用フリー」のものを使ってみます
    - https://laaqiq.gumroad.com/l/bkhPD

このクオリティのものが無料とは大変感謝ですね
![gmrd_1_1920.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/c3feaced-57db-9431-cee7-59affd41655f.png)

## figmaの構成はこんな感じ
- pageでコンポーネント切られてるのはいいですね

![Screenshot 2023-12-02 at 4.14.14 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/fa79b9ef-0e71-eaa8-d900-85a7b714fc22.png)

## figmaにSTUDIOのプラグインをインストールします
- 「plugins」から「Manege plugin」を選択します
![Screenshot 2023-12-02 at 5.54.16 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/0c75c87f-2bd9-c05a-551e-45d5180c1744.png)

## STUDIOプラグインをインストールします
![Screenshot 2023-12-02 at 5.54.34 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/011e3909-2cd7-82dd-f176-627b40ee4f9b.png)

# ❷STUDIOプロジェクトを先に作っておきます
- [STUDIO](https://app.studio.design/)にログインします
- 空白のプロジェクトを作成しておきます

![Screenshot 2023-12-02 at 4.20.08 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/afbf0ba7-287c-c18b-cfd5-1e2c30682917.png)

# ❸Figma to STUDIOプラグインから要素をコピーする(ハマりポイント有り)
- では早速コピーしていきましょう
    - STUDIOプラグインを立ち上げるとこんなモーダルが出現します

![Screenshot 2023-12-02 at 4.22.53 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/c90c4bf3-9acc-0f8b-9b06-b957988bb4b6.png)

## コピーしたい要素を選択します
- 選択すると、選択した要素がプレビューされます
    - 下にある「クリップボードにコピー」を押しましょう

![Screenshot 2023-12-02 at 6.11.31 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/071dd339-fd46-8b25-32b9-198c36f1296d.png)


## STUDIOにペーストする
- 先ほど作成したSTUDIOプロジェクトにペーストしてみます
    - 「デザインをインポート」を押してみます

![Screenshot 2023-12-02 at 4.23.41 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/56ddfff2-3a86-ca1e-4948-738f443d9b80.png)


## [ハマりポイント] 親子関係に制限があるらしいぴえん
![Screenshot 2023-12-02 at 4.26.27 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/ba93b306-51ec-dfc6-aecb-cf12edcdf5bd.png)

つらい

![Screenshot 2023-12-02 at 4.26.32 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/025d5f3f-27fb-7ec3-72fa-87bddcea2051.png)

## 改めて公式のtipsを見てみる
- 変換が難しいデザインとしてレイヤーが多いと変換できないようです
![Screenshot 2023-12-02 at 10.47.11 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/26db8123-9ffc-17e6-ab3a-2f80bdf5a3c5.png)

## 再度少しずつコピーしてみる
- 1セクションぐらいの単位でコピーしてみると成功しました

![Screenshot 2023-12-02 at 4.31.28 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/34bd6b4d-4524-d9a2-0e0e-08237ee05d0d.png)

## [レスポンシブ] タブレット/モバイル対応どうするか
- importするときに指定できるようです
    - モバイル用にデザインされたものを、モバイルとしてコピーし、STUDIOでもモバイルとしてペーストします

モバイルデザインをモバイルとしてコピー
![Screenshot 2023-12-02 at 10.51.21 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/e32e6cb8-684d-b22e-48f6-a818f8a9b94e.png)

STUDIOでもモバイルとしてペースト
![Screenshot 2023-12-02 at 4.35.07 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/23d5e488-2379-54ec-2f14-cdd0789b0a5d.png)

## これはだるい
- デスクトップとモバイルでのレスポンシブはできましたが、タブレット対応も入れないとめっちゃおかしくなってしまいました

![Screenshot 2023-12-02 at 10.53.59 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/6239e3da-fdab-ebe4-9934-73e7cd83df06.png)


# まとめ
- まだ脳死では使えない
    - レスポンシブがよしなにインポートできないので微妙だと考えます
- STUDIOのテンプレから作成した方が効率断然いいと考えます
- STUDIOさんのこれからに期待したいと思います!!!!!


# no plan inc.で扱っているTechに関する様々なジャンルをアウトプットします!!


[![top.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/41177709-516f-0174-7cc4-c3052a311ac8.gif)](https://noplan-inc.com)



# no plan株式会社について

- no plan株式会社は **「テクノロジーの力でZEROから未来を創造する、精鋭クリエイター集団」** です。
- ブロックチェーン/AI技術をはじめとした、Webサイト開発、ネイティブアプリ開発、チーム育成、などWebサービス全般の開発から運用や教育、支援なども行っています。よくわからない、ふわふわしたノープラン状態でも大丈夫！ご一緒にプランを立てていきましょう！
- [no plan株式会社について](https://noplan-inc.com)
- [no plan株式会社 | web3実績](https://noplan-inc.com/web3)
- [no plan株式会社 | ブログ一覧](https://noplan-inc.com/blog)
エンジニアの採用も積極的に行なっていますので、興味がある方は是非ご連絡ください！
- [CTOのDMはこちら](https://twitter.com/_serinuntius)