Урок 4. Работа с графикой

Собрать красивый макет письма и передать его в вёрстку — задача дизайнера. 

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

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

В Фигме могут работать как дизайнеры, так и маркетологи или разработчики. Здесь можно отрисовать элементы письма, создать главный баннер, иллюстрации, векторную графику. Для разработчиков есть даже режим Developer Handoff , с помощью которого можно скопировать CSS-стили элементов, их код для Android и iOS.

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

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

Приложение, регистрация и тарифы

С Фигмой можно работать прямо из браузера или с помощью десктопного приложения, которое устанавливается на компьютер. Чтобы скачать его, перейдите по ссылке и выберите версию для iOS или Windows. И да, это бесплатно. 

Дополнительно скачайте приложение Figma Mirror [Android /iOS]. Оно поможет оценить, как дизайн будет выглядеть на мобильном устройстве. Это тоже бесплатно. 

Зарегистрироваться в Figma легко: нужно лишь нажать на чёрную кнопку «Sign up». Самый простой способ регистрации — через Google-аккаунт:

Но если у вас нет Google-аккаунта, можно и через другую почту. Кстати, это тоже бесплатно. 

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

• одновременно работать с одним макетом могут не более двух пользователей;
• одна команда может работать максимум с тремя проектами;
• история действий с файлами и проектами хранится 30 дней. 

Тарифы для профессионалов и организаций платные:

Вопрос оплаты не должен вас беспокоить до тех пор, пока вы не работаете в команде — тогда уже можно приобретать соответствующий тариф. 

Начало работы

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

Левое меню — это и есть менеджер файлов. Вкладка Recents показывает все недавние файлы, а вкладка Drafts — все недавние проекты, с которыми вы работали. Ниже видны проекты и команды: там же можно создать новые, нажав на «+».

Как только вы создадите команду, по умолчанию Фигма сделает для неё новый проект. Проект — это папка, которая хранит все файлы, относящиеся к одному проекту [клиенту, бренду и т. п.]. А если нет нужды создавать команды и вести проекты, можно приглашать других пользователей к совместной работе над файлом через голубую кнопку «Share».

Чтобы попасть в область графического редактора, жмите «New design file» или откройте любой файл из доступных:

Вот здесь‑то и происходит вся магия: дизайнеры превращают текст в макет письма, а верстальщики находят всё необходимое для вёрстки — тексты, иллюстрации, параметры объектов. 

В открытом файле пользователю доступны три области: рабочая область, панель инструментов и панель слоёв. 

Верхняя панель инструментов

Выглядит так:

Первая вкладка с логотипом Фигмы открывает меню с выпадающим списком. Нас здесь интересует поиск: он ищет пункты меню и пригодится, если нужна конкретная команда, но вы забыли, где она находится.

Справа от вкладки меню — инструменты. Первым по умолчанию стоит Move, который выбирает слои. С ним лучше осторожничать: можно сдвинуть элементы. А вот предпоследний инструмент с ладонью на иконке Hand tool позволяет перемещать просмотр над макетом, не сдвигая элементы. 

Последняя иконка среди инструментов — комментарии. Она пригодится, если над макетом будут работать несколько человек одновременно. 

Сервис позволяет как оставлять комментарии, так и отвечать на них. В правой панели будет доступен список всех комментариев:

В середине верхней панели инструментов выводится название файла, которое можно изменить прямо здесь:

В правой части панели инструментов расположились фото профиля, голубая кнопка «Share» [поделиться, англ.], кнопка просмотра и масштабирование. Чтобы приблизить или отдалить макет, можно также воспользоваться сочетанием быстрых клавиш Ctrl и +/-  [Cmd и +/- на Mac]. О других хоткеях мы подробно рассказали в этой статье.

Панель слоёв

В левой панели расположился перечень слоёв, страниц и графических элементов:

В меню этой панели есть Layers [слои], Assets [вложения] и название файла с выпадающим меню, где можно увидеть Pages [страницы] и переключаться между страницами макета. 

