Создание дизайна сайта в Figma: делимся секретами

Фигма: зачем он нужен?

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

Создание проектов: какие допускаются?

Фигма позволяет отрисовать части интерфейса, разработать интерактивный вариант веб-ресурса и приложения, графику в векторном выражении и картинки. А вот и сами проекты:

1. Прототип. Так в среде дизайнеров и разработчиков называют модель приложения либо сайта. Он позволяет заказчику дать оценку тому, как предпочитают использовать люди его продукт. Для создания прототипа любого веб-ресурса дизайнер занимается отрисовкой экранов и созданием прочных между ними связей. Фигма позволяет мгновенно продемонстрировать, как именно дизайн покажется заказчику на экране планшета, смартфона и остальных устройств.
2. Интерфейс. Его элементы – это «внешность» любого продукта. Фигма позволяет дизайнерам разработать иконки, варианты для обратной связи с клиентом, кнопки. А ещё это надёжный товарищ в настройке эффектов:придании кнопкам кликабельности;
   раскрытии списков;
   создании анимации.
   
3. Графика векторного вида. В Фигме предлагается немало инструментов, полезных для создания векторных объектов. Допускается перевод дизайна в SVG-формат, импорт объектов из Sketch-редактора, а также из иллюстратора Adobe.

Фигма для других

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

• диаграмма Гранта. Отвечает за ведение проекта;
• шаблоны Facebook. Оказывают существенную поддержку в создании объявлений рекламного характера;
• Developer Handoff. Это для разработчиков.

О совместной деятельности в Фигме

Этот онлайн-редактор позволяет над дизайном сайта трудиться не одному человеку, а всей команде. Такая возможность – главное её достоинство, если сравнивать с остальными редакторами подобного типа. С Фигмой разработчик не пропускает ни одного изменения в макете, менеджер в режиме онлайн наблюдает за тем, что творится с проектом, а заказчик может комментировать дизайнерские дела непосредственно в Фигме.

Почему этот онлайн-редактор стоит выбирать, чтобы работать совместно? Вот основные причины:

• присутствие кроссплатформенности. С Фигмой работать можно прямо из Гугла, Яндекса, Мозиллы или другого браузера. «Операционка» и устройство не имеют значения. Никаких приложений качать не надо в дополнение для того, чтобы вариант дизайна согласовать;
• сервис облачного характера. Учитывая то, что Фигма относится к категории онлайн-редакторов, то все итоги деятельности остаются в облаке и с ними могут ознакомиться все представители коллектива. Когда угодно они могут увидеть изменения, внесённые кем-то из коллег, а также при необходимости «поднять» резервную копию;
• наличие обратной связи. Допускается оставление комментариев к макету и получение от коллег фидбека. Так быстрее происходят согласование. Если нужно поднять историю переписки, то проблем не возникнет.

Старт работы в онлайн-редакторе

Здесь надо рассмотреть несколько вопросов:

• как устанавливается Фигма. Есть два варианта: работа из браузера или скачивание приложения на ноутбук либо комп. Если нередко приходится использовать разные устройства, то лучше взять браузер. Для этого достаточно посетить официальный сайт и на нём зарегистрироваться. Есть возможность бесплатного скачивания. Тогда на сайте надо выбрать программную версию для:Windows;
  iOS.
  

Но сегодня множество людей предпочитают выходить в Интернет со смартфонов. А чтобы можно было посмотреть, как на смартфоне смотрится дизайн сайта, надо воспользоваться специальной программой для Figma – Mirror. Её устанавливают на iOS либо на Android;

• интерфейс. По окончании регистрации специалист может работать в двух сферах — графическом редакторе и файловом менеджере. Вот какое меню предлагает вторая сфера:профиль. В его настройках допускаются загрузка аватарки, смена имени, электронного адреса для оповещений, пароля. В этом же пункте меню есть возможность обновления тарифа и удаления аккаунта;
  поиск. Через него можно искать файлы, а также те проекты, в которых задействован пользователь. Можно файлы переименовывать, чтобы потом не возникало сложностей с их поиском;
  последние файлы. В Фигме сохранение файлов осуществляется в автоматическом режиме. Все те из них, которые открывал когда-либо пользователь, находятся в разделе Recent. Figma позволяет просмотреть историю корректировки всех файлов. Так что если что-то случится, то резервная копия без проблем должна восстановиться;
  плагины. Пункт отмечен как Plugins. В нём находятся расширения, поддерживающие ускорение работы. Допустим, Unsplash помогает в поиске стоковых картинок, не выходя из Фигмы. А плагин Iconify предлагает на выбор сорок тысяч иконок на любой вкус и надобность. Все плагины сортируются по таким направлениям, как установленные, известные и те. которые советуют чаще других. Чтобы их всех увидеть, надо кликнуть на Browse all plugin;
  новый файл. Он создаётся с помощью пункта New File либо Drafts, находящегося справа в углу. Если брать по умолчанию, то его название — Untitled;
  коллектив. Для работы над совместным проектом необходимо сформировать штат единомышленников. Нужно нажать на New Tome и придумать своей команде название. Приглашение к участию допускается, в том числе, и по электронной почте. Участники получают свои роли — будут ли они лишь просматривать файлы или же смогут их редактировать. Если тариф бесплатный, то право редактирования может быть у двух пользователей;
  проекты. Если команда добавляется по умолчанию, то Фигма сама готовит для неё проект. Он представлен в виде папки, где находятся файлы, относящиеся к одному проекту. Такой подход удобен тогда, когда один проект насчитывает множество файлов, и в них легко запутаться. Бесплатный тариф не позволяет создать болеет трёх проектов. Для создания дополнительного проекта в команде, надо кликнуть на New Projects. Внутри его надо образовывать новые файлы либо уже имеющиеся перетащить. Однако фрилансерам, которые команды обычно не создают и проектами не занимаются, можно приглашать других пользователей для работы с файлом с помощью кнопочки Share.
  

