Мелкие недостатки Adobe XD или «как выбесить верстальщика»

Мелкие недостатки Adobe XD или «как выбесить верстальщика»

Как-то так повелось, что в основном я делал дизайн сайтов в Adobe XD. Непонятным образом Figma прошла мимо, и только сейчас начинаю ее использовать 🧐.

В XD есть несколько проблем, которые меня в большей степени подбешивают даже не как дизайнера, а как верстальщика. Если кратко их охарактеризовать — приложение для дизайна сайтов учитывает не все возможности верстки сайтов.

Например, в программе есть свойство «интерльяж». Только при верстке как правило используется свойство line-height, которое по умолчанию в браузерах равно 150%. Угадаете сколько в XD? Странным образом, 133%. И изменить это свойство никак нельзя.

<i>Несмотря на интерльяж 150px — line-height по факту 133%</i>
Несмотря на интерльяж 150px — line-height по факту 133%

Делаю я шапку сайта. А потом битый час пытаюсь понять, как это у меня высота не сходится с макетом, или какой-то блок выглядит не столь привлекательно, как планировалось. Потом замерил высоты и оказалось, что просто весь текст в макете немного меньше по высоте, чем текст в браузере.

Решается проблема установкой line-height 133% для тега html, и 150% для тегов p, h1-h6. Если что, можно и вручную скорректировать. Но непонятно, почему так коряво сделано...

Еще у тени можно задать размытие blur-radius (буква Р в интерфейсе). Но про радиус распространения spread-radius почему-то забыли. Не говоря уже о возможности добавить вторую тень 😅. Хотя двойные и тройные тени позволяют сделать эффекты реалистичнее — даже в Google Material Design тени тройные.

<i>Тени курильщика</i>
Тени курильщика

А вот в Figma с этим проблем нет, свойства теней корректные, и можно добавить несколько теней.

<i>Тени здорового человека</i>
Тени здорового человека

И возвращаясь к теме Figma — кайфанул, что там все свойства элементов в программе соответствуют CSS свойствам при верстке. И line-height можно задать не просто пикселями, а процентами 🤤!

<i>XD нервно курит, однако</i>
XD нервно курит, однако

Но у Figma минус, на мой взгляд — что файлы сохраняются онлайн. При желании компания ведь может закрыть бесплатный доступ к ним, или ограничить максимальное количество на бесплатном тарифе.

Тем более что Figma нынче купили те самые Adobe, и что делать будут — непонятно. Поэтому как-то спокойнее, когда все файлы на устройстве — пока «терплю» эти недостатки и пользуюсь XD.

Пробовал еще подизайнить в inVision Studio, и даже понравилось. Но они сменили позиционирование и теперь это онлайн-доска, с кучей разных плюшек, но дизайн сайтов, я так понимаю, они сильно урезали, а десктоп-приложение убрали (по крайней мере на сайте я его не смог найти).

А вы что думаете по этому поводу и какими программами для веб-дизайна сами пользуетесь?

Если статья была полезной - буду благодарен за подписку на 👉 ТГ канал DIGITAL СФЕРА, где пишу про опыт работы с разными направлениями в сфере Digital — маркетинг, SEO, SMM, разработка сайтов, аналитика и другие. Больше полезных статей на сайте.

44
4 комментария

Адоб действительно кривульку сделали. Тот случай когда размер конторы и бюрократия забили на удобства.

Ответить

Ну да( Или возможно было в планах покупать Фигму рано или поздно, тогда смысл дорабатывать свою программу. Другой вопрос, конечно, почему сразу такие банальные вещи нормально не сделать)

Ответить