「Figma to STUDIO」正式版をローンチ！ ベータ版から追加された2つの機能とは？

「Figma to STUDIO」とは？

「Figma to STUDIO」とは、デザインツールのFigmaで制作したデザインデータを、STUDIOにインポートできる無料のプラグインだ。Figmaで作ったデザインをコピーして、STUDIOにペーストするだけでWebサイトが構築できる。自由配置のままインポートでき、レスポンシブデザインにも自動で対応する。

2023年8月にベータ版をリリースし、ユーザーからは「ベータ版でも作業が効率化した」「感動した」など好評の声が寄せられていた。そして今回、満を持して“正式版”をリリースしたわけだ。

「Figma to STUDIO」の3つの進化

イベントでは、まずSTUDIOの甲斐啓真氏による操作デモが行われた。基本的にベータ版から操作体験は変わっていなく、今まで通りに使える。では何が変わったのだろうか？ 大きな違いは、主に次の3つだ。

進化1精度向上

「ユーザーの声を聞きながら改良を重ね、正式版としてリリースできるクオリティに至った」と甲斐氏。STUDIOにとって競合に当たるノーコードツール「Webflow（ウェブフロー）」や「Framer（フレーマー）」にもFigmaからのインポート機能があるが、それらに比べても精度が高いという。

競合のツールは直感的に使うのが難しかったり、デザインツールに寄っていてWebサイトを構築するという点では難しかったりします。

『Figma to STUDIO』なら、オートレイアウトではないものでも自動変換でき、レスポンシブにも対応するので、一番快適に使えるツールになっていると思います。とはいえ、オートレイアウトを設定していたほうがデザインが崩れず、高精度にインポートできます（甲斐氏）

進化2カラーパレット機能を追加

カラーパレット機能が追加された。カラーピッカーも付いており、インポート時に背景やテキストの色をまとめて変化させることができる。

進化3ページモードの追加

複数ページをインポートできる機能「ページモード（Beta）」が追加された。インポートしたいFrame名の先頭に「/」をつけると、ページとして認識する。Figma上でつけたリンクも認識できるため、Figmaで作った複数ページを、そのままSTUDIOで公開できるようになった。

正式版として出せるクオリティになったとはいえ、使ってみると精度の限界を感じることがあるかもしれません。しかし、どんどん予測範囲を広げ、動かないところを減らす試みをしていきます（甲斐氏）

「Figma to STUDIO」の開発秘話と今後の展望

続いてのコーナーでは、NewsPicksやSPEEDAなどを提供しているユーザベースの平野友規氏と、デザインスタジオ「knots creative」の村木淳之介氏が登壇。甲斐氏と3人によるトークセッションが行われた。

デモをみた感想を求められた平野氏は、2024年1月に公開しなければいけないランディングページ制作のプロジェクトを抱えているとのことで、「その制作を『Figma to STUDIO』に賭けている」と話し、会場の笑いを誘った。村木氏は「Webデザインの世界がここまできたかと驚いた」と、正式版を高く評価する。

開発秘話について村木氏から質問があがると、「もともと『Figma to STUDIO』というプラグインじゃなかった」と甲斐氏。

STUDIO上でデザインと構築をワンフローにすることを目標に、自由配置のものをボックスモデルに変換するエディタを開発していました。しかし現実問題、FigmaでデザインしてからSTUDIOで構築するという流れが多く、連携機能を求める要望の声がありました。

STUDIOでも、Figmaを超えるデザインのしやすさを追求したい気持ちもありますが、ユーザーのニーズに応えて価値を提供するためにも方向転換し、開発途中だったエディタの技術を活用して、『Figma to STUDIO』のプラグインを作成しました（甲斐氏）

セッションのなかでは、参加者からも質問を受け付ける場面もあった。今後の展望について甲斐氏は、次のように語る。

今後は画像認識のAIを使って、さらに精度を上げていきたいと考えています。新しい技術や機能を織り交ぜながら、最終的にはより便利になっていくでしょう。FigmaとSTUDIOを活用している人には、ぜひ使ってほしいです（甲斐氏）

イベントの最後には、ミートアップの時間が設けられていた。ユーザーの声をプロダクトにすぐに反映するSTUDIOなだけに、「Figma to STUDIO」の更なる進化が楽しみだ。