・マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!
・レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!
・JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!
ワイヤーを作らなくて済む!
みなさん、こんにちは。どんぶラッコです。
先日こんなツイートを発見しました。
ということで、筆者も実際に使ってみました!
Figma に会員登録する
まずは登録から始めます。

3プロジェクトまでだったら無料で使えるようですね。ということで Starter プランで登録します。
そして、プロジェクトを作成します。
HTML to Figma プラグインをインストール
大きく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ユーザ向けの機能ですね。
しかし、ノンコーディングの可能性をとても感じる機能ですね!
間違いなく、今後も注目していくべき機能のひとつです。