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

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

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

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

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

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

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

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

Тени курильщика

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

Тени здорового человека

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

XD нервно курит в сторонке, однако

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

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

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

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

———

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