Графический дизайн

Maria Mikhailova

Как сделать макет для комбо

Как собирать комбо из продуктовых компонентов в Фигме: структура файла, варианты, масштаб и обновление продуктов.

Мы создали систему в Фигме, которая позволяет быстро собирать новые комбо и поддерживать единый визуальный стиль. Продукты не нужно создавать заново каждый раз — они живут как компоненты и переиспользуются в разных макетах. Так удобнее работать с разными странами, обновлять продукты и меньше ошибаться. Компоненты, Variants и Swap Instance держат порядок в большом файле. Если пользоваться ими правильно, комбо собираются и обновляются аккуратно, без ручной пересборки. Файл в Фигме устроен как система для сборки комбо из продуктовых компонентов.

Как устроен файл

Файл состоит из библиотеки компонентов и страниц стран.

Каждый продукт существует как отдельный компонент. Компоненты нужны для того, чтобы один и тот же продукт можно было быстро использовать в разных комбо без повторной ручной сборки.

Страницы стран. В файле есть две страницы для стран: Эмираты и Катар. Каждая страница соответствует отдельной стране и содержит набор комбо для этой страны.

• UAE — страница для рынка Эмиратов.
• QA — и для Катара.

Как устроены комбо

Главный принцип: комбо собирается из готовых компонентов, а не создаётся вручную с нуля.

• одно комбо — один отдельный фрейм,
• внутри фрейма размещены продуктовые компоненты,
• один и тот же компонент может использоваться в нескольких разных комбо.

Варианты продуктов

У некоторых продуктовых компонентов есть несколько вариаций по:

• размеру,
• количеству продуктов,
• типу,
• формату порции.

Эти вариации сделаны через функцию Variants. Внутри компонента каждому варианту присвоено соответствующее название и, где необходимо, цифровое значение. Это помогает быстро понять, какой именно вариант выбран.

Поэтому при сборке комбо не всегда нужно ставить новый компонент. Если в комбо уже есть пицца, но не того вида, достаточно просто заменить её на нужный вариант. Эта версия продукта уже есть внутри текущего компонента, её можно выбрать через выпадающий список в правой панели Фигмы.

Перед тем как заменить компонент на другой, сначала проверьте, есть ли нужный вариант в Variants.

Масштаб продуктов

При сборке комбо важно учитывать не только композицию, но и реальный физический размер продуктов относительно друг друга.

Компоненты в библиотеке могут быть одинакового или похожего размера в пикселях, но сами продукты в реальности отличаются по размеру. Поэтому при сборке нужно вручную проверять соразмерность продуктов.

Главное правило: пиксельный размер компонента в Фигме не всегда равен физическому размеру продукта.

Нет

Да

Базовая единица масштаба. За основу масштаба в комбо рекомендуется брать самый крупный продукт. Обычно это большая пицца или открытая коробка с пиццей.

Этот продукт удобно считать базой масштаба — 100%. Все остальные продукты в этом же фрейме должны масштабироваться относительно него.

Шкала масштаба

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

Пиццы. Большая, средняя и маленькая пицца отличаются друг от друга не радикально, а примерно на толщину бортика. Поэтому разница должна быть видимой, но не чрезмерной.

Снеки. Обычно должны быть меньше пиццы, но достаточно крупными, чтобы продукт был понятен.

Соусы. Самый маленький продукт в композиции. Он должен быть видимым, но не должен конкурировать по размеру с основными продуктами.

Напитки. Часто выше других продуктов, поэтому их нужно масштабировать осторожно. Напиток не должен визуально становиться главным объектом.

Несколько одинаковых продуктов. Если в комбо несколько одинаковых продуктов, они должны быть одного масштаба. Не увеличивайте один и тот же продукт только потому, что он стоит ближе к центру композиции.

Продукты с разным количеством. Количество лучше показывать через повтор продукта, стопку, бейдж ×2, ×3 и т. п.

Композиционный масштаб

Иногда ради композиции продукт можно немного увеличить или уменьшить. Допустимое отклонение: примерно ±10–15% от логического масштаба.

Это можно делать, если нужно:

• улучшить баланс композиции,
• сделать главный продукт более заметным,
• сохранить читаемость маленького продукта.

Но нельзя нарушать базовую логику размера. Маленькая пицца не должна выглядеть как большая, соус не должен выглядеть как отдельный боул, а напиток не должен казаться больше основного продукта.

Как собрать макет для комбо

Для упрощения работы можно использовать уже готовые наборы комбо. Если в файле уже есть комбо, которое очень похоже на то, которое нужно собрать, лучше не собирать всё с нуля, а взять готовый фрейм за основу.

Порядок работы:

1. Найдите готовое комбо, максимально похожее по составу и композиции.
2. Скопируйте фрейм.
3. Замените только те продукты, которые отличаются.
4. Проверьте масштаб новых продуктов относительно уже стоящих в композиции.
5. При необходимости поправьте размер, отступы и визуальный баланс.

Это помогает:

• быстрее собирать новые комбо,
• сохранять единый визуальный стиль,
• не нарушать уже настроенную композицию,
• меньше ошибаться с масштабом,
• использовать уже проверенные пропорции между продуктами.

Но даже при работе с готовым комбо важно проверять масштаб заново, особенно если меняется размер пиццы, тип продукта или количество продуктов.

Как заменить продукт в комбо

1. Выберите продуктовый компонент внутри фрейма.
2. Сначала проверьте, есть ли нужная версия продукта в Variants.
3. Если нужный размер, количество или тип уже есть внутри компонента, выберите его из выпадающего списка в правой панели Фигмы.
4. Если нужного варианта нет, замените компонент через Swap Instance.
5. После замены проверьте: размер продукта, положение внутри фрейма, отступы, визуальный баланс и корректность продукта для выбранной страны.

Лучше использовать Swap Instance, чем удалять компонент и собирать элемент заново вручную.

Как работать с Variants

У некоторых компонентов есть варианты по размеру, количеству или типу. Эти варианты выбираются через Variants в правой панели Фигмы.

Важно помнить: смена варианта не всегда автоматически меняет визуальный масштаб продукта. Например, если внутри одного компонента есть большая, средняя и маленькая пицца, при переключении варианта маленькая пицца может остаться такого же размера в пикселях, как большая.

После каждой смены варианта нужно проверить:

• соответствует ли новый вариант реальному размеру продукта,
• не выглядит ли маленький продукт слишком большим,
• не выглядит ли большой продукт слишком маленьким,
• не нарушился ли масштаб относительно остальных продуктов в этом же комбо.

Как собрать новое комбо

1. Перейдите на нужную страницу страны: UAE или QA.
2. Создайте новый фрейм либо скопируйте существующий, который ближе всего по структуре к новому.
3. Замените продукты внутри фрейма на нужные компоненты из библиотеки.
4. Если у продукта есть варианты через Variants, выберите нужный размер, количество или тип через выпадающий список в правой панели.
5. Проверьте композицию: продукты стоят корректно, ничего не съехало, все элементы относятся к нужной стране.
6. Переименуйте фрейм так, чтобы было понятно, какое это комбо, по структуре: [Страна] — [Название комбо] — 1875×1875 px. Должно получиться, например: AE — Meal for Me — 1875×1875 px. Важно использовать единый принцип нейминга во всём файле.

Как обновить компонент

Если продукт изменился и это изменение должно примениться во всех комбо, нужно обновлять основной компонент в библиотеке.

Порядок действий:

1. Перейдите в библиотеку компонентов.
2. Найдите нужный основной компонент.
3. Внесите изменения.
4. Просмотрите комбо, в которых используется этот продукт.

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