はじめに
こんにちは、フロントエンドエンジニアのseya（@sekikazu01）です。
私はフロントエンドエンジニアではあるのですが、Figmaというデザインツールに関してはそれなりに詳しく、ちょっとだけUIデザイナーとして仕事をしていたこともあります。
※今後本連載では「エンジニア」と呼称する時には主にフロントエンドエンジニア、「デザイナー」と呼称する時にはUIデザイナーをイメージして書きます。
本連載では、そんな私が、ソフトウェアエンジニアの皆さまがFigmaというデザインツールを通してデザインのことを学んでみたくなる、Figmaを使って日々の業務の効率化だったり楽しくしたりするきっかけを得られる記事を書いていきます。
第一回では「エンジニアがデザインを学ぶと何が嬉しいのか」と銘打ちまして、まず始めに「なぜ？」の部分について私なりの考えを記していこうと思います。ざっくり概要を述べると、私はデザインツールであるFigma自体に魅力を感じ、そこからデザインというより抽象度が高い部分にも興味を持ち始めました。いきなり「デザインを学ぶ」と大きく構えるより、自分の日々の仕事に徐々にデザインに染み出す範囲を広げていく方がハードル高くなくできていくかなと思うので、ご参考までにお読みください。
それから第二回では「Dev Mode を活用したコーディングする時の Figma の見方」、第三回では「新機能 Variables の活用法」、第四回では「Figma x プログラミング」とFigmaを通じた具体的な話の解説をしていきます。
私はなぜデザインに興味を持ち始めたか
最初に私個人のデザインに興味を持ち始めた経緯をお話させてください。
私はキャリアの最初の数年は特にデザインにそこまで突っ込んだ興味は持っていないフロントエンドエンジニアとして働いていました。もちろんデザインをコードに起こすのが仕事の大きな部分なので多少はデザインの作られ方にも興味を持っていましたが、主にデザインはデザイナーだけが触るもので、自分はそれを受け取ってコーディングする、そんな意識でいました。
そんな私がデザインに興味を持ち始めたのは業務上必要に駆られてでした。およそ4年ほど前に私はアーリースタートアップに勤めていて、私がいたチームはデザイナーが1名、エンジニアが2名しかおりませんでした。デザイナーもプロダクトデザインのみならず、他にも紙物のデザインの仕事もたくさんあり、私が自身の業務を進めるためには「もう私がデザインするしかなくない？」というタイミングが訪れました。
そこから当時盛り上がり始めたFigmaを初めて使ってみたのですが、そこでさまざまなことに感動しました。
まずオンラインでいつでも最新の状態にアクセスできること。今では当たり前かもしれませんが、以前は最新のデザインを見るために都度デザイナーからファイルを共有してもらう必要がありました。また、Auto Layoutという中身に応じてフレームのサイズが変わる機能も革命でした。デザインの変更が容易になるのももちろんありますし、エンジニアとしてもdisplay: flexとほぼ同じ値が取れること、そしてそのデータがプラグインやAPIから取得できることに感動しました。
そんな中で極限までデザインからコードへのプロセスを楽にできないかとプラグインなどの開発をしていたのですが、やっていく内にこれはエンジニア単体で完結するものではなく、デザインの作り方まで染み出さないといけないことに気付きました。また、そのコーディングにとって嬉しいデザインの作り方はデザインに対しても嬉しさがありつつも、状況によっては枷になることもあり、デザインプロセス全体をプロダクトや組織の状況に応じて考える必要があるなと感じました。
かくしてエンジニアながらもデザイン沼にハマっていたのでした...…。
エンジニアがデザインを学ぶメリット
私の個人的な経緯を語ってきましたが、次にそんな試行錯誤を経て私が思うエンジニアがデザインを学ぶことのメリットについて解説していきたいと思います。
まず初めに述べておきたいのが「デザインを学ぶ」ことは必ずしも「自分でデザインができるようになる」ではないことです。もちろん実際に自分でデザインすることによって学べることも多々あるので、一度経験してみるのもいいことだとは思いますが、あくまでエンジニアとしての職能に軸足を置くのであれば実際に業務で他のデザイナーと同じくらいバリバリデザインできるようになる必要はありません。
エンジニアがデザインを学ぶことによるメリットは次のようなものがあると考えています。
