Ассеты
В Фигме есть семь готовых шейпов. Ниже рассказываем, как можно их менять — вариантов много.
Шейпы в Фигме
Исходники всех шейпов
Самое главное правило
Шейп — это квадрат, из которого вырезали определённые формы и срезали углы. Когда растягиваем шейп, эти формы не должны деформироваться.
В Фигме для этого редактируем шейп по точкам, а не растягиваем его напрямую.
Шейп как фон
Шейп может быть фоновым элементом в коммуникациях, иллюстрациях и вообще везде, где нужно добавить брендовости. Шейп на фоне в таком случае всегда один.
Не делаем их несколько, тем более не делаем многослойные композиции — тогда они слишком сильно забирают внимание.
Паттерн из шейпов — это не набор шейпов на фоне, а отдельный режим фона: он для макетов, где герой — текст. У этого режима свои правила, про них ниже.
Паттерн из шейпов
Несколько крупных шейпов создают узор улиц негативным пространством. Паттерн ставим, когда герой макета — текст. Если в макете есть обтравка, иллюстрация или мокап, фоном идёт один шейп-подложка, а паттерн не ставим вовсе. Если фото лежит на весь макет или в шейпе-маске, шейпов на фоне нет совсем. И следим, чтобы сам паттерн не стал героем композиции.
Паттерн собираем из одинаковых квадратных шейпов. Ставим их рядами со сдвигом на полшейпа, как кирпичи, с равными зазорами — это улицы. Решётку наклоняем на 15° целиком, шейпы по отдельности не поворачиваем. Решётка шире формата, поэтому её края и пустые углы фона в кадр не попадают. В кадре четыре-шесть шейпов, один может войти целиком.
Ряды сдвинуты кирпичиками
Каждый шейп повёрнут отдельно
Ряды стоят друг под другом
Можно
- смешивать разные шейпы из семи и зеркалить их;
- наклонять решётку в любую сторону — лишь бы ровно на 15°;
- цвет как на «Цветах»: паттерн всегда идёт фоном 800 с шейпами 500.
Нельзя
- крутить шейпы по отдельности внутри паттерна;
- ставить ряды друг под другом: без кирпичного сдвига улицы сходятся ровными перекрёстками;
- ставить два одинаковых шейпа рядом;
- направлять острые углы соседей друг на друга через улицу;
- показывать внешний край решётки или оставлять голый угол фона;
- делать зазоры разной ширины;
- класть паттерн под фото или обтравленного героя.
Шейп как формат
Можно использовать сам шейп как формат — либо стилизовать под него контейнер, либо положить в контейнер почти под обрез на однородный фон. Шейп поверх фото класть можно только маркетингу и на страницах со статическими изображениями, где мы точно контролируем, на каком фоне он окажется.
Шейп как маска для фото
Важное ограничение
Маску используем, только если точно знаем, какая фотка под ней окажется. В продукте — только там, где изображение не меняется: например, на статических страницах
С этим приёмом учитываем, что шейп сам по себе шумит. Если шуметь будет ещё и фото, выйдет перебор.
Фон всей композиции должен быть однородным. Можно отходить от базовой палитры и брать цвета с фото, но нельзя накладывать фото на фото или на узор.
В интерфейсах
В продукте можно использовать шейпы на фоне — например, в обложках подборок и баннерах.
Ещё под шейп можно стилизовать карточки.