«Фигменный» редактор файлов

Новый файл «дарит» пользователю возможность работать с тремя сегментами (областями):

• рабочей панелью;
• панелью с инструментами;
• панелью слоёв.

Итак, вот какие функции меню предлагаются:

• поиск. Он не занимается поиском созданных пользователем элементов. Его задача — искать «менюшные» пункты. Вещь нужная, если забыли, где расположена необходимая команда;
• File. Инструменты, находящиеся в этой панели, позволяют начать действие к тому файлу, в котором ведётся работа. Создали в Скетче фалы — их можно импортировать. Фигма как инструмент предполагает совместные действия. Изменения, произошедшие в файле, сохраняются «на автомате». Можно выполнить немедленное сохранение с помощью Save to Version History. Либо посмотреть, как у коллег происходили изменения, с помощью клика на Show Version History. Если вдруг надо файл в «пэдээфке» сохранить — Export Frames to PDF;
• Edit. Эта панель даёт возможность работать с дизайнерскими элементами в самом файле. Для применения действия к одному из элементов, его необходимо выделить. К примеру, допускается копирование объекта как кода SVG, CSS. Как вариант – файл в формате PNG. Благодаря функции Paste Selection элемент, который был скопирован, располагается в другом объекте в левом углу сверху;
• Данная панель расположена в редакторском меню с левой стороны, а с правой она повторяется. Её цель – масштабировать проект и не допускать сбоев в навигационной работе. В панели из нужного моно выделить функцию под названием Pixel Preview. Учитывая то, что Figma является редактором векторного характера, то дизайнер и видит только такие линии. Если подключить возможность просмотра в пикселях, то можно посмотреть, в каком виде на экранах предстанет элемент. Масштабирование макета доступно лишь через элемент Zoom;
• Панель с таким названием ориентирована на навигацию непосредственно в файле. Пункты Geometry, Objects и Pixel Grid являются настройками привязанности. Лёгкое примагничивание элемента и непопадание в «кривую» сети – то, на что они способны, если пользователь будет всё быстро делать. Такую функцию, как Highlight Hover не надо выключать, она обеспечивает подсветку мелких элементов дизайна во время наведения. Речь о значках, иконках.

Figma и инструментарий

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

• фреймы. Их ещё артбордами дизайнеры прозвали. Их всех дизайнерских элементов в Figma этот считается основным. Он представляет собой завершенный документ. Это, к примеру, страница веб-ресурса, экран приложения для мобильника, что позволяет удобно отрисовать мобильную версию сайта. Разработчик может указать размер сам либо выбрать из готовых вариантов экранов планшета, часов, ноутбука. Чтобы это сделать, надо зайти вправо в панели с инструментами. Фрейм занимается объединением внутренних объектов. Если внутри него создавать дизайн, то с левой стороны в панели свойств станут появляться слои. Они в Figma показывают содержимое фрейма. Тут фотки, тексты, объекты. Можно отдельные объекты сгруппировать в один фрейм. Или, наоборот, на части его разбить клавишами. Для выравнивая объектов, редактирования расстояния надо заглянуть в правую панель;
• модульная сеть. Такая сетка в Figma отвечает за то, чтобы все дизайнерские элементы, находящиеся во фрейме, были упорядочены. Рекоменжуется работать с сеткой Bootstrap колоночного типа. Она позволяет без проблем адаптировать дизайнерские наработки от устройства к устройству. Чтобы её настроить, надо в блоке Grid нажать на плюсик и следовать далее указаниям. Надо отметить, сколько колонок планируется создать, насколько они будут прозрачными и определиться с их цветом. Тип модульной сети тоже настраивается. Её можно выполнить адаптивной, сделать выравнивание по краю либо по центру. Если веб-ресурс на Тильде создаётся, то лучше взять двенадцать колонок и сделать сорокапиксельный отступ, а с боков экрана – сто пикселей. Есть дизайнеры, любящие работать с вертикальным ритмом для перемещения по сетке объектов и настройки расстояния от одного элемента до другого. Чтобы это выполнить, надо на плюсик кликнуть в Layout Grid, и тогда можно приступать к работе с дополнительной модульной сеткой с десятипиксельным шагом;
• формы векторного характера. Чтобы их создавать, Figma предлагает такой инструмент, как Shape Tool. Он позволяет проводить отрисовку деталей интерфейса. Главными векторными объектами являются звёздочка, круг, стрелка, прямоугольник и другие геометрические фигуры. Объекты, имеющие произвольный вид, тоже можно вставлять. Нажатие Alt позволит им из центральной части растянуться.

