Figma полностью изменила мир цифрового дизайна. Проектирование интерфейсов, которое раньше велось в Photoshop или Sketch, теперь стало гораздо быстрее, удобнее для совместной работы и доступнее. К тому же Figma работает полностью в браузере, неважно — Mac или Windows, а её бесплатного плана для начала более чем достаточно. В этой статье я поделюсь всем, что нужно, чтобы освоить Figma с нуля. Я рассказываю как дизайнер, который пользуется Figma три года, опираясь на опыт реальных проектов.
Что такое Figma и почему она так популярна?
Figma — это браузерный инструмент для дизайна. Он используется для проектирования сайтов, мобильных приложений, дашбордов и интерфейсов. Но особенность Figma не столько в возможности создавать дизайн, сколько в том, что она предлагает для командной работы.
Впервые я начал пользоваться Figma три года назад в стартап-проекте. До этого я работал в Sketch и был привязан к Mac. В нашей команде был разработчик на Windows, и чтобы поделиться макетами, мы постоянно экспортировали PNG и отправляли их. Когда мы перешли на Figma, разработчик получил возможность видеть дизайн в живом режиме в том же файле. Уже одно это невероятно повысило эффективность.
Вот основные причины популярности Figma. Она работает в браузере и не требует установки. Над одним файлом одновременно может работать несколько человек. Бесплатный план работает, хотя и ограничен тремя файлами. Прототипирование, дизайн-система и передача разработчикам (handoff) — всё в одном инструменте.
Первые шаги: знакомимся с интерфейсом
Когда вы впервые откроете Figma, она может показаться немного пугающей, но базовая структура на самом деле очень проста.
Слева находится панель слоёв. Здесь перечислены все элементы дизайна. Справа — панель свойств. Здесь редактируются цвет, размер, шрифт и другие свойства выбранного элемента. Сверху — панель инструментов. Здесь основные инструменты: рисование фигур, добавление текста, создание фреймов.
Понимание концепции фрейма — основа Figma. Фрейм — это рамка для страницы или экрана. Если вы создадите фрейм размера iPhone 14, то будете делать свой дизайн внутри этого фрейма. Я начинаю каждый проект с создания фрейма: 1440 пикселей в ширину для десктопа, 390 пикселей в ширину для мобильных устройств.
Создаём свой первый дизайн
Давайте спроектируем простой компонент-карточку. Сначала создайте фрейм шириной 350 пикселей и высотой 400 пикселей. Сделайте цвет фона белым. Нарисуйте внутри фрейма прямоугольник — это будет область для изображения. Ниже добавьте текстовый элемент — это будет заголовок. Добавьте ещё один текст — это будет описание. Наконец, добавьте кнопку.
Добавьте к этой простой структуре auto layout. Auto layout автоматически упорядочивает элементы и регулирует расстояния между ними. Нажмите на кнопку auto layout на правой панели, выровняйте элементы фрейма по вертикали и задайте расстояние между ними шестнадцать пикселей. Теперь, если вы удалите или добавите элемент, остальные элементы подстроятся автоматически.
Создание дизайн-системы
Основа профессионального использования Figma — дизайн-система. Цвета, шрифты, компоненты и стили определяются один раз и последовательно используются во всём проекте.
В своём первом проекте я не создал дизайн-систему и позже понял, что совершил большую ошибку. Когда клиент попросил изменить цвет, мне пришлось менять сотни элементов по одному. Во втором проекте первым делом я создал дизайн-систему, и то же самое изменение заняло тридцать секунд.
Чтобы создать цветовые стили: нарисуйте прямоугольник, задайте нужный цвет, нажмите на цветовой квадрат на правой панели и выберите «Create style». В качестве названия используйте схему вроде «Primary/500». Тогда, если вы используете этот стиль по всему проекту, изменение цвета в одном месте изменит его везде.
Компоненты (components) — самая мощная функция Figma. Спроектируйте кнопку, щёлкните правой кнопкой мыши и выберите «Create component». Теперь вы можете использовать эту кнопку в любом месте проекта, а когда вы измените главный компонент, все копии обновятся автоматически.
С помощью функции Variant можно определять разные состояния компонента. Например, вы задаёте primary-, secondary- и outline-варианты кнопки внутри одного компонента. Или создаёте отдельные варианты для состояний hover, active и disabled.
Прототипирование: оживите свои дизайны
Функция прототипирования в Figma делает ваши макеты кликабельными и интерактивными. Это великолепно подходит, чтобы показать клиенту или команде: «когда вы нажимаете сюда, открывается вот эта страница».
Прототипирование очень простое: выберите элемент, перейдите на вкладку «Prototype» на правой панели и проведите стрелку от этого элемента к целевому фрейму. Выберите анимацию перехода: slide, dissolve, smart animate и так далее. Теперь в режиме презентации при нажатии на этот элемент происходит переход на целевую страницу.
Функция Smart Animate меняет правила игры. Она автоматически анимирует элементы с одинаковыми названиями между двумя фреймами. Например, при переходе со страницы списка карточек на страницу сведений о карточке изображение карточки плавно увеличивается. Такие микроанимации делают ваш прототип похожим на настоящее приложение.
В прошлом месяце прототип, который я подготовил для презентации клиенту с помощью smart animate, очень ему понравился. «Это настоящее приложение?» — спросил он. Не было написано ещё ни одной строчки кода, но прототип выглядел настолько реалистично.