Фронтенд. Полезные инструменты для верстальщика — UI/UX дизайнера. Графические редакторы
Хардкорный верстальщик выберет блокнот и не будет читать дальше.
zygar.ru
Прошли те далекие времена (3 года как вечность), когда верстка сайта с исходников .psd вызывала в уме только один триггер — Photoshop. Сейчас обилие редакторов кружит голову и даже отвлекает, возникает желание объединить их в один супер редактор, но конкуренция — двигатель прогресса и подталкивает крупные компании улучшать свои продукты плюс понижать цены, что несомненно есть гуд для нас пользователей.
Новые редакторы делают верстку приятной, комфортной и колоссально снижают уровень входа в профессию, но я бы не спешил паниковать по этому поводу насчет обвала зарплат, потому что приложения также становятся больше и сложней, а значит верстальщик получит больше возможностей и вскоре граница между ним и фронтенд-разработчиком вовсе исчезнет. Поживем увидим.
Итак, я подготовил актуальный список наиболее популярных графических редакторов для интерфейсов в 2021 году.
Interface design tool with real-time collaboration — графический редактор для проектирования и дизайна интерфейсов с возможностью совместной работы.
Содержание

Figma
Онлайн-сервис для разработки интерфейсов и прототипирования с возможностью организации совместной работы в режиме реального времени.
URL | figma.com |
---|---|
Коммерческий | да |
Тип сайта | онлайн-сервис |
Расположение сервера | США |
Владелец | Figma Inc. |
Автор | Дилон Филд |
Бесплатная версия | Да |
Начало работы | 2012 |
Сервис доступен по подписке, предусмотрен бесплатный тарифный план для двух пользователей. Тарифный план включает 3 проекта и неограниченное место в облаке. Ключевой особенностью Figma является её облачность. Возможность работать офлайн, есть офлайн-версии для различных платформ (Windows, macOS, Linux). Figma требует 64-разрядные системы, на 32-разрядных больше не работает.
Сервис имеет широкие возможности для интеграции с корпоративным мессенджером Slack и инструментом для высокоуровневого прототипирования Framer.
Figma подходит как для создания простых прототипов и дизайн-систем, так и сложных проектов (мобильные приложения, порталы, сложные и высоконагруженные интерфейсы). В 2018 году платформа стала одним из самых быстро развивающихся инструментов для разработчиков и дизайнеров. В 2020 компания привлекла 50 млн. долларов, достигнув оценки 2 млрд. долларов.
Sketch

Sketch — векторный графический редактор только для macOS, разработанный голландской компанией Bohemian Coding.
Фото: автор: Bohemian Coding — https://www.sketch.com/press/, Общественное достояние, https://commons.wikimedia.org/w/index.php?curid=46979007
Тип | Векторный графический редактор |
---|---|
Разработчик | Bohemian Coding |
Операционная система | macOS |
Первый выпуск | 7 сентября 2010 |
Читаемые форматы файлов | DrawIt и Sketch file format |
Создаваемые форматы файлов | Sketch file format |
Лицензия | Проприетарная |
Бесплатная версия | Да |
Сайт | sketch.com |
Используется для проектирования интерфейсов мобильных приложений и веб-сайтов. Поддерживает возможность создания интерактивных прототипов.
Впервые был выпущен 7 сентября 2010 года и получил награду Apple Design Awards в 2012 году.
Adobe Experience Design (Adobe XD)

Adobe XD является одним из самых используемых бесплатных инструментов для UI / UX дизайна, а также прототипирования в сфере мобильного дизайна.
Фото: автор Adobe Systems — https://www.adobe.com/products/xd.html, Общественное достояние, https://commons.wikimedia.org/w/index.php?curid=65689708
Тип | среда визуальной разработки графических интерфейсов |
---|---|
Разработчик | Adobe |
Операционная система | Windows 10 версия 1709 и OS X Yosemite |
Первый выпуск | 5 октября 2015 |
Бесплатная версия | Да |
Сайт | adobe.com/product… |
Отличный инструмент и дизайны стоит делать в нем. Фотошоп или иллюстратор использовать только для рисованной графики, всякие авторские иконки, текстуры, обработка фотографий. То для чего фотошоп и иллюстратор и предназначены. Дизайн макетов на них была вынужденная мера, так как не было других инструментов. Создан специально для создания макетов дизайна. Так же можно макеты экспортировать в svg формате, что позволит верстальщику открыть их в браузере и просматривать все стили и разметку через девтулс.
inVision Studio
InVision Studio — сравнительно новая программа для создания прототипов пользовательских интерфейсов и анимации с возможностью совместной работы нескольких человек. Вышла в 2018 году. InVision Studio это как Figma + Principle.
Тип | среда визуальной разработки графических интерфейсов |
---|---|
Разработчик | inVision |
Операционная система | Windows и OS |
Первый выпуск | 2018 |
Бесплатная версия | Да |
Сайт | invisionapp.com |
Демократичны в ценовой политике — $7 в месяц за про-версию. Бесплатная версия обладает широким набором функций.
Компания InVison разрабатывала Studio в качестве приложения, а не встроенного в браузер дизайнерского инструмента, подобного UXPin.
Доступны функции расширенной анимации, позволяющие дизайнерам оживлять свои статические рисунки без написания кода. Новый инструмент также обладает возможностью работы с отзывчивым дизайном, позволяя дизайнерам автоматически проверять свои конструкции на экранах разных размеров.
Поскольку дизайнеры работают совместно с такими компаниями, как Airbnb, Spotify и Twitter, Studio предложит общие системы проектирования, в которых в качестве инструментов доступны ассеты, шестнадцатеричные коды и другие компоненты дизайна. Studio позволит пользователям мгновенно загружать свой контент в InVision Cloud для совместной работы в организации и за ее пределами.
Framer

