デザイナーのためのCursor入門 | 触れる画面のAI×UIデザイン
—%
1
はじめに：なぜ「触れるUI」で考えるのか2
条件を伝えて、AIに最初のUIをつくってもらう3
AIに先に計画させると、思った通りの画面になる4
作った画面を、いつでもURLで開けるようにする5
デザインツールのように、見た目をその場で直す6
コードでつくった画面をFigmaに持っていく7
URLにして、人に触ってもらうデザイナーのためのCursor入門 | 触れる画面のAI×UIデザイン
全部をコードで作ることもあると思います。でも、デザイナーなら、コードとFigmaの両方でアイデアを作って行き来した方がいいと僕は思っています。ここでは、コードで作った画面をFigmaに持っていく、いちばん簡単な方法を紹介します。
使うのは「html.to.design」というサービスです。ポチポチするだけで、Webサイトになっている画面のデータをFigmaに持っていけます。
流れはこうです。
ブラウザで「html to design」と検索すると、Chrome系のブラウザなら、Chrome Web Storeのページがいちばん上に出てくると思います。そこからインストールしてください（Chrome Web Storeのhtml.to.design）。
インストールしたら、拡張機能の設定画面で、html.to.designのトグルがオンになっているか確認します。オンにすると、ブラウザの拡張機能の欄に出てきます。
ブラウザで、npm run dev で立ち上げた localhost のURLを開きます。新規登録でもログインでも、Figmaに持っていきたい画面を開いてください。僕は新規登録にしました。
その状態で拡張機能を押すと、画面が出てきます。
キャプチャーが終わると、「Download file」と「Copy to clipboard」が出ます。どちらかを使えばOKです。僕は普段コピーしか使いませんが、今回はわかりやすいようにダウンロードしました。「〇〇.h2d」という謎のファイルがダウンロードされれば、準備完了です。
Figmaのデザインファイルを開いて、プラグインを開きます。今のUIだと、画面下のツールバーにあるボタンを押すと、いちばん右に「プラグインとウィジェット」があります。
検索欄に「html.to.design」と入れてプラグインを開きます（Figmaのhtml.to.designプラグイン）。最初は使い始めのボタンが出るかもしれません。
開いたら、さっきダウンロードした .h2d ファイルを、プラグインの画面にドラッグ＆ドロップします。
オプションも色々聞かれます。オートレイアウトをかけるか、スタイルやバリアブルを作るか、ファイルのローカルスタイルに合わせるか、ホバーの状態を含めるか、高い解像度で取り込むか（Pro向け）、リンクをつけるか、などです。迷ったら何も設定せずに進めても大丈夫です。基本的には、オートレイアウトだけオンにしておけば、ほとんどの用途には対応すると思います。
「Proceed」を押すと、さっきの画面がFigmaに出てきます。
最初は白い枠に入っているので、外に出してあげると作業しやすいと思います。いらないものは消してください。
データを見てみると、ちゃんといじれるデータになっていて、オートレイアウトも効いています。このまま、Figmaで作業を始められます。