На сегодняшний день наверное практически каждый веб-верстальщик начинает свою работу с открытия дизайн-макета в Figma.
Figma — популярный онлайн-редактор для проектирования интерфейсов, создания дизайн-макетов сайтов, мобильных приложений, презентации и т.п. В своё время пришёл на замену Photoshop в плане решения задач описанных выше, чем заметно упростил процесс разработки макетов и их использование.
Не буду скрывать, поводом для написания этой статьи стала новость о том, что Figma закрыла режим DevMode с 1 февраля, а точнее сделала доступ к нему платным. Если очень коротко, этот инструмент позволяет верстальщикам без проблем скопировать часть стилей и не писать их в ручную.
Дизайнеры и верстальщики быстро нашли разные способы решения этой проблемы и вот некоторые из них:
- Перейти на аналоги данного редактора такие как Pixso, Zeplin и др. Я лично пробовала Pixso из недостатков, которые сразу бросились в глаза при загрузке макетов из Figma у меня не определялись некоторые шрифты. Думаю это решаемо подгрузкой отсутствующих шрифтов.
- Делать свой дубликат проекта в Figma и использовать плагин Inspect styles, некоторые стили можно вытащить и просто скопировав их в режиме дизайнера в редактор кода, но Inspect styles поудобнее. Пока мы с дизайнером для себя выбрали именно этот вариант.
- Сделать себе и дизайнеру образовательный аккаунт, на сколько пишут в телеграм чатах, для образовательного аккаунта нет ограничения в доступе к DevMode. Лично не проверяла, нужен VPN со всеми вытекающими неудобствами.
- Оплатить DevMode. Ну такое себе решение на мой взгляд, учитывая что есть бесплатные варианты и что оплата у них в долларах.
Пожалуй хватит о Figma.
Следующим по значимости ПО для веб-верстальщика будет конечно же редактор кода, тут есть достаточно хороший выбор, но наиболее популярными считаются Visual Studio Code, Sublime Text, Atom и WebStorm. В начале своего пути как верстальщик я использовала Sublime Text, затем перешла на VS Code и пользуюсь им по сей день, в нём много нужных плагинов и он прекрасно подходит под мои задачи.
Система контроля версий Git, и сервисы для работы с ней GitHub, GitLab и т.п. Git позволяет отслеживать изменения в коде, а GitHub и ему подобные предоставляют возможность хранить репозитории онлайн и совместно работать над проектами.
Препроцессоры CSS. Sass или Less: Препроцессоры помогают писать CSS более эффективно, используя переменные, миксины и другие возможности. В своей работе я использую Sass (SCSS).
Scout-App — это кроссплатформенное настольное приложение, позволяет компилировать Sass-файлы в CSS без установки каких-то дополнительных утилит. Очень удобное, рекомендую.
Фреймворки CSS. Bootstrap, TailiwndCSS, Foundation и т.п. Фреймворки ускоряют процесс верстки, предоставляя готовые компоненты и сетки. Лично я отказалась от использования Bootstrap, в пользу технологий Flexbox CSS и Grid CSS. Тем не менее многие используют фреймворки и нельзя их не упомянуть.
Инспектор элементов DevTools в браузере. Инструмент разработчика в браузере помогает анализировать и отлаживать код прямо на странице.
WinSCP — популярный бесплатный клиент SFTP и FTP для Windows, файловый менеджер. Предлагает простой в использовании графический интерфейс для копирования файлов между локальным и удаленным компьютером.
Все эти инструменты помогают веб-верстальщику эффективно работать над проектами и ускорить процесс разработки.
Пишите в комментариях какие инструменты используете вы в своей работе, если как и я занимаетесь разработкой сайтов, возможно вы сможете дополнить этот список.