Выравнивание и распределение объектов в Figma:
Выравнивание одного объекта относительно другого:
1. Выберите оба объекта:
- Выделите оба слоя с объектами. Учтите, что меньший объект будет выравниваться относительно большего.
2. Используйте инструменты выравнивания:
- На панели свойств справа выберите нужный тип выравнивания (левый край, центр, правый край, верх, центр по вертикали, низ).
3. Горячие клавиши:
- Используйте горячие клавиши для быстрого выравнивания. Например, Option + A (macOs) или Alt + A (Windows) для выравнивания по левому краю.
Выравнивание нескольких объектов относительно другого:
1. Выберите все нужные объекты:
- Выделите все объекты, которые вы хотите выровнять относительно самого большого объекта.
2. Примените инструменты выравнивания:
- Используйте аналогичные инструменты, как и в предыдущем случае. Объекты выровняются относительно самого большого.
Выравнивание группы объектов с сохранением позиции:
1. Сгруппируйте объекты:
- Предварительно сгруппируйте объекты для сохранения относительных позиций.
2. Примените инструменты выравнивания:
- Выберите нужный тип выравнивания, объекты внутри группы будут выровнены, сохраняя свои позиции.
Выравнивание одного объекта внутри фрейма:
1. Выделите объект внутри фрейма:
- Если выделить только один объект внутри фрейма, он выровняется относительно границ фрейма.
Равномерное распределение:
1. Выберите несколько объектов:
- Выделите несколько объектов, между которыми вы хотите создать равномерное расстояние.
2. Используйте инструмент Tidy Up:
- Нажмите Ctrl + Alt + T (macOs) или Ctrl + Alt + Shift + T (Windows), затем укажите расстояние между объектами.
3. Другие инструменты:
- Distribute Vertical Spacing (Ctrl + Alt + V) и Distribute Horizontal Spacing (Ctrl + Alt + H) также используются для равномерного распределения объектов.
Примечание:
- Используйте горячие клавиши для быстрого доступа к инструментам.
- Экспериментируйте с выравниванием и распределением для упрощения размещения объектов в дизайне.
Новые примитивы и Экспорт дизайна в Figma:
Эллипс:
1. Создание эллипса:
- Используйте горячую клавишу O или выберите соответствующий пункт в выпадающем меню инструментов.
2. Интересные возможности:
- После создания, вы можете изменить эллипс в дугу, перетянув белый кружок, который появляется при наведении.
- Три кружка (Start, Sweep, Ratio) появляются для настройки дуги в панели свойств.
- Радиус скругления (Corner Radius) доступен для смягчения торцов.
Полигон:
1. Создание многоугольника:
- Нет горячей клавиши, поэтому выберите соответствующий пункт в выпадающем меню.
2. Настройки:
- После создания, появятся два кружка: Count (количество вершин) и Radius (радиус скругления вершин).
Звезда:
1. Создание звезды:
- Также нет горячей клавиши, выберите из выпадающего меню.
2. Параметры:
- Три кружка для настройки: Count (количество лучей), Ratio (соотношение углублений и выступов луча), Radius (радиус скругления).
Экспорт дизайна:
1. Пометка слоя для экспорта:
- Выберите фрейм, группу или слой.
- Нажмите + (плюс) рядом с "Export" в панели свойств.
2. Настройка экспорта:
- Выберите формат экспорта (PNG, SVG, JPG).
- Нажмите кнопку Export слева от настроек.
3. Выбор формата:
- PNG - без потери качества, подходит для клиентов.
- JPG - с потерей качества, используется для фотографий.
- SVG - векторный формат для иконок и схем.
4. Формат PDF:
- PDF используется для сохранения презентаций или отчетов, но Figma создает тяжелые файлы в этом формате.
5. Примечание:
- Каждый формат имеет свои особенности, и их выбор зависит от цели использования (презентация, иконки, фотографии).
Экспериментируйте с новыми примитивами и экспортируйте дизайн в удобных форматах для ваших целей.
Первое задание:
1. Создание фигур в Figma:
- Используйте примитивы (прямоугольник, эллипс, полигон и звезду) для отрисовки каждой фигуры в отдельном фрейме на отдельной странице.
2. Экспорт в PNG:
- Выделите каждый фрейм с фигурой.
- Нажмите на "Export" в панели свойств.
- Выберите формат PNG и экспортируйте с подписью.
3. Импорт обратно в Figma:
- Создайте новую страницу.
- Импортируйте созданные PNG-файлы в Figma.
4. Расположение фигур:
- Разместите фреймы с экспортированными фигурами в отдельном фрейме так, чтобы они повторяли исходное изображение.
Второе задание:
1. Отрисовка панели свойств:
- Выберите фрейм с любой фигурой.
- Сделайте скриншот панели свойств Figma (справа) в отдельном фрейме.
2. Изменение цветов:
- В Figma, используя инструменты, измените цвета в соответствии с темной темой интерфейса.
Третье задание:
1. Выбор двух дизайнов:
- Посетите Behance или Awwwards.
- Найдите два дизайна веб-сайтов.
2. Отрисовка нового дизайна:
- Создайте новую страницу в Figma.
- Используйте структуру одного сайта и цвета/иллюстрации из второго для создания нового дизайна.
3. Экспериментируйте:
- Попробуйте воплотить идеи, даже если вы не знаете основ дизайна.
- Используйте инструменты Figma для рисования и распределения элементов.
Обратите внимание, что реализация этих заданий потребует непосредственной работы в Figma с использованием интерфейса.