Верстка в Figma, Photoshop и Taptop: как делать все в три раза быстрее

Зачем использовать Фотошоп, когда верстка в Figma сокращает время работы над макетом в несколько раз? А если добавить в набор инструментов Taptop, то процесс работы над проектом пойдет еще быстрее!

Вообразите себе реальный кейс: у вас заказ на создание карточек товаров для крупного маркетплейса электроники. Нужно изменить дизайн и внести небольшие правки на сайте.  Работа, в основном, рутинная. В Photoshop вы потратите несколько дней только на то, чтобы выровнять цены на разных разрешениях. В Figma и Taptop на это уйдет примерно 4 часа.

В чем секрет? Все просто: это интерфейсы и возможности, «заточенные» специально под верстку. В статье расскажем, как использовать верстку в Фигме в связке с Taptop таким образом, чтобы макеты практически самостоятельно превращались в рабочий код и почему это выгодней, чем «танцы с бубном» в старых редакторах.

Почему Figma – «родной дом» для верстальщиков?

Фигму любят не только разработчики, но и маркетологи, а также те, кто создает векторную графику. Возможности сервиса позволяют быстро создавать презентации и выгружать их в PDF, рисовать иконки, баннеры и другие элементы графического дизайна, а также создавать интерактивные прототипы сайтов и приложений. Приведем примеры из реальной практики, которые докажут, что функционал Figma для верстки сайта – идеальное решение.

Автолейауты: когда отступы и адаптивность работают на вас

Для сайта доставки еды было нужно оформить меню с блюдами, где названия и стоимость выровнены по разным краям. В Photoshop, который до сих пор любят многие дизайнеры – это 15 слоев, ручное выравнивание, боль и слезы при изменении текста. В Figma все проще:

• Создаем текстовый блок
• Включаем Auto-Layout и распределяем элементы по оси Х, установив нужное расстояние между ними
• Добавляем свойство CSS padding 24px.

При изменении названия в позиции меню с «Суп» на «Томатный суп с базиликом» все элементы автоматически адаптируются под новые параметры.

Автолейауты есть и в Taptop: настроил один раз – и забыл про сложности с адаптацией. В старом добром Фотошоп придется возиться с выставлением отступов вручную. А если речь идет не об одном экране, сколько времени вы потратите на такую работу?

Компоненты и Variants. Используем элементы дизайна повторно без кошмара

Для сайта банка нужно создать 10 кнопок с разным дизайном (основные, второстепенные, недоступные для взаимодействия до выполнения определенных условий).  Естественно, все они должны быть выдержаны в едином стиле. В Photoshop – это 10 отдельных файлов, над каждым из которых нужно попотеть. Как дела с версткой дизайна в Figma?

• Создаем мастер–компонент кнопки
• Добавляем Variants для разных состояний (hover, active, disabled)
• Настраиваем свойства текста и цвета через Design Token

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

В визуальном редакторе кода Taptop тоже есть аналогичные возможности: можно создавать собственные наборы компонентов или работать с теми, которые есть в Библиотеке шаблонов. Настройка такая же простая, как и в Figma: тут тоже имеются автолейауты.

Constraints. Как избежать «поломанной» адаптивности

Необходимо сделать так, чтобы сайт одинаково корректно отображался на устройствах с разной диагональю дисплеев. При этом нужно растягивать баннер по ширине экрана, а логотип – оставить слева. В Photoshop для этого нужно привязать компоненты к сетке и вручную рассчитать все проценты. Однако и это не гарантирует успеха: при смене разрешения, лого, скорее всего, «уплывет» в никуда.

 Constraints в Figma позволяют зафиксировать любой элемент дизайна в определенной точке прототипа: при изменении параметров экрана он никуда не денется. Таким образом, здесь достаточно:

• Выставить Left и Top Constraints для логотипа
• Для фонового блока выставить Scale по горизонтали

В Taptop есть аналогичные возможности, а при верстке макета он автоматически адаптируется под разные экраны.

Дизайнеры, разработчики и верстальщики часто не замечают, сколько времени они тратят на рутинные задачи и правки. Между тем, именно они съедают большую часть рабочего времени. Используя инструменты с продвинутым функционалом, который разработан специально для верстки, можно зарабатывать в несколько раз больше: автоматизировав рутинные процессы, вы гораздо быстрей завершите работу над проектом, чтобы приступить к следующему.

Taptop и Figma для верстки: почему они – идеальные партнеры

Если вы – консерватор, то изучение новых рабочих инструментов вызывает у вас приступ паники: нужно разбираться в интерфейсе, изучать гайды, экспериментировать с функционалом. Все это усугубляется отсутствием нормального русскоязычного интерфейса и отсутствием обучающих материалов на русском языке.

