お役立ち情報

サイトURLだけでワイヤーフレームに変換される!? – HTML to Figma を使ってみた。

ワイヤーを作らなくて済む!?

みなさん、こんにちは。どんぶラッコです。

先日こんなツイートを発見しました。

…まじで!?

ということで、筆者も実際に使ってみました!

Figma に会員登録する

まずは登録から始めます。

https://www.figma.com/

3プロジェクトまでだったら無料で使えるようですね。ということで Starter プランで登録します。

そして、プロジェクトを作成します

HTML to Figma プラグインをインストール

当該機能はプラグインで提供されているようです。 Manage Plugins … をクリックします。

HTML to Figmaを検索してインストールします。

すると、プラグインに HTML To Figmaプラグインがインストールされました!

あとはURLを入力してIMPORTを押すだけです!

ここではデフォルトで入っている https://builder.io を入力してみます。

でん!

すごい!!!!!

レイアウトがインポートされています。

あとはレイアウトに沿って文字を変更するだけ!

簡単すぎてビビりますね…

今後に期待!

すごく便利なプラグインですが、プラグインの説明にある通り、Best Effort型のプラグインです。全てを完璧にインポートできる訳ではありません。

例えば、弊社のコーポレートサイト

これをインポートするとこのようになりました。

また、オフショアの紹介LP

https://offshore.proglearn.com/

は、このようになりました。

Parallaxを使ったりしていると、表示が崩れてしまうようですね。

アニメーションがついていないサイトには有効なのかもしれません。

また、Figma上で使う前提なので、Figmaユーザ向けの機能ですね。

しかし、ノンコーディングの可能性をとても感じる機能ですね!

間違いなく、今後も注目していくべき機能のひとつです。

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニアを経て、quintet株式会社CTOに就任。普段はNuxt.jsやLaravelを使用しています。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です