AdobeXDからfigmaに乗り換えて困った事とその対処方法
![AdobeXDからfigmaに乗り換えて困った事とその対処方法](https://humhum.co.jp/wp-content/uploads/2023/10/004-3-1800x1200.jpg)
AdobeXDをベータ版から使っていましたが、Adobeがfigmaを買収してXDがなくなると噂になり始めたのが2023年入ってから。 2023年後半になってやっと、figmaへの移行を始めました。
XDでのWEBデザインに慣れていた人が、figmaを使って困ったところ書き出してみました。
フレームサイズ
普通にフレームサイズにすると、高解像度に対応してなくて、作業画面やスマホの確認画面で文字やロゴの解像度が低く滲む問題。
テキストの表示はこの設定で2倍表示になったので、滑らかに表示された。
![](https://humhum.co.jp/wp-content/uploads/2023/10/eb4bf7647b324fd5e3abe84039203feb.jpg)
![](https://humhum.co.jp/wp-content/uploads/2023/10/98d1434036946c4fc26bd54ef7db164c.jpg)
![](https://humhum.co.jp/wp-content/uploads/2023/10/4482f5ad0c173d534dbdf07bd8be6504.jpg)
が、そもそもピクセルプレビューをオフにすると
![](https://humhum.co.jp/wp-content/uploads/2023/10/47985adfd2887fbbe06f407a83d8e16b.jpg)
![](https://humhum.co.jp/wp-content/uploads/2023/10/98dbe634802f2daade220012d0563f9c.jpg)
XDっぽく、ピクセルが気にならなくなります。
プレビューサイズの問題
スマホで表示する時にプレビューサイズの高さの設定が出来ないから、左上に置いたロゴが、iPhoneのノッチで隠れる。
iPhoneでsafari開いてスクショをとってブラウザのUIだけをトリミングして貼り付けました。
![](https://humhum.co.jp/wp-content/uploads/2023/10/d3a4918e3b05b7e369123776712e4a89.jpg)
マスクのやり方
マスクの考え方がイラストレーターやXDなどのAdobe流ではなく、逆の考え方。ようは、表示したいレイヤーが上で、切り抜きたい枠が下のレイヤー。
まだ続きます。。。