ワイヤーを作らなくて済む!
みなさん、こんにちは。どんぶラッコです。
先日こんなツイートを発見しました。
ということで、筆者も実際に使ってみました!
Figma に会員登録する
まずは登録から始めます。
![](https://i0.wp.com/blog.proglearn.com/wp-content/uploads/2020/01/image-1.png?fit=1024%2C619&ssl=1)
3プロジェクトまでだったら無料で使えるようですね。ということで Starter プランで登録します。
そして、プロジェクトを作成します。
HTML to Figma プラグインをインストール
大きく2ステップで作業は終わります。
- プラグインのインストール
- プラグインにURL入力して、インポートを行う
当該機能はプラグインで提供されているようです。 Manage Plugins … をクリックします。
![](https://i2.wp.com/blog.proglearn.com/wp-content/uploads/2020/01/image-2.png?fit=1024%2C469&ssl=1)
HTML to Figmaを検索してインストールします。
![](https://i1.wp.com/blog.proglearn.com/wp-content/uploads/2020/01/image-3.png?fit=1024%2C287&ssl=1)
すると、プラグインに HTML To Figmaプラグインがインストールされました!
![](https://i0.wp.com/blog.proglearn.com/wp-content/uploads/2020/01/image-4.png?fit=1024%2C461&ssl=1)
あとはURLを入力してIMPORTを押すだけです!
ここではデフォルトで入っている https://builder.io を入力してみます。
![](https://i0.wp.com/blog.proglearn.com/wp-content/uploads/2020/01/image-5.png?fit=1024%2C599&ssl=1)
でん!
![](https://i0.wp.com/blog.proglearn.com/wp-content/uploads/2020/01/image-6.png?fit=1024%2C676&ssl=1)
すごい!レイアウトがインポートされています。
あとはレイアウトに沿って文字を変更するだけ!
![](https://i.gyazo.com/6067c89ec9973f488ed4770a074ad00d.gif)
簡単すぎですね。全くプログラミングは不要です。
今後に期待!
すごく便利なプラグインですが、プラグインの説明にある通り、Best Effort型のプラグインです。全てを完璧にインポートできる訳ではありません。
例えば、弊社のコーポレートサイト
![](https://proglearn.com/wp-content/uploads/2020/01/image-10.png)
これをインポートするとこのようになりました。
![](https://i0.wp.com/blog.proglearn.com/wp-content/uploads/2020/01/image-7.png?fit=1024%2C595&ssl=1)
また、オフショアの紹介LP
https://offshore.proglearn.com/
![](https://proglearn.com/wp-content/uploads/2020/01/image-9.png)
は、このようになりました。
![](https://i1.wp.com/blog.proglearn.com/wp-content/uploads/2020/01/image-8.png?fit=1024%2C595&ssl=1)
Parallaxを使ったりしていると、表示が崩れてしまうようですね。
アニメーションがついていないサイトには有効なのかもしれません。
また、Figma上で使う前提なので、Figmaユーザ向けの機能ですね。
しかし、ノンコーディングの可能性をとても感じる機能ですね!
間違いなく、今後も注目していくべき機能のひとつです。