デザイナーがいない中でも Figma の html.to.design プラグインを活用して乗り切る

今まで開発がメインでデザインはあまり経験値が高くない。ノンデザイナーズデザインブックを読んだり、一度友達のウェブサイトのデザインをやったことがあるくらい。 なので、なかなかデザイナーがいないと困ることがあるのだが、今の開発はデザインナーが入っていないこともあり、デザイン面も担当している。 まだβ版として提供していることもあり、見た目の綺麗ななどよりは必要な機能が揃っていることやユーザーが迷わないことなど、優先度をつけてできる範囲で行なっている。

そんな中、最近よく使うようになったのが、Figma の html.to.design プラグイン、この記事を読んでから使い始めたが、めちゃくちゃ便利。 coliss.com

もともと Figma を使ってデザインを作ってきた訳ではないので、Figma 自体そこまで使いこなせていなかった。 デザイナーに Figma で作ってもらって、その Figma をもとに実装をするくらい。 Figmaを使いこなせるようになったところで、一からデザインをうまく作れるスキルを持っている訳ではないため、既存の Web サイトをもとに作れるのが楽。

Figma の管理ができてなくてもなんとかなる

常に Figma のデータを最新のデザインであると定義してしまうと、Figma 側を適切に管理する必要が出てきてしまう。 Figma のスキルが低いことと、ちょっとした変更であれば Figma を触らずに直接 Web サイト側を修正したい。

このプラグインを使うと、Web サイト側を一気に Figma に持って来れるため、Figma 側の管理をそこまで気にしなくて良くなった。 必要な時に必要なページを import してしまい、開発が完了したらそのページは使い捨ててしまっても問題がない。 自分のようにプログラマーがデザイン面も触らないといけない時や、もともと Figma が入っていない状態から Figma を導入する時にはとても有効に使える。

他のサイトを参考にするときに楽

デザイナーじゃない人がデザインを考える時、おそらくは他のサイトをたくさん参考にすると思う。(デザイナーはどうだか知らないが) 自分の場合、イメージが近いサイトをメインの参考にするサイトとして、それプラス2,3参考にするサイトをピックアップして組み合わせるようにしている。 1つのサイトから全てを参考にしてしまうと、ほぼ丸パクリのようなサイトができてしまうからだ。

このようなケースで他サイトを参考にする場合には、もちろん Figma のデータは存在しないため、今回のプラグインがあることで一気に効率が上がった。