Однако Taptop способен изменить ваши привычные представления о прототипировании и верстке: это не только полностью отечественный продукт с подробной Базой знаний и множеством туториалов, но и интуитивно понятный интерфейс, схожий с Figma.

Один язык – два инструмента

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

Если в Photoshop вам вручную придется считать каждый пиксель, то при верстке сайта с Фигмы в Taptop достаточно посмотреть значения padding и gap, чтобы настроить автолейауты в Визуальном редакторе кода.

Возможности Taptop позволяют создавать макеты с нуля, минуя этап прототипирования в Figma. Если вы никогда не работали с платформой, то привыкнуть будет несложно: у инструментов – много общего. Совпадают даже некоторые горячие клавиши!

Экспорт кода без боли

У Figma есть дополнительные плагины, позволяющие генерировать готовую разметку: например, Figma to HTML. Здесь можно скопировать и CSS–свойства любого элемента, открыв панель Code.

В Taptop код изначально принадлежит создателю проекта, то есть вам. Добавить кастомные отрезки или полностью экспортировать его можно уже на тарифе Basic. Кроме того, Визуальный редактор генерирует «чистый код», работать с которым – одно удовольствие.

Режим для разработчиков

В октябре 2023 года возможности разработчиков, работающих в Figma, значительно расширились: появился режим Dev Mode. Активировав его, можно оставлять комментарии для верстальщиков прямо в макете, видеть расстояния между отдельными объектами в формате CSS-правил, экспортировать SVG, иконки, цвета в формате переменных. Правда, на бесплатном тарифе Starter эти функции до сих пор недоступны, а возможность с ними работать зависит еще и от того, кому принадлежит проект.

В Taptop возможности разработчиков практически безграничны: помимо экспорта кода для работы с ним вне платформы, можно вставлять кастомный код, написанный пользователем, в любой части страницы, и настраивать его работу как на всех страницах проекта, так и в указанных юзером местах. У творческого процесса тоже нет никаких ограничений: дизайнер может менять абсолютно все CSS–свойства любых элементов.

В каких случаях альтернативы Figma и Taptop оправданы?

Конечно, только Фигмой и Визуальным редактором кода инструментарий разработчика не ограничивается. Нужно уметь работать с разными платформами и приложениями. Какие существуют альтернативы для прототипирования и когда их применение оправдано?

Adobe XD

Если вы – фанат экосистемы Adobe или столкнулись с клиентом, который категорично заявил «только Adobe», можно работать в XD. Он интегрируется с Photoshop и Illustrator, и предоставляет широкие возможности для работы с анимацией.

Однако тут очень слабые возможности для командной работы, и по сравнению с Figma и Taptop верстка адаптивных элементов – настоящее мучение. Так же отсутствуют и автолейауты, поэтому все придется настраивать вручную.

Sketch

Любители «яблочных интерфейсов» очень любят создавать макеты в Sketch. Сервис действительно демонстрирует высокую производительность на Mac OS, а большое количество плагинов для экспорта кода позволяют работать над проектом и вне платформы.

Главный минус Sketch – «кривая» реализация функции, отдаленно напоминающей  Auto–Layout, поэтому повозиться с настройкой отдельных элементов определенно придется. Однако если перед вами стоит задача реализовать маленький проект без адаптива, макет можно «собрать» и здесь.

Webflow

Казалось бы, вот оно – идеальное решение, объединившее в себе дизайн и верстку, но это не совсем так. Функционал и интерфейс придется изучать долго, да и возможности на бесплатном тарифе сильно ограничены. Если захотите купить подписку – понадобится карта зарубежного банка или помощь посредников, которые не всегда бывают честными.

Taptop значительно упрощает задачу для тех дизайнеров, кто работает без верстальщика: интуитивно понятный интерфейс на русском языке позволяет быстро разобраться с возможностями прототипирования и верстки, которые практически не уступают Webflow. Сервис отечественный, а тарифы на использование всех функций – очень лояльные.

Figma – не просто инструмент для создания красивой картинки, которая в будущем превратится в готовый сайт. Используя Auto-Layout, Components и Constraints, вы создаете рабочий прототип, который превращается в код с минимальными усилиями. Зачем пользоваться «мостиком» между прототипированием и версткой в виде Фигмы, когда есть возможность работать в экосистеме одной платформы? Если вы дорожите своим рабочим временем и хотите наслаждаться творческим процессом, не тратя драгоценные часы на перенос макета в редактор для верстки, выбирайте Taptop. Уверены, время работы с правками из серии «Сдвиньте кнопку на 2 пикселя влево» сократится в разы, а ваша работа будет приносить только удовольствие!