お役立ち情報

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

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

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

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

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

Figma に会員登録する

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

https://www.figma.com/

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

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

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

大きく2ステップで作業は終わります。

  1. プラグインのインストール
  2. プラグインにURL入力して、インポートを行う

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

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

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

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

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

でん!

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

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

簡単すぎですね。全くプログラミングは不要です。

今後に期待!

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

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

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

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

https://offshore.proglearn.com/

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

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

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

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

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

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

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

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

@proglearn
一緒によく読まれている記事

COMMENT

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