Готовые решения в Figma: 10 полезных файлов для дизайнеров
Наборы элементов для iOS и Android, компонентов для приложения, паттернов и шаблонов для портфолио.
![](https://248006.selcdn.ru/main/iblock/4b5/4b5150706aacfc0a76c061c999b3b13c/ea94a516c627adab38af0cecaa41cb6b.png)
![](https://248006.selcdn.ru/main/iblock/4b5/4b5150706aacfc0a76c061c999b3b13c/ea94a516c627adab38af0cecaa41cb6b.png)
Иллюстрация: Оля Ежак для Skillbox Media
Зачастую в дизайнерских проектах приходится всё рисовать с нуля: и элементы интерфейса, и паттерны, и иконки, и даже оформление для портфолио. Если у вас сжатый дедлайн и ограниченный бюджет, то готовые решения — отличный способ поскорее сделать работу и довести макет из Figma до готового продукта.
Рассказываем, какие файлы в Figma помогут вам быстрее делать типовые проекты и выкладывать результаты в портфолио на Behance и Dribbble.
Наборы для iOS и Android
При проектировании приложения под конкретную платформу важно учитывать привычки её пользователей — как выглядят кнопки и переключатели, какой должен быть шрифт, какие в системе стандартные цвета. Перерисовывать это вручную — очень долго и бессмысленно, так как в свободном доступе уже есть готовые решения и для iOS, и для Android.
В наборах для iOS 15 и виджетов — и наборы компонентов, и стандартные цвета, и инструкции по типографике:
![](/upload/setka_images/07424616122021_c7c2d6650fe8dd3125b1541cb39af56649bd56fa.jpg)
В наборе Material Design — всё необходимое для приложений на Android и других продуктов, которые разработаны по дизайн-системе Google:
![](/upload/setka_images/07424616122021_b30ff17d14b759c017197570526ff51b33cc83c5.jpg)
Наборы элементов интерфейса
Если вам не принципиально полное сходство вашего приложения с системой пользователя, обратитесь к пользовательским наборам элементов. Они помогут вам не только быстро собрать собственное приложение, но и разобраться, как строятся дизайн-системы.
Monday.com UI kit — готовая дизайн-система для интерфейса приложения. В ней собраны элементы интерфейса, их возможные варианты, рекомендации для выбора цветов и шрифта.
![](/upload/setka_images/07434616122021_2229e417950c39bd1ac90259b6c781a232a40430.jpg)
![](/upload/setka_images/07435416122021_cece785eb92cd643f5e788e5f37e3d933a76f56c.jpg)
9 Smart Animate Examples подойдёт для тех, у кого не получается сделать красивую анимацию в Figma. Здесь собраны девять сложных и простых примеров разных переходов, которые можно скопировать в свой проект.
![](/upload/setka_images/07441516122021_6caf85fa09e0642959e62c753d9a2f18236eb1da.jpg)
![](/upload/setka_images/07441516122021_c0c954a3a268bfc515e88839a41a25de5bd1b194.jpg)
Сборники паттернов
Паттерны могут украсить и промостраницу, и мобильное приложение, и любой другой дизайнерский продукт. Чтобы сделать его качественно, вам придётся потратить много усилий. Но если время ограничено — попробуйте взять готовое решение и быстро отредактировать его под свою задачу.
Paaatterns — набор геометрических паттернов из произвольных фигур.
![](/upload/setka_images/07455316122021_71b97f3681cfd481f98f8279e17d064ae63ea66a.jpg)
SVG Abstrac patterns & Illustrations — набор абстрактных паттернов и иллюстраций.
![](/upload/setka_images/07460816122021_d75dd4921f9f5ca9dc828e1efafbd5a21dfa9c5d.jpg)
Flower Patterns — набор геометрических цветов. Автор советует собирать из них паттерны и использовать как иллюстрации.
![](/upload/setka_images/07460816122021_b96f49b701f581862428f9c58e1a46c731d0aa89.jpg)
Для портфолио
Обычно дизайнеры стремятся как можно скорее показать свою работу после завершения проекта. Чтобы не тратить на оформление картинок много времени, воспользуйтесь готовыми шаблонами для размещения иллюстраций.
Для Dribbble — набор паттернов и карточек с пространством под скриншоты.
![](/upload/setka_images/07464516122021_b76bc71fa80c20942ed01e19c21ead7b69ad6b89.jpg)
Для Behance — набор шаблонов и подготовленные скриншоты самого сервиса, чтобы вы могли сверстать презентацию с учётом окружения самого Behance.
![](/upload/setka_images/07464516122021_1c076733da30d01108464d85a8ffad1517acec59.jpg)
![](/upload/setka_images/14193802062022_93332d2c63ae51fe843eb0192ae360f05bf930b6.png)
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.