Figmaのプラグイン「Figma to STUDIO」を使ってノーコードツールで簡単にサイトを制作する方法｜東京のWEB制作会社・ホームページ制作会社｜株式会社GIG

BLOG

ブログ

Figmaのプラグイン「Figma to STUDIO」を使ってノーコードツールで簡単にサイトを制作する方法

2023-10-26 制作・開発

こんにちは、クリエイティブ事業部でアートディレクターやデザイナーとして働く齋藤です。普段はWebサイトやサービスUIをメインとして、クライアントさまと共に様々なクリエイティブの制作を行っています。

弊社ではプロジェクト進行におけるメインのデザインツールに『Figma』を使用しています。１つのファイルを使用して上流工程のUX戦略からデザイン完了まで一貫して行うことができ、情報が集約しているため作業しやすいのが特徴です。

頻繁にアップデートも行われていて、最近ではデザインデータからソースコードを出力するDevelopper機能も進化しています。そろそろFigmaだけでWebサイト制作ができてしまうのではないか、なんて話も同僚との間で出たりするほど、将来性もある便利なツールです。

今回はそんなFigmaに実装された、新しいプラグイン「Figma to STUDIO」を試してみたいと思います。デザインをするうえで、Figmaのプラグインは欠かせないものです。使いこなすことで、このツールの性能をより向上できるチートアイテムのような存在でしょうか。

「Figma to STUDIO」のプラグインとは？

SNSでざわつかれるほどに人々の興味を集めた「Figma to STUDIO」は、Figmaで作ったデザインをノーコードツールの『STUDIO』にコピー＆ペーストすることで、サイト変換できるプラグインです。

STUDIOとは

まず、STUDIOについて簡単に説明します。

STUDIOは、誰でも簡単にブラウザ上でWebサイトが制作できるサービス。決まった型がなく、自由にデザインできることから、多くの方に支持されています。コードの書けない人でも気軽に使用できるため、制作スピードも上がり低コスト短納期でのリリースを叶えることができます。

また、デザインができない人のためにもクオリティの高いテンプレートが豊富に用意されているなど、使用するハードルがとても低いツールだと言えるでしょう。

さらに、日本発のサービスなので、わからないことがあればチャットで気軽に相談できることや、日本語で対応してもらえることは嬉しいポイントです。

STUDIOを使う際に気をつけること

STUDIOは2017年にβ版がリリースされ、アップデートを重ねてきているサービスです。そのため、現段階では有料プランを選択しても実装不可能な機能があることを予め確認をしておきましょう。（ログイン機能や決済機能、予約機能、タグの絞り込み、ページネーション、ランキングの抽出など。）

また、簡単にWeb制作ができるサービスではありますが、HTMLやCSSの予備知識がないと通常よりも時間はかかってしまいます。ノーコードツールだからと油断せず時間/工数は多めに見積もった方が良いでしょう。

Figma to STUDIOを使ってみる

それでは実際にFigma to STUDIOのプラグインを使っていきたいと思います。

今回は、一からデザインを起こしてしまうと時間がかかってしまうことにくわえ、仮想サイトよりも実際にリリースされているサイトの方が皆さんにも想像してもらいやすいと考え、弊社で運営している『クロスデザイナー（XDesigner）』のサービスサイトを例に進めていきたいと思います。

クロスデザイナー（XDesigner）とは

弊社が運営するクロスデザイナーはフリーランス・業務委託デザイナーの求人に特化したエージェントサービスです。7,000人以上のデザイナーが登録しており、企業とデザイナーのご希望にあわせてご紹介を行います。Webデザイン、UI/UXデザイン、アートディレクション、グラフィックデザイン、デザインエンジニアリングなどのスキルをもつフリーランスデザイナーと、即戦力デザイナーを探している企業のマッチングをご支援します。

デザイナーの方は利用無料。企業の方も初期費用／導入費用／着手金はすべて無料。デザイナーと契約＆稼働してはじめて料金が発生します。サービスの詳細は、以下の公式サイトからご確認ください。

クロスデザイナー公式サイト

手順１：アカウントの登録

作業前にFigmaとSTUDIOのアカウントを紐付ける必要があるかと思っていたのですが、それぞれのアカウントを持っていれば問題ありませんでした。

Figmaのアカウント登録はこちら

STUDIOのアカウント登録はこちら

手順２：プラグインのインストール

Figmaのコミュニティから「Figma to STUDIO（Beta）」のプラグインをインストールしましょう。

インストールはこちら

プラグインをダウンロードしたら、実際にFigmaファイルを開いてプラグインを呼び出してみましょう。

STUDIOにインポートしたいフレームまたはレイヤーをクリックすると、プラグインのウィンドウに該当箇所が表示されます。問題なければ「クリップボードにコピー」を選択してください。これでコピーが完了です。

手順3：デザインのインポート

Figmaのデータをコピーしたら、次はSTUDIOで新しいプロジェクトを作成してください。

作成されたプロジェクトの真っさらなアートボードにデザインデータを「Cntrl+V」で貼り付けてください。

確認画面が出るので、「デザインをインポート」を選択すると読み込みが始まります。（若干ボタンのテキストの位置が崩れていますが、これぐらいであれば手作業で直せるので問題ありません）

デザインフレーム全体を一気にコピー＆ペーストすることもできますが、現状のベータ版だと固まってしまう現象が多々みられました。ボックス階層を作りすぎてしまうとエラーが出てしまうため、できる限り少ない箱で作る必要がありそうです。また、それぞれのセクション、場合によってはパーツごとに行うのが良いかもしれません。