Ниже расположены слои макета. Самые крупные слои [фреймы] выделены жирным и решёткой [#]. Раскройте их и увидите, что у каждого слоя есть своя иконка, обозначающая его содержание:

Буквой T выделены текстовые слои, рисунком — растровая графика, а компоненты из Assets подсвечиваются фиолетовым. Слой с векторной графикой покажется в виде своей формы или кривой, скрытые же слои становятся серыми и обозначаются иконкой с закрытым глазом. 

Чтобы увидеть информацию о слое и его содержимом, нужно просто выделить слой. Все данные выводятся в правой панели инструментов:

Правая панель инструментов

В правой панели инструментов есть три вкладки: Design, [дизайн], Prototype [прототип] и Inspect [проверка]. Мы будем работать с первой и последней. Кстати, в разделе Code вкладки Inspect можно выбрать язык [по умолчанию это CSS]:

Рассмотрим подробней вкладку Design:

Ниже идут другие блоки: 

• Layer — прозрачность слоя;
• Text — текст;
• Fill — заливка цветом;
• Stroke — обводки;
• Effects — тени и размытие.

Если данных нет, эти блоки не будут показываться. Или их названия будут отображаться блёклым серым цветом, если блоки не активны.

Последняя вкладка Export позволяет выгрузить любой слой в формате PNG, SVG, JPG или PDF или посмотреть превью. 

Экспорт 

Чтобы скачать изображение из Фигмы, его нужно найти в слоях и выбрать. После этого разворачиваем блок Export, выбираем, в каком размере и формате будем выгружать картинку, и нажимаем на кнопку ниже:

Изображения с большим количеством цветов [например, фотографии] лучше сохранять в JPEG. Только помните о том, что алгоритм компрессии JPEG сжимает картинки, теряя качество. А вот иконки, схемы, инфографику и изображения с прозрачностью лучше сохранять в PNG. 

Retina

Дисплеи Retina отличаются повышенной плотностью пикселей. Что для обычного дисплея — ок, для ретины — беда. Так, если мы откроем на ретина‑дисплее не адаптированную под него картинку, мы увидим пикселизацию и то, как картинка «мылится».

Однако эту проблему можно легко решить: сохранить две картинки — с обычной плотностью пикселей и с повышенной плотностью для Retina. В Фигме это просто: нужно экспортировать изображение в x2. Такая картинка будет идеально смотреться на Retina-дисплеях.

Данные о тексте

Шрифт, начертание, его размер и другие свойства текста находятся в одноимённой вкладке Text. Чтобы увидеть все параметры, достаточно кликнуть на текстовый слой. Цвет текста выведен чуть ниже во вкладке Fill.

Какие данные о тексте из Фигмы пригодятся верстальщику:

— шрифт, семейство и тип [с засечками или без];

— размер;

— насыщенность [начертание];

— цвет;

— прозрачность, градиент, эффекты;

— выравнивание;

— высоту строки;

— межбуквенный интервал.

Всё это можно скопировать прямо в CSS во вкладке Inspect:

Roboto; лучше [и правильнее] написать так: font-family: «Roboto», «Arial», sans-serif;. Подробнее об этом поговорим в следующем уроке. 

Сам текст можно копировать из слоя или просто из рабочей панели. Для этого нажмите на текстовый слой в панели Layouts правой кнопкой мыши и в открывшемся меню найдите пункт Copy:

Данные о размерах и расстояниях 

Значения свойств высоты [height] и ширины [width] можно увидеть во вкладке Inspect. Второй вариант — выделить нужный блок, и размер появится внизу элемента:

Чтобы увидеть расстояние между объектами, выделите первый элемент, а затем наведите курсор на другой элемент:

Данные о цветах и эффектах

Во вкладке Inspect Фигма по умолчанию показывает цвета в HEX-формате, например: #808080. Но у цвета есть ещё одна характеристика — это прозрачность. В таком случае прозрачность определяется так: color: #80880; opacity: 50%;. Это тот же серый цвет с прозрачностью 50%.

Если дизайнер применил все доступные эффекты к элементу [градиент, тень, размытие, скругление], в CSS Фигмы вы увидите что‑то вроде этого:

.button {

background: linear-gradient(90deg, #FF1100 0%, #FF8A00 100%);   

box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);

filter: blur(4px);

border-radius: 10px;

}

Здесь linear-gradient — это градиент, box-shadow — тень контейнера, filter — размытие, а border-radius — скругление. 

Итак, работу с основными инструментами и интерфейсом Фигмы мы разобрали. Как видите, освоить этот инструмент несложно — пары видеоуроков на YouTube вполне хватит. 

Теперь, когда вы умеете экспортировать изображения, погнали писать код для вставки этих изображений [и не только]!

Квиз

​​1. Что расположено в левой панели инструментов Фигмы?

— Кнопка просмотра и масштабирование

— Перечень слоёв, страниц и графических элементов

— Инструменты для векторной графики

— Менеджер файлов

2. Инструмент Фигмы в виде ладони позволяет…

— Выбирать слои

— Перемещать просмотр над макетом, не сдвигая элементы

— Оставлять и отвечать на комментарии

— Масштабировать макет

3. В каком размере необходимо экспортировать изображения из Фигмы для Retina?

— х1

— х2

— х3

— х5

4. Какие данные о тексте верстальщик может забрать из Фигмы?

— Насыщенность

— Шрифт

— Количество символов

— Тип

— Выравнивание

5. Что определяет свойство opacity?

— Градиент

— Прозрачность

— Размытие

— Тень

Домашнее задание

Теперь вы знаете, как работать с Фигмой. Давайте тренироваться: мы пофантазировали и придумали экобренд Green, для которого будем верстать наше первое письмо. 

Действуйте так:

1. Создайте на рабочем столе своего компьютера новую папку. Перенесите в неё файл с HTML-кодом из предыдущего домашнего задания. 
2. Зарегистрируйтесь в Figma, если ещё нет.
3. Откройте ссылку и скопируйте макет письма в свою учётную запись.
4. Экспортируйте элементы письма в x2 в созданную папку. 
5. Сделайте скриншот папки со всеми сохранёнными элементами. 
6. Прикрепите скриншот в комментарии к заданию.