見出し画像

Figma+FramerでデザインがワンクリックでWebサイトになるらしい！　#Figma #Framer

starmix（スタミ）

こんにちは、VoicyでUI/UXデザイナーをしているスタミです。
以前書いた「ノーコードデザイナーでもFigmaガチ勢なら今日からWebサイト実装できるSTUDIO」という記事がとても好評だったので、今回はそこから派生して「Framerを使うとFigmaで作ったデザインをそのままWebサイトとして公開できる」っていう話をしたいと思います。
ここまでくるといよいよ「魔法ですか？」みたいな感じですw

ここで話すのと同じ内容をVoicyでも配信していますので記事を読みながら聴くもよし、聴くだけでもよしです。

「Framer」はFigmaライクなデザインツールであると同時にSTUDIOライクなノーコードツールでもある

今となっては記憶が曖昧なのですが、私が初めて「Framer」というUIデザインツールを知った時は、「Figmaライクなデザインツール」として紹介されていたような気がします。
その時は「無料だしFigmaからの乗り換え先としてあり！」みたいな話をしている人がちらほらいたので、「自分は別にFigmaに大きな不満もないし、手間を考えると今は絶対乗り換えないな…」とだけ思ってそれっきり注目していませんでした。
しかしながら最近ちらっと「STUDIOライクなノーコードツール」として紹介しているツイートを見かけて急に興味が湧きました。
実際に使ってみると、使用感としてはFigmaライクなデザインツールではありますが、それだけでなく、作ったデザインを「publish」ボタン一つでそのままWebサイトとして公開できる仕様になっているので、「これは確かにSTUDIOライクなノーコードツール…！」と納得しました。

感動ポイントはFigmaのデザインデータをインポートできるプラグイン

STUDIOを使ってテンプレートなしの完全オリジナルのサイトを公開する時は、「一旦Figmaでデザインを作成してからそれをSTUDIO内で再現する」ということをしていました。
STUDIO内でオリジナルのデザインをゼロベース１発で作り込むのは至難の業なので、少なくとも基礎的なトンマナは別で作ってから途中でSTUDIOの作業に移行するみたいな感じでやってる人が多いんじゃないかと。

その点、FramerはFigmaからFramer用にデザインデータをコピーし、Framer上でペーストできる様になっているので、「とりあえずデザインを再現する」っていう工程を丸っとスキップできます。
この時点ではレスポンシブ対応は無い状態ですが、そんなもの必要ないんだという場合なんかは「publish」ボタン１クリックでそのままWebサイトとして公開できます…！😲
Figmaからコピペして１クリックで公開という衝撃！！！！🔥
レスポンシブ対応したい場合はそこからいくつかのサイズでどう見せたいかを指定するだけで対応できます。
STUDIOでもレスポンシブ対応はできるのですが、Framerの方がわかりやすいポイントとして以下2点があります。

  • FigmaライクなUIで、どこから指定するのか学び直さなくても何となく使えること

  • それぞれのビューを横並びにして俯瞰しながら指定できること（表示崩れに気づきやすい）

STUDIOでは各サイズを切り替えながら、行ったり来たりしながらの作業でたまに後から「え、こっちそんな風になっちゃってたの？」と判明する時があって直しに結構手間がかかっていたのですが、これならすぐに異変を察知できるのでやりやすい…

実際の操作性

STUDIOについて書いた時もそうでしたが、「こういうことはどうせ全てカイクンさんが解説してくれてるでしょ」と思ったら本当に解説してくれてるw

Webflowというツールは知らなかったのですが、こちらも何やらスゴそうです…！

Figmaとの共存の道を選んだことがプロダクトの成長戦略として秀逸

いつからこの仕様だったのかまでは調べていませんが、無理矢理Figmaに成り代わろうとせずに共存する選択をしているのもプロダクトの成長戦略として秀逸すぎる…。
ターゲットもソリッドで、現状は確実にFigma使ったことあるデザイナーをターゲットにしているように見えます。
STUDIOは非デザイナーのユーザーもガッツリターゲットに入れていて、色々な人にとって使いやすいという価値がありますが、今デザイナーに特化して使いやすく設計するなら確かにこうなるなと感動しました。

今Figmaを使わなくなることはないが、今後に期待

私が扱っているプロダクトはWebではなくアプリがメインなのと、LPなどのコミュニケーションデザインも今はほとんどやっていないのでおそらくSTUDIOをFramerに置き換えることはあってもFigmaを置き換えることはないかなと。
最近Figmaのアップデートもありましたが、思想としてはデザインとコーディングがセットになっていることやAIをいち早く取り入れるなどしていてFramerの方が先行しているなと思うところが多々あり、今後の展開には期待しています。

ここまで読んでいただいたUI/UXデザイナーの方、交流会しませんか？

ここまで読んでいただいたUI/UXデザイナー、リサーチャーの方、ありがとうございます。
Voicyのデザインチームではリファラル採用を視野に入れつつ絶賛UI/UXデザイナー、リサーチャーの方との横のつながりを強化中です！
Voicyへの転職意欲のある/無しに関わらず、私が運営しているVoicyチャンネル「プロダクトハック」にゲスト出演&もっとディープなお話も飲みながらざっくばらんにしませんか？
ご自身が担当するプロダクトのPR色強めでも構いません。

前回、ポッドキャスト番組「Inputalk Design」からイワイさん、りゅーさんに出演いただいた会の配信はこちら↓

ご連絡はTwitterのDMなど、各種ルートから絶賛お待ちしています🙌
https://twitter.com/open_starmix


この記事が気に入ったらサポートをしてみませんか？