Работа со слоями
Любой проект в Figma состоит из множества слоёв. Слой — это определённый объект. Например, выбрав боковую панель и нажав правую кнопку мыши, можно увидеть несколько слоёв: основной родительский объект (например, iPhone main screen), слой «Боковая панель», и отдельные объекты внутри панели (например, квадрат — каждый из них является отдельным слоем). Слои можно группировать, перемещать вверх или вниз по иерархии, добавлять к ним эффекты.
Расположение слоя в иерархии определяет, какие объекты он перекрывает. Слой, расположенный выше, перекрывает слои, находящиеся ниже. Объект можно переместить:
- В самый верх: Bring to Front
- В самый низ: Send to Back
- На один слой вверх/вниз: Bring Forward/Send Backward
Существуют также горячие клавиши для быстрого перемещения слоёв.
Расположение и выравнивание объектов
Для идеального расположения объектов внутри фрейма или слоя можно использовать горячие клавиши выравнивания по центру, левому или правому краю, а также по вертикали (сверху, по центру, снизу). Иногда ручное перемещение объектов может быть эффективнее, особенно если объекты не имеют одинаковых размеров.
Автоматический слой и ограничения
Для каждого слоя можно указать свойство Layout (автоматический слой). При растягивании родительского слоя, дочерние объекты с автоматическим слоем сохраняют свои пропорции и не деформируются.
Ограничения (Constraints) позволяют привязывать объект к определённым сторонам или к собственному центру. При изменении размеров фрейма, объект, связанный с ограничениями, будет трансформироваться, сохраняя заданное положение относительно фрейма. Например, объект может быть привязан к:
- Верхней, нижней, левой, правой стороне фрейма.
- Собственному центру.
- Значению Stretch, когда объект растягивается или сжимается вместе с фреймом.
Используя ограничения, можно создавать адаптивный дизайн.
Работа с текстом
Шрифты в Figma подтягиваются из Google Fonts. Для создания текстовой надписи используется инструмент «Текст». В настройках текстовой надписи можно указать:
- Шрифт: Выберите шрифт из Google Fonts, введя его название.
- Размер: Укажите размер текста в пикселях.
- Стиль: Regular, Bold, Extra Bold и другие.
- Цвет: Выберите цвет текста.
- Выравнивание: По центру, по левому или правому краю.
- Межстрочный интервал: Расстояние между строками.
- Интервал между буквами: Расстояние между символами.
Можно выделить фрагмент текста и изменить его стиль или цвет, не затрагивая остальной текст.
Работа с иконками
Иконки можно создавать самостоятельно или использовать ресурсы из интернета, например, Iconfinder.com. Иконки в формате SVG легко редактируются в Figma.
Адаптивный дизайн
Для создания адаптивного дизайна необходимо правильно настроить ограничения (Constraints) для всех элементов проекта. Это обеспечит корректное отображение элементов при изменении размеров фрейма.
В этом уроке мы изучили работу со слоями, расположение и выравнивание объектов, использование автоматического слоя и ограничений для создания адаптивного дизайна, а также работу с текстовыми надписями и иконками в Figma. Правильное использование слоёв и ограничений позволяет создавать более организованные и адаптивные проекты.