Инструмент Figma

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

Легкий старт

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

Легкий старт

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

Вход в программу

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

Адаптация с фигма

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

Работа с макетами

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

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

Панель управления Figma

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

Ну а если вы ищете уроки по работе в качестве дизайнера по Figma, то вот неплохой канал видеоуроков — https://www.youtube.com/channel/UCA_gpio7fvwvMSzHedEgO1w

а так же 2 канала в телеграм по обучению:

https://t.me/figma_designer
https://t.me/designsystemfigma

и есть чат, где можно задать вопросы: @figma_designer_chat

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

Увеличение масштаба

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

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

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

Наведение курсора на блок

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

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

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

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

Оптимизация картинок в Figma

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

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

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

Хранение файлов в облаке

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

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

Командная работа в Figma

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

Название команды

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

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

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

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

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

Тарифы сервиса Figma

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

telegram
Подписаться на наш Telegram