Поговорим о том, какие навыки необходимы начинающему дизайнеру для успешной работы в digital-агентстве или на фрилансе.

Что такое FIGMA

Еще несколько лет назад у графических дизайнеров были популярны Adobe Illustrator и Adobe Photoshop. Уметь работать в этих инструментах — не лишнее для профессионального дизайнера, но для быстрого создания 80% иллюстраций сейчас достаточно онлайн-сервиса Figma.

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

Визуальный ряд — это набор всех статических и динамических иллюстраций по проекту, построенных согласно законам композиции и объединенных общей цветовой темой и единым стилем (например, в рамках брендбука компании):

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

Примеры работ в Figma:

У сервиса Figma есть ряд существенных преимуществ:

• возможность работы над одним проектом совместно с командой;
• автоматическое сохранение файлов в облаке Figma;
• откат до предыдущих версий макета (до 30 дней в бесплатной версии);
• интуитивно понятный интерфейс, вшитые подсказки;
• возможность вносить изменения сразу в весь макет. Например, поменять цвет кнопок или шрифт, когда проект уже на финишной прямой.

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

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

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

1. Таким образом, сначала создаются наименьшие неделимые элементы (атомы) — например, заголовки, иконки, чек-боксы.
2. Атомы в свою очередь входят в состав более сложных элементов (молекул) — это могут быть кнопки, поля ввода.
3. Объединив между собой молекулы, можно создать организм — это крупные части интерфейса: карточки товаров, навигация.

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

• Стили — это комплекс свойств, которые можно применять к объектам вашего дизайна. Это могут быть стили цветов, эффектов (тени, размытие), текста (шрифт, размер, интервалы), сеток (размер строк, столбцов, отступы). Если изменить какое-либо свойство стиля, оно будет изменено для всех элементов, использующих этот стиль.

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

Как учиться веб-дизайну без реальных заданий?

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

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