Инструмент для прототипирования и дизайна с широкими возможностями. Прототип создается в коде. Приложение использует фреймвок React JS.
Тип | среда визуальной разработки графических интерфейсов |
---|---|
Разработчик | Framer B.V. |
Операционная система | Web, macOS, iOS, Android Figma Importing Sketch Importing |
Первый выпуск | |
Бесплатная версия | Да |
Сайт | framer.com |
Это почти сайт билдер, намного больше чем инструмент для прототипов. Достоинство Фреймер в том, что можно создавать промо-ролики и анимацию будущего продукта, не нанимая мобильного разработчика, не делая демку, не прибегая к помощи анимации в After Effects.
Вместе с панелью слоев есть несколько режимов: добавление элементов, код-едитор, магазин компонентов и team-store.
Область работы представляет собой рендер React-компонентов, все что вы делаете сразу преобразуется в код. Это накладывает свои ограничения.
У Framer есть своё сообщество на Spectrum, где люди делятся идеями, отвечают на вопросы.
Fluent Design

Fluent Design — это система для создания адаптивных, отзывчивых и красивых пользовательских интерфейсов, разработанная в Microsoft.
Тип | среда визуальной разработки графических интерфейсов |
---|---|
Разработчик | Microsoft |
Операционная система | Web, Windows, macOS, iOS, Android |
Первый выпуск | 2017 |
Бесплатная версия | Да |
Сайт | microsoft.com/design/fluent |
Fluent Design придёт на смену Modern UI, который использовался в продуктах Microsoft начиная с ОС Windows Phone 7 и ранее в плеерах Zune. Microsoft будет постепенно переходить к использованию нового языка дизайна в Windows и в своих приложениях на операционных системах Windows, iOS, Android и Windows 10 Mobile. Первым среди продуктов Microsoft обновление дизайна получила игровая приставка Xbox One.
Новая дизайн-система базируется на пяти составляющих:
- Свет — помогает пользователю акцентировать внимание на текущем взаимодействии и ближайших к курсору элементах
- Глубина — учитывает расположение элементов в пространстве относительно друг друга
- Движение — является индикацией динамического взаимодействия пользователя с интерфейсом
- Материал — внешний вид элементов определяется не только палитрой, но и физическими свойствами материалов
- Масштаб — элементы интерфейса адаптируются в зависимости от текущего использования — будь то экран мобильного телефона или система виртуальной реальности.
Avocode

Сервис представляет собой программную среду для работы с макетами таких графических редакторов, как Photoshop, Sketch, Illustrator, Figma, Adobe hd.
Тип | среда визуальной разработки графических интерфейсов |
---|---|
Разработчик | Source |
Операционная система | Web,Windows, macOS, Linux |
Первый выпуск | |
Бесплатная версия | Нет, 30-дневный пробный период |
Сайт | avocode.com |
У программы нет бесплатной версии, однако проводились акции — первая подписка за $1.
Создавать сайт начинают с дизайна в Photoshop или Sketch. Но после завершения макета, разработчику нужно превращать его в спецификацию с отдельными изображениями и CSS-стилями. Именно Avocode призван выполнить роль моста между дизайнерами и разработчиками.
Avocode – это приложение, позволяющее вам работать с файлами .psd и .sketch, перейти от дизайна к коду, даже не открывая Photoshop или Sketch. Программа будет полезна для разработчиков мобильных приложений и верстальщикам. Верстальщики смогут копировать html код с исходников и вставлять прямо в верстку.
Zeplin

Инструмент для команды верстальщиков и дизайнеров. Вы можете экспортировать проекты в Zeplin из таких программ, как Sketch, Adobe Photohop, Adobe XD и Figma.
Тип | среда визуальной разработки графических интерфейсов |
---|---|
Разработчик | Zeplin / Турция |
Операционная система | Web, macOS, Windows |
Первый выпуск | 2015 |
Бесплатная версия | Да |
Сайт | zeplin.io |
Цеппелин, Фердинанд фон — немецкий граф, пионер дирижаблей жёсткой системы.
В связке со Sketch вы можете окончить версионную войну файлов и удобно поддерживать макеты в живом состоянии. Когда сложные экраны не перегружены колоссальным количеством слоев и групп слоев, дизайнеру можно легко и на лету вносить мелкие правки — верстальщик увидит их сразу.
Principle
Principle — понятный и быстрый инструмент UI/UX дизайнера. Must have в списке motion-дизайнера, так как позволяет легко создавать анимированные и интерактивные прототипы.
Тип | среда визуальной разработки графических интерфейсов |
---|---|
Разработчик | Principle |
Операционная система | macOS |
Первый выпуск | |
Бесплатная версия | нет, 14-дневный пробный период |
Сайт | principleformac.com |
Интеграция Figma и Principle открывает большие возможности по сборке не просто анимашек, а целых интерактивных систем приближенных к реальности.
Larae
14.02.2021 в 23:02Hmm it appears like your website ate my first comment (it was super
long) so I guess I’ll just sum it up what I submitted and say, I’m thoroughly enjoying your blog.
I as well am an aspiring blog blogger but I’m still new to the whole thing.
Do you have any points for rookie blog writers?
I’d certainly appreciate it.