Как Figma с объектами работает?

С правой стороны расположена панель со свойствами. К основным функциям взаимодействия с объектами можно отнести:

• кривые линии. Их можно рисовать с помощью Pen Tool. Также допускается рисование несложных в исполнении форм векторного типа, графики и иконок. Если нужны сложные формы, то загрузку таких лучше желать из Sketch либо из Adobe Illustrator. Надо что-то скруглить? Тут поможет Bend Tool. Заливают контуры закрытого типа Paint Bucket;
• картинки. В макет можно добавлять при необходимости как один рисунок, так и несколько. Есть рабочий стол, с него иногда перетягивают. Но не брезгуют для этой цели работой с инструментом Place. Вставка фотографии в Figma не идёт отдельным объектом, а осуществляется наподобие share. То есть прямоугольной формы фрейм заливается рисунком. Так что есть возможность вместо заполнения фрейма воспользоваться Tile, Crop, Fit, Fill и другими параметрами. С Till рисунок во фрейме будет полностью показываться. Если включить Crop, то необходимый ракурс будет приближен, а всё, что лишнее, надо отрезать. Tile позволяет делать узоры или паттерны. Ещё в Figma можно экспериментировать с яркостью определённых зон на изображении, а также их насыщенностью, контрастом. Чтобы добавить рисунку такую вещь, как градиент, надо в панели со свойствами выбрать плюсик. Далее предстоит определиться с градиентным стилем – линейным, ромбовидным, угловым либо радиальным. Надо работать и с дополнительными цветовыми настройками, что позволит для достижения наилучшего эффекта поменять положение, в котором градиент расположен;
• маски с эффектами. Фигама даёт возможность заливать фреймы и слои текста. Чтобы ознакомиться с заливочными инструментами, надо зайти в панель свойств и там их найти. Доступны выбор цвета, прозрачности. Можно указать необходимые цветовые значения. Figma предлагает взаимодействие с шестью вариантами заливки — Solid (это сплошная заливка), Linear (градиент радиального характера), Angular (так называют угловой градиент). Ещё есть радиальный градиент с 4 лучами. Это Diamond. Там же — Image (это изображение). Сначала предлагается пользователю ровная заливка, так как она по умолчанию стоит. В один градиент разрешается добавка двух и более цветов. Чтобы это стало возможным, надо кликом побеспокоить расположенную над палитрой шкалу. Если цвет нужно удалить, то — Delete. Можно объектам добавлять заливки, имеющие разные градиенты. Фигуры сочетать тоже позволяется. Если нужно наложение для получения нестандартного результата, можно воспользоваться Laver;
• текст. Изначально пользователь может работать только со шрифтами от Гугл Фонтс. Если они не устраивают, и в Figma пользователь хочет загрузить другие варианты, то Фигму придётся скачивать для десктопов либо установить себе Font Installers для возможности делать их загрузку в браузер. Со слоем текста в работе применяются давно известные инструменты — красная строка, отступ от одного параграфа к другому, выравнивание, высота строк и другие. Можно заглянуть в Advanced Type, где предлагается три варианта по изменению размеров блока текста:Width. Тут ширина «подчиняется» контенту;
  Fixed. Задаётся блок с фиксированными данными по ширине;
  Height. Высота блока подстраивается под текст.
  

Для заглавия и текста лучше создавать отдельные блоки. За это редактор потом спасибо скажет — так ему работать значительно проще;

• компоненты. Эти штуки в Figma дают возможность применять правки не к одному конкретному элементу, а к целой их группе. Дизайнеру это в плюс – изменяя макет, он время своё экономит. Например, макет насчитывает пятьдесят страниц, а заказчику не нравятся кнопки и он хочет их цвет поменять. Если есть компоненты, то два-три клика мышкой — и новым выбранным цветом можно будет сразу все кнопочки охватить. Когда надо из объектов сделать компонент, их нужно выделить и кликнуть на Create. Поможет сочетание клавиш Ctrl, Alt и K.

Вывод

Этот онлайн-редактор позволяет над дизайном трудиться не одному человеку, а всей команде. Такая возможность – главное её достоинство, если сравнивать с остальными редакторами подобного типа. С Фигмой разработчик не пропускает ни одного изменения в макете, менеджер в режиме онлайн наблюдает за тем, что творится с проектом, а заказчик может комментировать дизайнерские дела непосредственно в Фигме.