FigmaからSTUDIOへ移せるようになっても、制作経験が必要だと感じる理由
Figmaで作成したデザインをSTUDIOでWebサイトを制作をしています。
「Figma to STUDIO」の登場で、Figmaで作ったレイアウトを、コピー＆ペーストに近い感覚でSTUDIOへ持っていけるようになったことで、以前よりも制作を始めやすくなりました。
特にPCサイズのレイアウトについては、Figmaのデザインを見ながらSTUDIO上で一から組み直す必要がなくなり、制作時間をかなり短縮できるようになったと感じています。
一方で、実際に使ってみると、FigmaからSTUDIOへレイアウトを移しただけで、Webサイトがそのまま完成するわけではありません。
STUDIO上で構造を確認したり、正しく移らなかった部分を修正したり、スマートフォンなどの画面サイズに合わせて調整したりする作業は、今も必要です。
今回は、FigmaからSTUDIOへデザインを移せるようになったことで変わった部分と、変わらず制作経験が必要だと感じている部分について書いていきます。
PCサイズの制作はかなり速くなった
これまでは、Figmaで作られたデザインを確認しながら、STUDIO上でテキストや画像、ボックスなどを一つずつ配置していました。
デザインを見ながら、要素の幅や高さ、余白、配置などをSTUDIO上で再現していく必要があり、PCサイズのページを組み立てるだけでも、それなりに時間がかかります。
現在は、Figmaで作成したレイアウトをSTUDIOへ持っていけるため、デザインを一から再現する作業が大幅に減りました。
少なくともPCサイズについては、最初のレイアウトを一気に作れるようになっています。
すべてを手作業で作っていた頃と比べると、制作のスタートはかなり速くなりました。
レスポンシブ対応は今も一つずつ調整する
PCサイズのレイアウトを移せるようになった一方で、スマートフォンやタブレットへの対応方法は、以前と大きく変わっていません。
PCサイズのデザインを移した後に、それぞれの画面幅に合わせて一つずつ調整する必要があります。
例えば、PCでは横並びになっている要素をスマートフォンでは縦並びに変更したり、文字サイズや余白を調整したりします。
画像の見せ方やボックスの幅なども、画面サイズごとに確認しなければなりません。
PCサイズのレイアウトをそのまま縮めれば、スマートフォン版が完成するわけではありません。
そのため、FigmaからSTUDIOへレイアウトを移すことで制作時間は短縮できますが、レスポンシブ対応まで自動的に完了するわけではないと感じています。
Figmaから移しても、そのまま使えるとは限らない
FigmaからSTUDIOへレイアウトを移した際に、見た目はデザインに近くても、STUDIO上では修正が必要な構造になっていることがあります。
実際に使っている中で、いくつかよく見かけるパターンがあります。
paddingやmarginに大きな数値が入っている
よくあるのが、要素の位置を合わせるために、paddingやmarginへ非常に大きな数値が入っているケースです。
PCサイズではデザイン通りに見えていても、画面幅を変更するとレイアウトが崩れてしまいます。
画面サイズを変えたときに崩れる場合は、設定されている数値だけを少しずつ直すのではなく、ボックスの構造や要素の配置方法から見直した方がよいこともあります。
Figmaから移した直後の見た目が合っているからといって、そのままレスポンシブ対応へ進められるとは限りません。
どのような構造で配置されているのかを確認し、必要に応じてSTUDIO上で組み直す作業が必要になります。
背景画像が移らず、上のボックスだけが移る
背景画像を設定した要素の上に、オーバーレイの役割を持つボックスを重ねているデザインでは、うまく移せないことがあります。
Figma上では背景画像とボックスが重なった状態で表示されていますが、STUDIOへ持っていくと、上に置かれているボックスだけが移り、背景画像が反映されない場合があります。
この場合は、STUDIO側で改めて背景画像を設定する必要があります。
レイアウトを移せたように見えても、一部の設定が抜けている可能性があるため、FigmaのデザインとSTUDIO上の表示を比較しながら確認することが大切です。
線が画像として配置される
デザイン上で使われている線が、STUDIO上では画像として配置されるケースもあります。
見た目は線になっていますが、STUDIO上の要素を確認すると、ボーダーではなく画像として入っています。
一方で、Figma側でフレームのボーダーとして線を設定している場合は、比較的問題なく持ってくることができます。
同じ見た目の線でも、Figma側でどのように作られているかによって、STUDIOへ移した後の状態が変わります。
こうした部分も、実際にSTUDIOへ移してみなければ分からないことがあります。
STUDIOでできることと、できないことを切り分ける
生徒さんや、すでに卒業した生徒さんから、STUDIOの実装について相談を受けることがあります。
STUDIOをある程度使えるようになり、Figmaからレイアウトを移せるようになったことで、以前よりも制作自体は進めやすくなっています。
ただし、作りたいデザインや動きが、STUDIOの標準機能だけで実現できるとは限りません。
STUDIOの基本機能で作れるものもあれば、標準機能だけでは対応が難しいものもあります。
その場合は、iframeやサンドボックスのボックスを使い、カスタムコードを入れて対応することがあります。
ここで必要になるのが、
「これはSTUDIOの標準機能で実現できるのか」
「標準機能では難しいため、カスタムコードを使う必要があるのか」
という切り分けです。
最初からコードを使えばよいわけではありません。
STUDIOの標準機能で作れるものは、できるだけ標準機能を使った方が、後から編集しやすくなることもあります。
一方で、標準機能だけでは難しいものを無理に再現しようとすると、構造が複雑になったり、思ったような動きにならなかったりします。
どの方法を選ぶべきかを判断するには、STUDIOの機能を知っているだけでなく、これまでにどのような方法で実装してきたかという経験も必要になります。
正しく移らなかったレイアウトを直す力も必要
FigmaからSTUDIOへデザインを移せるようになったことで、制作の最初の工程は楽になりました。
ただし、移したレイアウトがデザイン通りにならなかった場合に、どこを修正すればよいのかを判断する必要があります。
STUDIOの操作や構造を理解していれば、設定されている余白や幅、ボックスの並びなどを確認しながら修正できます。
また、もともとHTMLやCSSなどのコーディング知識があると、なぜそのレイアウトが崩れているのかを考えやすい部分もあります。
例えば、大きなmarginで位置を合わせているために崩れているのか、親要素と子要素の幅が合っていないのか、要素の配置方法を変える必要があるのかなど、原因を推測しながら修正できます。
Figmaからレイアウトを移せることと、そのレイアウトを正しく修正できることは、別の技術だと感じています。
細かい問題ほど、検索しても答えが見つからない
STUDIOの基本的な使い方であれば、公式のヘルプやインターネット検索で解決方法を見つけられることがあります。
しかし、実際の制作で発生する問題は、複数の条件が重なっていることも多くあります。
特定のデザインをFigmaから移したら、特定の画面幅でだけ崩れる。
背景画像とボックスを重ねた部分だけが正しく移らない。
同じように見える線でも、一方は問題なく移り、もう一方は画像として配置される。
このような細かい問題は、検索しても同じ事例が出てこないことがあります。
検索する言葉自体が分からなかったり、使用しているデザインや構造によって原因が異なったりするためです。
そのため、過去に似た事例を経験しているかどうかが、解決までの速さに影響します。
これまでに見たレイアウトや、過去に修正した方法を思い出しながら、原因を一つずつ確認していくことになります。
ツールが便利になっても、経験が不要になるわけではない
FigmaからSTUDIOへレイアウトを移せるようになったことで、Webサイト制作は確実に速くなりました。
特に、PCサイズのレイアウトを一から作る作業が減ったことは、大きな変化だと感じています。
一方で、Figmaから移したレイアウトが、そのままレスポンシブに対応できるとは限りません。
paddingやmarginに大きな数値が入っていないか、背景画像が正しく反映されているか、線が画像として配置されていないかなど、移行後の状態を確認する必要があります。
さらに、作りたい表現がSTUDIOの標準機能で実現できるのか、カスタムコードが必要なのかを判断する力も求められます。
ツールが便利になったことで、単純な作業は減っています。
その一方で、移されたデータを確認し、問題を見つけ、適切な方法で修正する部分には、これまでの制作経験が引き続き必要です。
FigmaからSTUDIOへ移せるようになったことで、制作の入口はかなり広くなりました。
しかし、実際にサイトとして完成させるためには、STUDIOの機能を理解し、さまざまな事例を経験しながら、できることとできないことを判断する力が必要になると感じています。