Готовые макеты Figma, в большом количестве, можно найти в интернете на специализированных сайтах или на сайтах-портфолио некоторых дизайнеров. Макеты представляют из себя готовые шаблоны сайтов, которые вы можете открыть в Фигме для просмотра. Так же, вы можете скопировать макет себе в драфты (Duplicate to your drafts), если хотите иметь возможность редактировать его.
Довольно часто, дизайнеры ищут макеты для того, чтобы посмотреть как в нем реализованы те или иные элементы дизайна. Качественный проект, подготовленный и оформленный профессиональным дизайнером, может стать отличным руководством для начинающего при создании собственных макетов. Ведь помимо способов реализации тех или иных идей, в макете можно подсмотреть и некоторые «технические и организационные моменты». Так же, бесплатные макеты Figma ищут верстальщики и программисты, которые хотят добавить больше работ в свое портфолио, либо просто попрактиковаться в верстке реальных проектов.
Как искать примеры анимации или дизайн разных блоков?
В нашей подборке вы сможете найти макеты сайтов и интернет-магазинов, макеты мобильных приложений, лендинги, простые макеты для начинающих или более сложные, для тех, кто уже окончил курсы Figma и готов к непростым задачам.
1. Макет интернет-магазина одежды
Макет дизайна для сайта интернет-магазина одежды. В макете представлены различные блоки, включая категории товаров и блок с мобильным приложением. Макет содержит в себе только главную страницу, в нем нет дизайна страницы карточки товара или корзины.
2. Макет административного интерфейса (админки)
Бесплатная версия макета административного интерфейса Panda. Макет включает в себя главную страницу админки и набор используемых компонентов с иконками. Сам макет главной страницы находится в Pages > Templates > Dashboard pages
3. Макет Figma — лендинг
Бесплатный макет SaaS лендинга для Фигмы. Шаблон выполнен в синих тонах и имеет два варианта: светлый и темный. Так же доступны версии для различных устройств (планшеты, смартфоны) и разрешений экрана. В самом макете есть большое количество информационных блоков, а так же, блоков с ценами и отзывами.
4. Макет мобильного приложения (темный)
Макет Figma для мобильного приложения Android или iOS, выполнен в темной цветовой гамме. Сам макет содержит в себе 10 экранов (или страниц) мобильного приложения, с большим количеством элементов интерфейса (формы, кнопки, информационные блоки, модальные окна и т.д.).
Уроки Figma (Фигма) – №1: Начало работы, основы программы | Школа Максима Солдаткина
5. Макет блога / информационного сайта
Макет личного блога или информационного сайта в светлых тонах. Состоит из 9 страниц: главная страница, страница записей, одиночная запись, категории, страница автора, страница «о нас», контакты и страница с юридической информацией.
6. UI Kit — Material Design
UI Kit — набор элементов Material Design 3 для Figma. В наборе имеются компоненты в светлой и темной цветовой гамме. Отлично подойдет для дизайна мобильных приложений под Android.
7. Макет лендинга товаров для красоты и здоровья
Макет лендинга для рекламы и продажи товаров для красоты и здоровья. Дизайн выполнен в теплых тонах и содержит различные информационные блоки, в которых описываются преимущества товара и демонстрируются его фото.
8. Макет cайта для дизайнеров интерьера
Макет сайта для компании предлагающей услуги дизайна интерьера. Легкий и светлый макет, состоит из 7 страниц, на который вы сможете найти большое количество уже готовых элементов и секций. Отлично подойдет в качестве основы для вашего дизайна или для верстки в портфолио верстальщика.
9. Макет приложения либо мобильной версии интернет-магазина
Макет приложения интернет-магазина либо мобильной версии интернет-магазина. Можно использовать в качестве основы при создании приложения либо мобильной версии сайта. Макет содержит в себе большое количество шаблонов страниц.
10. Макет лендинга или сайта-одностраничника
Неплохой макет с контрастными темными блоками на основном белом фоне. Содержит большое количество элементов для отображения информации на странице. Подойдет для лендинга или сайта-одностраничника для компании.
11. Макет кредитных карт
Более 30 макетов кредитных карт в слоях. Все изображения, текстовые данные и градиенты можно редактировать, либо заменить своими. Отлично подойдет в качестве примера для создания собственного дизайна кредитной или дебетовой карты.
12. Иконки популярных социальных сетей
Набор из более чем 50 иконок популярных социальных сетей и приложений, таких как: WhatsApp, Instagram, YouTube, Pinterest, Twitch, Telegram, Viber, Вконтакте и других. Отлично подойдут для оформления любого блока контактов или блока с социальными сетями компании на сайте.
13. iOS 16 UI Kit
Большой UI kit операционной системы iOS 16. Отлично подойдет для создания дизайна либо прототипа мобильного приложения для устройств iPhone или iPad.
14. Набор SVG иконок Remix Icons
Если, по каким либо причинам, вас не устраивает плагин Iconify, в котором вы можете подобрать практически любую иконку для своего макета, вы можете скачать этот шаблон со всеми иконками популярного пака Remix Icons.
15. Макет сайта для онлайн школы или курсов
Неплохой макет для онлайн школы или курсов (например по дизайну). Макет выполнен в светлой цветовой гамме и содержит векторные иллюстрации и фото, которые можно заменить на свои.
Конечно, этот список можно сделать просто огромным, в несколько сотен записей как минимум. Но нам не хотелось собирать на этой странице все, что удалось найти на просторах интернета. Поэтому, мы отобрали лишь наиболее интересные (на наш субъективный взгляд) макеты.
В заключении
Список однозначно будет видоизменяться в будущем: добавим новые макеты, что то наверно удалим как потерявшее свою актуальность.
P.S.: если вы нашли какой то макет, который как вам кажется просто обязан быть в этом списке — отправьте нам ссылку через форму обратной связи на странице «Контакты».
Версии Figma для разных ОС
- Figma для Windows 8, 10, 11Скачать установщик FigmaSetup.exe
- Figma для MacOSСкачать установщик Figma.dmg
- Figma для AndroidПерейти в Google PlayMarket
- Figma для iOSПерейти в Apple AppStore
Источник: skillu.ru
Топ 10 иллюстраций в Figma для ваших проектов
Всем привет, я Денис Верхоломчук, создаю трендовые сайты и веб-интерфейсы. Подбор графики для проекта чаще всего долгий и нелегкий процесс. Особенно, когда большинство качественный иллюстраций находятся в платном доступе. Так вот, в этой статье я собрал векторные бесплатные иллюстрации в Figma, которые может использовать каждый из вас в своих проектах!
2129 просмотров
Это классный набор рисованных стикеров в немного абстрактном стиле.
В наборе находится 80 стильных векторных иллюстраций, которые можно использовать в различных проектах. Пак иллюстраций создан в 4 тематических категориях: для ИТ-технологий, лайф-стайл, природа и общая тематика. Эти иллюстрации бесплатные для коммерческого использования, поэтому вы можете использовать их уже в своем следующем проекте.
2. 3D Flame illustrations by Icons8
Это бесплатные 3D иллюстрации в тематике бизнеса, технологий и стартапов. Они созданы в мягком и детском стиле, поэтому, не подойдут для всех проектов. Однако, этот факт не делает их бесполезными, а наоборот, добавит красок в ваш проект и сделает его более привлекательным! Набор состоит из 15 иллюстраций высокого качества.
3. Abstract shapes (liquid 2)
Набор высококачественных абстрактных 3D форм для ваших проектов. Формы выполнены в голографическом стиле и подойдут для многих проектов, так как они универсальны в использовании. Набор состоит из 20 высококачественных иллюстраций для ваших проектов.
Также набор абстрактных голографических фигур, которые доступны для бесплатного использования. Разница с предыдущим набором в том, что здесь изображены более конкретные фигуры (кубы, кристалы, овалы, пружины и ткани). Набор состоит из 50-ти иллюстраций, так что вы наверняка найдете что-то на свой вкус. Также он универсален, поэтому смело используйте его в тематиках IT-технологий, криптовалютах и nft.
5. Abstract 3D shapes (metallic)
Еще один набор абстрактных фигур, которые хочу вам показать, только стилистике металла. Они хорошо подойдет для имиджевых проектов и персональных сайтов, так как выглядят очень стильно. В наборе 27 уникальных иллюстраций различных фигур.
6. Lagos Illustration
Давайте отвлечемся от тематики 3D и посмотрим на классные векторные иллюстрации. Лагос — это мягкие и минималистичные иллюстрации с большим количеством негативного пространства и ограниченным набором цветов. Иллюстрации сделаны с тематике образования, так что хорошо подойдет для проектов со смежной тематикой.
7. Arctic Team
Минималистичный набор векторных иллюстраций в тематике технологий. Набор состоит из 18 полностью настраиваемых иллюстраций. Есть изображения компьютеров, команды и аналитики. Иллюстрации полностью бесплатные для использования и универсальны.
8. Sammy illustrations
Это красочные и мультяшные иллюстрации, которые могут разнообразить ваш проект. Изображения можно использовать в проектах с тематикой стартапов, детского контента и приложениях. Используйте иллюстрации Sammy бесплатно в своих проектах.
9. Corporate Scenes Illustation
Это корпоративные иллюстрации с своеобразным стилем. Набор иллюстраций содержит 12 изображений, демонстрирующих повседневные офисные сценарии. Хорошо подойдет для корпоративных сайтов, проектов связанных с IT-технологиями и стартапов.
10. Hand-drawn Fruits https://vc.ru/design/439780-top-10-illyustraciy-v-figma-dlya-vashih-proektov» target=»_blank»]vc.ru[/mask_link]
Компьютерная программа Figma — отзыв
FIGMA- спасение дизайнеров + примеры работ и классный интенсив
Опыт использования:
месяц или более
Не буду делать обзор интерфейса, это уже сделали неоднократно за меня.
Расскажу о своих плюсах и минусах и покажу примеры работ с бесплатного интенсива.
Моя история: Я уже давно работаю с дизайнерами на сложных проектах и сама берусь за более простые. До этого очень любила программу Canva, но сейчас она доступна только с VPN, а чтобы получить платные функции надо слишком сильно напрячься. Теперь нашла для себя интересную программу, лёгкую в использовании и совмещающую многие привычные мне функции.
Пользоваться ей начала для создания инфографики для маркетплейсов.
Моя работа для OZON. 200р / карточка
Недавно захотела освоить графический дизайн и наткнулась на курсы от kava.school. Но графический у них в середине апреля, так что для начала решила пройти веб-дизайн в Figma.
А для того, чтобы убедиться в том, что курс мне подойдёт, прошла интенсив в боте телеграмм webdesign_kava_bot:
Важно! Figma не работает на русском. Но мне не мешает, я привыкла.
Так же Figmа не требует установки на компьютер, это особенно удобно тем, кто хочет просто попробовать.
Плюсы:
- Бесплатный тариф
- Простой интерфейс
- Не тупит даже при большой кол-ве загруженных холстов и информации
- Автосохранение
- Неограниченное файловое хранилище
- Работа в облаке
- Библиотека разных штук от зерна до иконок и пр.
- Совместный доступ к проекту
Минусы:
- Нет интернета- не работаешь
- Слабые возможности работы с текстом
- Нет импорта из PSD
- Большие макеты долго грузятся
И, конечно, обещанные примеры:
Кейсы/посты для соц.сетей:
Вот такую красоту можно создать самостоятельно и без особого напряга.
Пользоваться или нет решать вам, однако я рада освоить программу, как дополнение к существующим. Больше умеешь- быстрее делаешь.
Работаю я, кстати, на замечательном ноутбуке ASUS.
Достоинства
- Большой набор плагинов
- Векторная графика
- Прототипирования
- Режим презентации
- Совместная работа
Недостатки
- Бесплатная версия имеет ограничения
- Нужен интернет
Источник: irecommend.ru