Дизайн
#Руководства

Готовые решения в Figma: 10 полезных файлов для дизайнеров

Наборы элементов для iOS и Android, компонентов для приложения, паттернов и шаблонов для портфолио.

Иллюстрация: Оля Ежак для Skillbox Media

Зачастую в дизайнерских проектах приходится всё рисовать с нуля: и элементы интерфейса, и паттерны, и иконки, и даже оформление для портфолио. Если у вас сжатый дедлайн и ограниченный бюджет, то готовые решения — отличный способ поскорее сделать работу и довести макет из Figma до готового продукта.

Рассказываем, какие файлы в Figma помогут вам быстрее делать типовые проекты и выкладывать результаты в портфолио на Behance и Dribbble.

Наборы для iOS и Android

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

В наборах для iOS 15 и виджетов — и наборы компонентов, и стандартные цвета, и инструкции по типографике:

Скриншот: Skillbox Media

В наборе Material Design — всё необходимое для приложений на Android и других продуктов, которые разработаны по дизайн-системе Google:

Скриншот: Skillbox Media

Наборы элементов интерфейса

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

Monday.com UI kit — готовая дизайн-система для интерфейса приложения. В ней собраны элементы интерфейса, их возможные варианты, рекомендации для выбора цветов и шрифта.

9 Smart Animate Examples подойдёт для тех, у кого не получается сделать красивую анимацию в Figma. Здесь собраны девять сложных и простых примеров разных переходов, которые можно скопировать в свой проект.

Сборники паттернов

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

Paaatterns — набор геометрических паттернов из произвольных фигур.

Скриншот: Skillbox Media

SVG Abstrac patterns & Illustrations — набор абстрактных паттернов и иллюстраций.

Скриншот: Skillbox Media

Flower Patterns — набор геометрических цветов. Автор советует собирать из них паттерны и использовать как иллюстрации.

Скриншот: Skillbox Media

Для портфолио

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

Для Dribbble — набор паттернов и карточек с пространством под скриншоты.

Скриншот: Skillbox Media

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

Скриншот: Skillbox Media

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

Расписание

Курс

Figma с нуля до PRO

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

Узнать про курс
Figma с нуля до PRO Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована