ワイヤーを作らなくて済む！
みなさん、こんにちは。どんぶラッコです。
先日こんなツイートを発見しました。
ということで、筆者も実際に使ってみました！
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ユーザ向けの機能ですね。
しかし、ノンコーディングの可能性をとても感じる機能ですね！
間違いなく、今後も注目していくべき機能のひとつです。
