Освоим работу с фреймами (артбордами), страницами и файлами, чтобы избежать путаницы в структуре крупных проектов. Рассмотрим мощные возможности, которые предоставляют фреймы, изучим, как сетки и колонки способствуют организации объектов и настройке отступов. Мы также изучим использование направляющих и введем понятие ограничителей (constraints). Кроме того, мы кратко ознакомимся с компонентами.
1. Создание фрейма. Изменение размера и заливка:
- Используйте инструмент с изображением решетки или клавишу F для создания фрейма.
- Зажмите левую кнопку мыши и тяните, чтобы задать размер фрейма.
- В правой панели под разделом "Fill" выберите цвет заливки фона.
- Вы можете изменять размеры фрейма, используя стандартные методы, такие как перетаскивание за край или указание точных размеров в полях Width (Ширина) и Height (Высота).
- В левом верхнем углу панели свойств есть выпадающее меню с шаблонами размеров. Попробуйте применить различные шаблоны для фрейма.
2. Помещение объектов внутрь фрейма:
- Выделите и перетащите все нужные объекты внутрь границ фрейма.
- Или выделите, вырежьте объекты (Command + X на MacOS или Ctrl + X на Windows) и вставьте (Command + V на MacOS или Ctrl + V на Windows) их внутрь фрейма.
3. Простая маска – обрезка содержимого фрейма:
- Используйте опцию "Clip content" в панели свойств фрейма.
- Эта опция позволяет обрезать содержимое фрейма по его прямоугольной границе, определяемой шириной (Width) и высотой (Height) фрейма.
- Обрезанное содержимое будет скрыто, а фрейм станет маской, аналогичной вырезанному отверстию в бумаге, примененному к фотографии.
4. Уникальные возможности фреймов:
- Фрейм имеет размер и может иметь заливку цветом. Размер задается вручную или выбирается из шаблонов.
- Каждый фрейм имеет свою систему координат.
- Фрейм способен обрезать свое содержимое, что называется маской.
- Фрейм может отображать разметку макета, включая сетку, колонки и направляющие.
- При изменении размеров фрейма можно указать, как будут вести себя объекты внутри с использованием ограничений (constraints).
Эти функции делают фреймы в Figma мощным инструментом для создания и организации дизайна страниц и экранов.
Добавление сетки
Фреймы в Figma позволяют использовать вспомогательные сетки для удобства выравнивания и размещения объектов. Вот как это сделать:
1. Выделите фрейм:
- Кликните на фрейме, который вы хотите настроить.
2. Добавление сетки:
- В правой панели выберите вкладку "Layout Grid" (Сетка разметки).
- Кликните на значок "+" напротив раздела Layout Grid. Появится стандартная сетка красного цвета с шагом 10 пикселей.
3. Настройка сетки:
- Нажмите на иконку слева от надписи Grid (10px) для настройки сетки.
- В появившемся окне вы можете задать шаг сетки (Size), цвет линий (Color) и прозрачность.
4. Скрытие и удаление сетки:
- Сетку можно временно скрыть, кликнув на иконку глаза, или удалить, кликнув на иконку минуса справа.
- Можно добавить несколько сеток разных цветов внутри одного фрейма по мере необходимости.
5. Скрытие всех сеток:
- Чтобы временно скрыть все сетки на фреймах, нажмите Ctrl + G. Повторите комбинацию клавиш, чтобы показать их снова.
Использование сетки
- Помощник при отрисовке: Сетку можно использовать для удобства отрисовки форм, баннеров, иллюстраций. Объекты "приклеиваются" к линиям сетки при перемещении, что помогает установить объект в нужной позиции.
- Масштабирование: Границы объекта прилипают к направляющим сетки при масштабировании, что облегчает сохранение пропорций.
- Использование в дизайне веб-страниц: Сетки и колонки являются важными элементами дизайна веб-страниц. Они обеспечивают точное расположение и выравнивание объектов.
Добавление колонок и рядов
Добавление вертикальных колонок:
1. Выделите фрейм.
2. Кликните на плюсике (+) напротив раздела Layout Grid.
3. Нажмите на иконку слева от надписи Grid (10px) и выберите Columns.
4. Настройте количество колонок (Count), тип колонок (Type), ширину (Width), отступы (Offset) и расстояние между колонками (Gutter).
Добавление рядов:
1. Выберите Rows в выпадающем меню.
2. Настройте параметры аналогично колонкам, но используя Height вместо Width.
Использование колонок:
- Колонки обеспечивают точное распределение объектов внутри фрейма.
- Параметры, такие как ширина колонки, отступы и тип распределения, могут быть настроены для каждого дизайна.
Использование рядов:
- Ряды имеют параметры аналогичные колонкам, но применяются к высоте.
- В редких случаях ряды могут быть полезными для определенных дизайнерских решений.
Самостоятельная работа
1. Отрисовка части веб-сайта:
Выберите веб-сайт на свое усмотрение и воссоздайте его шапку (хедер), подвал (футер) или любую другую часть, используя ограничителей (Constraints). Гарантируйте, что элементы прилипают к левой и правой сторонам фрейма. Каждая часть сайта (хедер, футер и др.) должна находиться в отдельном фрейме, а все они - внутри еще одного фрейма (дизайна сайта).
2. Создание кнопок с ограничителями:
Настройте 9 кнопок, представляющих все возможные комбинации ограничителей: top, center, bottom, left, right. Каждая кнопка должна находиться внутри отдельного фрейма и содержать заливку и текст.
3. Форма обратной связи:
Нарисуйте форму обратной связи, включающую поля "Имя", "Email", "Сообщение" и кнопку "Отправить". Сделайте так, чтобы поля тянулись вместе с формой при изменении ее ширины. Используйте ограничение left & right. Разместите форму в отдельном фрейме.