Бросаем Photoshop и переходим на волшебный Figma: наше руководство к действию

Рынок UI-инструментов неустанно развивается – Adobe  Photoshop постепенно вытеснили программные решения от Sketch, Zeplin и InVision, а сейчас дизайнеры массово выбирают для работы лидера этого направления – Figma.

Легкий старт

Figma – лучшее из мира дизайн-инструментов для удобного пользовательского интерфейса, его удобно использовать на первом этапе создания сайта: разработка дизайна.  Этот программный продукт доступен в браузере и открывается с разных платформ. Установочные пакеты и всяческие приложения тоже не требуются – просто заходите на figma.com, регистрируйтесь, если вы впервые, или заходи под своим аккаунтом, если уже работали и начинайте работать:

Еще можете войти в программу через свой аккаунт в Google, сделав пару простых шагов:

Несложная адаптация с Figma

После регистрации у вас откроется страница для работы с макетами. Она выглядит так:

Визуально страницу можно разделить на 3 части – две боковые и центральную. Слева расположены слои, в центре – макеты, справа – стили. А далее читайте наше руководство по верстке figma.

Подпишитесь на авторский телеграм-канал про предпринимательство в России.

Сверху страницы увидите панель управления:

Здесь сделайте необходимые настройки, чтобы работать удобнее – увеличивайте или уменьшайте масштаб, добавляйте сетку для лучшей верстки и делайте массу всего другого.

Как увеличите масштаб, выбираете любой необходимый элемент, например – верхнюю навигационную  полоску над логотипом, выделенную синим в центральной части:

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

Справа по умолчанию – стили в CSS. Здесь переключитесь в режим кода – смотрите на курсор в скриншоте выше. Так у вас откроется блок со стилями, с которым будете работать.

При наведении курсора на определенный блок, иконку или текст – вам показываются размеры выбранного элемента, расстояния до ближайших блоков и прочее:

Понятная работа с картинками

Для этой работы у вас есть блок EXPORT, расположенный в правой части: Нажмите на плюс – блок откроется полностью. В нем выберите нужные параметры, предпочтительный формат для экспорта картинки, необходимость увеличения для iOS-устройств. И в конце нажимаете Export image – программа предложит сохранить картинку, сделайте это.

Не выгружайте картинку в svg-формате, так как это просто кодировка и управлять ей потом через стили невозможно. Поэтому все иконки и стрелки, если прозрачный бэкграунд – выгружайте в png-формате. Остальные картинки в слайдере и в блоках продуктов – для экономии места выгружайте в jpg-формате.

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

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

Грамотная организация в Figma

Все рабочие файлы хранятся на облаке, организованном в виде дерева – команда / проект / файл. Поэтому конфликты копий исключены, а все новые файлы, вдруг сохраненные некорректно, автоматически попадают в папку Drafts:

В Figma все приспособлено для командной работы

Выберите функцию New team – так создадите новую команду для совместной работы. Кликните здесь:

Придумайте название своей команде, пригласите коллег и приступайте к общему проекту вместе:

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

У Figma уйма полезных опций, которые интуитивно понятны

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

В этом программном продукте есть живой чат – доброжелательные ребята с особым вниманием относятся к любому вопросу пользователей и отвечают в среднем в течение 2-х часов.

И еще одна солнечная новость – для отдельных юзеров этот сервис бесплатный. Для командной работы предусмотрены тарифы:

Уже миллионы пользователей безболезненно перешли на Figma и перед ними вырисовалась четкая картина – что происходит с дизайном в компании, на какой стадии каждый проект, какое задание выполняется в режиме реального времени. Работа с Figma станет продуманнее, не будет отнимать уйму времени на обсуждение и согласование этапов работы с коллегами. Попробуйте этот программный продукт и почувствуйте, как ваша работа становится приятнее и продуктивнее!