Figma для начинающих: интерфейс и первый макет

Коротко: что такое Figma

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

Чтобы начать, достаточно зарегистрироваться, создать Design file и разобраться с несколькими базовыми понятиями. Ниже — всё, что нужно для первого макета.

Интерфейс за минуту

• Холст (canvas) — бесконечное поле в центре, где вы рисуете.
• Панель инструментов — фрейм, фигуры, перо, текст, комментарии.
• Левая панель — страницы файла и дерево слоёв.
• Правая панель — свойства выделенного объекта: размеры, цвет, шрифт, отступы. Вкладка Prototype отвечает за переходы между экранами.

Перемещаться по холсту удобно с зажатым пробелом, масштабировать — колесом мыши с Ctrl (Cmd на Mac).

Фреймы: основа всего

Фрейм (Frame) — это контейнер, обычно экран или блок интерфейса. Инструмент вызывается клавишей F. После выбора инструмента справа появится список готовых размеров: телефоны, планшеты, десктоп.

Чем фрейм отличается от прямоугольника:

• внутри фрейма можно размещать другие объекты;
• у фрейма есть constraints для дочерних элементов, сетки и auto layout;
• фрейм может обрезать содержимое по своим границам.

Фреймы можно вкладывать друг в друга: экран → карточка → кнопка.

Слои и группы

Каждый объект — это слой в левой панели. Порядок слоёв определяет, что лежит сверху.

• Ctrl/Cmd + G — сгруппировать выделенное.
• Ctrl/Cmd + Alt + G — обернуть выделенное во фрейм.
• Двойной клик по имени слоя — переименовать.

Называйте слои осмысленно («header», «button-primary»), а не оставляйте «Rectangle 47». Это экономит время вам и разработчику.

Фигуры и текст

• R — прямоугольник, O — эллипс, L — линия, P — перо для произвольных контуров.
• T — текст. Клик создаёт строку, растягивание — текстовый блок фиксированной ширины.

В правой панели задаются заливка (Fill), обводка (Stroke), скругление углов, тень и размытие (Effects). Для текста — шрифт, размер, межстрочный интервал и выравнивание.

Повторяющиеся цвета и шрифты стоит сохранять как стили или переменные, чтобы потом менять их в одном месте.

Constraints: как элементы ведут себя при изменении размера

Constraints определяют, к какой стороне родительского фрейма «привязан» объект. Например:

• кнопка внизу экрана с привязкой Bottom останется у нижнего края, если экран станет выше;
• шапка с привязкой Left & Right растянется на всю ширину, если экран станет шире.

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

Совместная работа и Share

Кнопка Share в правом верхнем углу открывает доступ к файлу. Можно пригласить человека по email или скопировать ссылку и выбрать права: просмотр или редактирование. Коллеги оставляют комментарии прямо на холсте (клавиша C), а разработчики могут смотреть размеры и отступы в режиме инспекции.

Практика: первый мобильный экран

Соберём простой экран входа.

1. Нажмите F и выберите размер телефона в правой панели, например 390 × 844. Переименуйте фрейм в «Login».
2. Нажмите T и напишите заголовок «Вход». Поставьте крупный размер шрифта и жирное начертание.
3. Нарисуйте прямоугольник (R) под поле ввода: ширина почти во весь экран, высота около 48, скругление 8, светло-серая обводка. Внутри добавьте текст-подсказку «Email».
4. Скопируйте поле (Ctrl/Cmd + D) и поменяйте подсказку на «Пароль».
5. Сделайте кнопку: прямоугольник той же ширины с яркой заливкой и белым текстом «Войти» по центру. Выделите оба слоя и нажмите Shift + A — получится кнопка на auto layout, которая подстраивается под текст.
6. Выровняйте элементы по левому краю и задайте одинаковые расстояния между ними — помогут розовые подсказки при перетаскивании.
7. Поставьте constraints: заголовку и полям — Left & Right, кнопке — Left & Right и Bottom, если хотите прижать её к низу.
8. Нажмите Share, скопируйте ссылку с правом просмотра и отправьте её, чтобы получить отзыв.

Частые ошибки новичков

• Рисовать экраны без фрейма, просто на холсте.
• Оставлять слои без имён и групп.
• Выставлять отступы «на глаз», каждый раз разные.
• Использовать десяток оттенков одного цвета вместо стилей.
• Игнорировать constraints и auto layout, а потом вручную двигать всё при изменении размера.