デザインとコード

用途：Figmaで作ったデザインに合わせてアプリを作ることです。Setherionはフレームを描画し、そのレイアウト、色、文字、余白を読み取って、そこから作ります。

接続：ConnectorsページでConnect Figmaを押し、Figmaでログインして戻ります。コピーするキーはありません。アクセスは読み取り専用で、Setherionがファイルを変更することは決してありません。アプリを作る間だけ使われ、公開するアプリには含まれません。FigmaにはSetherionによる利用料金は表示されません。

使い方：エディタで「+」を押し、Design、Import from Figmaの順に選びます。ダッシュボードでは「+」の下にあるImport a designで、ここにはCanvaも表示されます。Figmaで、使いたいフレームを右クリックしてCopy link to selectionを選び、リンクを貼り付けて、Import frameを押します。フレームは、その説明と正確な色、フォント、余白とともにメッセージに添付され、アプリはそれに合わせて作り直されます。

依頼の例：「ホームページをこのフレームに合わせて作り直して」「私のFigmaデザインの色とフォントを使って」

知っておくと便利なこと：リンクはデザインを指している必要があります。たとえばfigma.com/design/KEY?node-id=1-234のような形です。ファイル一覧のアドレスバーのものは該当せず、インポート画面がそう伝えます。リンクが拒否されたときは、接続しているFigmaアカウントでそのファイルを開ける必要があります。Figmaが接続を受け付けなくなった場合は、インポート画面から再接続するよう案内されます。

用途：Canvaのデザイン（メニュー、チラシ、バナー）を、配置する画像としてアプリに取り込むことです。ページに置くための素材であり、作り直すためのレイアウトではありません。

接続：Connect Canvaを押し、Canvaでログインして戻ります。コピーするキーはありません。SetherionがCanvaのデザインを読み取ってエクスポートするのは、インポートするときだけで、Canva側は何も変更されません。

Canvaからインポートする：エディタで「+」を押し、Design、Import from Canvaの順に選びます。ダッシュボードでは「+」の下のImport a designです。Canvaでデザインを開き、ブラウザのアドレスをコピーして（/design/を含むもので、短いcanva.linkのアドレスは使えません）貼り付け、Import designを押します。デザインは、あなた自身のものか、共有されているものである必要があります。

依頼の例：「いまインポートしたメニューをMenuページに置いて」「そのバナーをホームページのヒーローに使って」

制限：

• デザインの最初の3ページが、画像としてチャットに届きます。
• 画像は、作る間に一度だけエクスポートされ、そのあとアプリのほかの画像とともにホストされます。Canva自身のエクスポートリンクは1日で使えなくなります。そのため、アプリが動いている間にCanvaへ問い合わせることはありません。
• Canva Freeでは、デザインを元のサイズから大きく拡大することはできません。Canvaが大きなエクスポートを拒否した場合、Setherionはデザイン本来のサイズでもう一度依頼します。
• Canvaには、1人が数分間にできるエクスポートの数に上限があります。上限に達したと表示されたら、少し待ってからもう一度試してください。

用途：コードを持ち出すことと、コードを取り込むことです。エクスポートは、アプリを通常のViteとReactのプロジェクトとして、あなたのリポジトリに置きます。インポートは、すでにリポジトリにあるアプリを作り直します。

接続：Connect GitHubを押してログインし、承認します。エクスポートのウィンドウ内のConnect GitHubを使うこともできます。アクセスは、プッシュを頼んだときに使われ、公開するアプリには含まれません。プライベートリポジトリにも使えます。

エクスポート：エディタでPublishメニューを開き、Export to GitHubを選びます。リポジトリに名前を付け、Private repositoryにするかを選んで（初期設定ではオンです）、ボタンを押します。リポジトリがなければ作られます。最新の変更で更新するには、いつでももう一度エクスポートします。

インポート：ダッシュボードで「+」を押し、Import an app、GitHubの順に選びます。そこでGitHubを接続すると、プライベートも含めて自分のリポジトリが表示されます。公開リポジトリなら、アドレスを貼り付けても構いません。ウェブアプリであれば何でも使えます。React、Next.js、Vue、または素のHTMLです。読み取りでは、アプリがどう作られたかではなく、何をするかを見ます。シークレットのファイルやキーは除かれます。アプリのインポートを参照してください。

制限：エクスポートは有料プランの機能です。Freeでは、ボタンを押すとアップグレードを求められます。インポートには、新しいアプリ分と、コードの読み取り分の費用がかかります。最初のインポートは無料です。プランとクレジットを参照してください。データベースのレコードはインポートでは移らず、構造だけが移ります。

知っておくと便利なこと：エクスポートはPublishの中のボタンで、チャットに入力する依頼ではありません。

用途：GitHubのエクスポートと同じことを、GitLabで行います。あなたのコードを、あなたのリポジトリに置きます。

接続：Connect GitLabを押してログインし、承認します。エクスポートのウィンドウ内のConnect GitLabを使うこともできます。プッシュするときに使われ、公開するアプリには含まれません。

エクスポート：エディタでPublishメニューを開き、Export to GitLabを選びます。リポジトリに名前を付け、Private repository（初期設定）にするかを選んで、Export to GitLabを押します。更新するには、もう一度エクスポートします。実行できるViteとReactのプロジェクトです。

制限：エクスポートは、GitHubと同じく有料プランの機能です。GitLabにはインポートがありません。GitLabのプロジェクトからアプリを取り込むには、ZIPとしてダウンロードして、アプリのインポートのZIPインポートを使います。