Всем привет! Сегодня мы научимся как создать фрейм в Фигма. Что же такое фрейм? Фреймы – это основа любого дизайна, как холст для художника. Без них никуда! Назовём его контейнером, в котором живёт ваш дизайн. Представьте, что это отдельные экраны приложения. Без фрейма ваш дизайн будет просто кучей пикселей, летающих в космосе фигмы, как одинокие астероиды. Фреймы помогают организовать элементы, ограничивать область видимости и создавать прототипы страниц. Порядок наше всё, элементы дизайна будут разложены по полочкам, то есть по фреймам.
Фигма уроки для начинающих
Итак, поехали, пристегните ремни, потому что мы отправляемся в увлекательное приключение. Пора создать фрейм в Фигма.
На рабочем поле внизу на панели инструментов выбираем инструмент Frame. Выглядит он как значок «#».
Просто кликните мышкой в любом месте рабочей области и потяните, либо кто любит погорячее, нажимаете клавишу F. Справа на панели можно выбрать готовый пресет под определённый размер экрана (например, iPhone 14 или Desktop). Это очень удобно! Либо рисуете свой размер уникальный.
Пресеты — это сохранённые настройки, которые можно использовать повторно, в других фреймах.
Фрейм, размеры
Изменить размер фрейма можно на панели справа. Задать нужный размер фрейма можно двумя способами, по старинке вручную, где W-ширина, Y-высота. Второй способ выделяете ширину или высоту, при выделении она подсвечивается другим цветом, зажимаете клавишу Alt на клавиатуре и, не отпуская её, двигаете вправо увеличить, влево уменьшить до нужного размера.
С помощью этих инструментов вы всегда можете изменить размер фрейма.
Как только вы создали фрейм в фигма, можно добавлять внутрь него другие элементы: текст, изображения, фигуры. Всё как обычно!
Размеры карточек в фигма
У всех маркетплейсов свои требования к размерам изображений товара:
- размер карточки ВБ в фигма; 3: 4 минимум 900 х1200 пикселей, 1200 х 1600 пикселей;
- размер карточки для озона в фигма; для Одежды минимум 900 х 1200 пикселей, для других товаров 1:1 от 200 х 200 пикселей. У Озона менялись требования к размерам, они планировали перевести всех на один формат, как на WB, поэтому уточняйте нужные размеры у своих заказчиков;
- Яндекс маркет требует минимум 300 × 300 пикселей.
Как добавить фрейм в фигма
Нужно добавить ещё один фрейм такого же размера, выделяете фрейм, зажав одновременно клавишу Shift + Alt, и перетаскиваете копию на свободное место.
Советы напоследок:
Называйте фреймы осмысленно. «Главный слайд», «Обложка», «Слайд 2» и т. д. Потому что, когда вы делаете карточку товара для маркетплейса, в карточке может быть не один слайд, а несколько, и в них очень легко запутаться. Поэтому подписывайте каждый фрейм, объект, группу в карточке.
Используйте сетки и направляющие для точного позиционирования элементов внутри фрейма.
Фреймы можно вкладывать друг в друга. Например, внутри фрейма «Главный экран» можно создать фрейм для шапки сайта.
Вот и всё! Создание фрейма – это очень просто. Теперь попробуйте сами и увидите, как это удобно! Удачи в дизайне!
