有名サイトを簡単にFigmaに書き起こす！「Figr」を使ってみる

Twitterでちょっとだけ話題になっていた、Figma向けに有名サイトを書き起こしてくれるサイトFigrを早速使ってみました。

海外の新規Webサービス紹介サービスProduct Huntでも、2023年10月の現時点デイリーランキングで2位となっており、一定の評価をすでに得ているようですね。

Web企画・開発では、大手のサイトデザインを参考にする という作業が必要になってきます。完全にパクるのはダメですが、大手のサイトは数人以上のプロフェッショナルなUIデザイナーが考え尽くした上でそのデザインになっていることが多いです。

従って、いいサービスを作る上で、すでに世の中にあるいいサイトを穴が開くほど眺めて研究することは、必ず求められてくると思います。

早速使ってみましょう。

サイトにアクセス。

ページ上部のサーチバーをクリックすると、たくさんの候補が出てきます。

有名サイトのサービス名 だけでなく、 「Home」「Creativity」のようなカテゴリー も選択可能です。

私は、Appleを選択。

検索結果に一致するものが表示されるので、iPhone(なぜかiPhone14笑)のページを選択。

デザインのプレビュー的なものが表示されます。

「フィグマのデザインをコピー」 Copy Figma Design ボタンを押すと、コピーされます。

そのままFigmaのデザインボードにペーストすれば、いつも通りFigmaで利用できます。

単に画像で貼り付けただけでなく、inspectでcss等も表示されていることが確認できますね！

差し替えるだけで、丸パクリしたサイトを作れちゃうかも？内緒です...笑

まず気になったこととして、これって、デザインの著作権どうなっている のでしょう...。

確かに大手のサイトをコピーできるのはとても便利で、ユーザーメリットに適っているとは思いますが、有料プランで提供するとなるとちょっとフリーライダーの感が出ちゃうかなとも思いました。

ただ、すでにProduct Huntでも評価を得ているので、著作権の問題はある程度解消しているのでしょうね。

日本のWebサービスには全く対応できていないようです。 (2023年10月初旬現在)

従って、おそらくある程度人の手が入ったような方法でfigrのデザイン化を行なっている可能性もあるなと思っています。

全てプログラムあるいはAIによるフルオートで書き起こしをできるのであれば、利用できるサービスを絞る必要はないですからね。

ただ、ファイル数はかなり多いので、データ作成時の何らかの自動化・省力化はやっているでしょうね。

料金プランページによると、コピペできるデザインは無料プランでは3点のみ のようで、これはお試しということですね。

6ドルのクリエイタープランでは50点まで使えるようなので、こちらならば十分ですかね。。

バリバリ使うなら課金が必須ですね！

figrのいいところは、UIを好きなところに切り貼りできるところであり、インターフェースとしてのコピペって利便性が高いんだなと改めて思った次第です。サービス設計的にもサブスクモデルなので、いわば、課金すればコピペし放題 というところでしょうか。

いかがでしたでしょうか。

個人的な結論としては、使い道は大いにあると思います。「このサービスのこの部分のように作ってほしい」というとき に、これを利用すれば即プロジェクトで議論している中に引用することができ、チーム開発の生産性をさらに向上できると思いました。

一方で、自分のように個人開発のケースについては参考にする用途が中心かな、と思った次第でした。

この記事が何かのお役に立てれば幸いです。
最後までお読みいただきありがとうございました！