見出し画像

Figma AutoLayoutでSTUDIOとのコラボレーションを最大限に活用する方法

Figmaのプラグイン(Figma to STUIDIO)を使うことで、実装へのシームレスなステップを提供し、ウェブサイトの制作プロセスを劇的に簡略化が出来ます。

しかしAutoLayout機能を正しく設定しないと、Figma to STUIDIO は機能してくれません。この記事では、FigmaのAutoLayout機能を正しく駆使して、STUDIOのノーコードツールを最適化し、ウェブサイト制作を効率的に行う方法について説明していきます。


FigmaでのAutoLayoutの設定方法

(AutoLayoutを熟知している方は、飛ばしてくださいませ。)

AutoLayoutとは何ぞや?という方もいると思うので、簡単に説明すると、オブジェクトの中身に応じて余白や配置を自動で調整する機能です。これにより、レイアウト調整などの手間を省くことができます。

Figmaの画面でいうと下記の箇所です。左側のレイヤーでAutoLayoutの設定をしていると、右側の箇所にAutoLayout設定が現れます。

FigmaのAutoLayout設定画面。
FigmaのAutoLayout詳細。

FigmaのAutoLayout設定を行うと、等間隔の余白を簡単に設定できます。

  • 横幅:294px

  • 横に並べる(折返し)

  • 項目の間隔:10px

  • 水平パディング:10px

  • 垂直パディング:10px

今までのデザインツール(Photoshop・Illustrator)だと作成に時間がかかりますが、FigmaのAutoLayoutだと瞬時にこういったレイヤーの作成が可能です。

STUDIOとの連携を最大限に活かすAutoLayoutの設定方法

さて、本題のSTUDIOとFigmaの連携です。

例えば下記のようなデザインをSTUDIOと連携を行います。

よくある質問のデザイン

例えば、下記のようなAutoLayoutを設定していないレイヤーでプラグインを使ってみると、、

グループ分けバラバラで、AutoLayoutが未設定のレイヤー

それでも、きれいなレイアウトで導入が出来ました!AutoLayoutの設定がなくても、STUDIOへの連携ができています。

STUDIOへ連携されたデザイン。きれいなレイアウトで導入ができている。

では、STUDIOとの連携でAutoLayout設定は必要ないのか?

結論から言うと、AutoLayoutの設定は必須と考えます。

「レイヤーがバラバラでもSTUDIOに連携できるなら、AutoLayoutは要らないんじゃないの?」

という反論もあると思います。しかしレイヤーがバラバラの場合、AutoLayout設定が無い場合は、細かい箇所で意図しない数値になる可能性が高くなります。

例えば今回のケースは、上下のパディングが24pxの想定でしたが、上のパディングが25pxになってしまいました。AutoLayout設定していないと、余白がズレてしまう場合があります。

STUDIOに反映したときのパディング。上側が25pxになってしまった。


別の例として、下記のデザインでSTUDIO連携を試したいと思います。

別のデザインレイアウト例。

AutoLayout設定をしていないデザインでSTUDIO連携を行うと、いくつか乱れが発生しました。

  • セクションの上限の余白

  • 改行位置

AutoLayout設定をしていないデザインでのSTUIDIO連携


AutoLayout設定を行った場合のSTUIDIO連携を行ったのが下記画像です。
余白、改行位置もAutoLayout設定どおりに、きちんと反映されてますね👍

AutoLayout設定したデザインでのSTUIDIO連携

AutoLayout設定していないデザインでも、STUIDIO連携後に微調整すればもちろん問題なく実装できます。しかし、ひと手間かかるのと、微妙なズレに気付かないケースが発生します。こういった事象を防ぐためにもAutoLayout設定しておくのがベターでしょう。


画像レイヤー名の先頭を<img>にしよう

AutoLayout以外にも、細かい点として、画像についてはレイヤー名の先頭を<img>にすると、画像の取り込みが上手くいきます。

レイヤー数が多いベクター画像
※ Figma上のレイヤー名先頭に<img>を追加し、インポートをお試しください

Figma to STUDIO (Beta) | STUDIO U


その他の主な注意点として、大量のセクションなど膨大なレイヤーをコピーすると、Figmaが固まってしまいコピーが上手くいかないことがあります。プラグインからコピーする際は、デザインしたWEBサイト全体ではなく、一部をコピーして、何回かに分けてSTUDIOにペーストしていきましょう。


余白用コンポーネントでレイアウト調整した場合のSTUDIO連携

余白用のコンポーネントのレイアウト方法

Figmaでのデザインは、AutoLayoutを0pxにし、余白用のコンポーネントでレイアウトする方法もあります。

正方形の余白用コンポーネント(4px と 8の倍数で構成)


AutoLayoutを0pxに設定し、余白用コンポーネントを挿入したイメージです。大きな余白箇所ではひと目で余白数値が分かりますね。
しかしこのままだと余白の主張が強いため…

AutoLayoutを0px設定。余白コンポーネントを適用した画像

余白コンポーネント箇所のレイヤーの不透明度を0%にして、余白コンポーネントを見えなくします。スッキリしましたね👍

余白コンポーネント箇所のレイヤーの不透明度を0%にした場合

レイヤーを非表示にしてしまうと、余白が適用されないため、余白が消えてしまうので注意です。

余白用のコンポーネントを非表示にした場合

余白用のコンポーネントのレイアウトでのSTUDIO連携

不透明度を0%にして連携してみたところ、Point01の高さが上手くいってないですが、ほぼデザイン通りに取り込んでくれました。

しかしレイヤーを見てみると、余白用のコンポーネントがレイヤーとして取り込まれてしまいます。

余白用のコンポーネントを使って取り込んだときのSTUDIO画面

「余白用レイヤーはあるけど、見た目は大体整っているし問題ないか」と考えるかもしれませんが、スマートフォン・タブレットの表示ではどうでしょう。スマホでは、横にレイアウトされていました。

並びが横のver.

縦に直してみると…
「おっ!悪くないじゃん!」ときれいに見えるかもしれませんが、ここからスマホ用に余白調整を試みるときに気付くはずです。
横幅・縦幅が固定されたレイヤーに対して、1つずつ余白調整を行うことに。

並びが縦のver.

もちろん1つ1つ余白用レイヤーの縦幅を直していけば、スマホ・タブレット用に余白を最適化できます。しかし、これが調整方法として最適かというのは微妙です。パディングであれば、STUDIO上で縦横一緒に調整できますが、この方法だと1つ1つ余白調整するため、操作が大変になります。

好みはありますが、FigmaからSTUDIOに取り込む場合は、素直にAutoLayoutで余白調整を行うのがベストと考えます。


さいごに

FigmaとSTUDIOとの連携を最大限に活かすための方法でした。STUDIOのプラグインはまだBeta版で、これからさまざまな改善が予定されています。

今後予定している追加機能
・カラーピッカーへ使用カラーの自動追加
・自動レスポンシブ変換のオンオフ切り替え
・アニメーションの簡易追加
・フォームの自動検出
・ハンバーガーメニューの作成
・アクセシビリティ自動対応
・複数ページへの変換

Figma to STUDIO (Beta) | STUDIO U

ぜひ、FigmaとSTUDIOとの連携に役立ててくださいませ。


この記事が参加している募集

この記事が気に入ったらサポートをしてみませんか?