Шаблоны для верстки фигма

Макеты Figma

Готовые макеты Figma, в большом количестве, можно найти в интернете на специализированных сайтах или на сайтах-портфолио некоторых дизайнеров. Макеты представляют из себя готовые шаблоны сайтов, которые вы можете открыть в Фигме для просмотра. Так же, вы можете скопировать макет себе в драфты (Duplicate to your drafts), если хотите иметь возможность редактировать его.

Довольно часто, дизайнеры ищут макеты для того, чтобы посмотреть как в нем реализованы те или иные элементы дизайна. Качественный проект, подготовленный и оформленный профессиональным дизайнером, может стать отличным руководством для начинающего при создании собственных макетов. Ведь помимо способов реализации тех или иных идей, в макете можно подсмотреть и некоторые «технические и организационные моменты». Так же, бесплатные макеты Figma ищут верстальщики и программисты, которые хотят добавить больше работ в свое портфолио, либо просто попрактиковаться в верстке реальных проектов.

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

1. Макет интернет-магазина одежды

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

2. Макет административного интерфейса (админки)

Бесплатная версия макета административного интерфейса Panda. Макет включает в себя главную страницу админки и набор используемых компонентов с иконками. Сам макет главной страницы находится в Pages > Templates > Dashboard pages

3. Макет Figma — лендинг

Бесплатный макет SaaS лендинга для Фигмы. Шаблон выполнен в синих тонах и имеет два варианта: светлый и темный. Так же доступны версии для различных устройств (планшеты, смартфоны) и разрешений экрана. В самом макете есть большое количество информационных блоков, а так же, блоков с ценами и отзывами.

4. Макет мобильного приложения (темный)

Макет Figma для мобильного приложения Android или iOS, выполнен в темной цветовой гамме. Сам макет содержит в себе 10 экранов (или страниц) мобильного приложения, с большим количеством элементов интерфейса (формы, кнопки, информационные блоки, модальные окна и т.д.).

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 для разных ОС

1. Figma для Windows 8, 10, 11Скачать установщик FigmaSetup.exe
2. Figma для MacOSСкачать установщик Figma.dmg
3. Figma для AndroidПерейти в Google PlayMarket
4. Figma для iOSПерейти в Apple AppStore

Источник

Шаблоны для верстки фигма

Дизайн-макеты сайтов для Figma

About

Blog

Apps

Platform

Макет сайта Whilе Design

Макет сайта посвященный студии дизайна + мобильная версия.

Макет сайта посвященный доставки пиццы + мобильная версия.

Макет сайта посвященный курьерской службе + мобильная версия.

Макет сайта Агентства недвижимости

Макет сайта посвященный продаже и аренде квартир в Дубаи + мобильная версия.

Макет сайта Dust Lаnd

Макет сайта посвященный игре + мобильная версия.

Макет сайта Pascal Vent

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

Макет сайта посвященный фитнес клубу + мобильная версия.

Макет сайта посвященный аренде велосипедов + мобильная версия.

Макет сайта WolfMedia

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

Макет сайта посвященный портфолио веб-разработчика.

Макет сайта посвященный интернет-магазину электроники + мобильная версия.

Макет сайта посвященный продаже медицинского оборудования.

Макет сайта посвященный разработке веб-приложений + мобильная версия.

Макет сайта посвященный покупки машины в лизинг.

Макет сайта 100Юpистoв

Макет сайта посвященный горячий линии юридической помощи + мобильная версия.

Макет сайта Basket car

Макет сайта посвященный привозу авто из США.

Макет сайта Prizmatech

Макет сайта посвященный производству светодиодных экранов + мобильная версия.

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

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

Это решаемо. Есть канал с крутыми задачами по JS,HTML,CSS. Здесь ежедневно разбирают задачи построчно, чтобы избежать сложностей в прохождении собеседования 😎 Более того, канал подойдет, как и новичку, так и опытному программисту — тесты подготовлены для разного уровня мастерства и опыта.

Не теряй времени зря, прокачивай знания, решай задачи/тесты и проходи собеседования успешно 😉

Присоединяйтесь к нам прямо сейчас и станьте лучшим в своей области! 👉 @frontend_js_html!

Макет сайта посвященный интерактивной онлайн-доске.

Источник

Шаблоны по Figma | Страница 1 из 4

Шаблон сайта сайта производственной компании для Figma — скачайте прямо сейчас!

Шаблоны для Figma — Магазин медицинского оборудования

Шаблон сайта магазина медицинского оборудования для Figma — скачайте прямо сейчас!

Шаблоны для Figma — Корабельная компания

Шаблон сайта корабельной компания для Figma — скачайте прямо сейчас!

Шаблоны для Figma — Сайт морского порта

Шаблон сайта морского порта для Figma — скачайте прямо сейчас!

Шаблоны для Figma — Бар Петербурга

Шаблон сайта бара Петербурга для Figma — скачайте прямо сейчас!

Шаблоны для Figma — сайт школы иностранного языка

Шаблон сайта школы иностранного языка для Figma — скачайте прямо сейчас!

Шаблоны для Figma — сайт ресторана Петербурга

Шаблон сайта ресторана для Figma — скачайте прямо сейчас!

Шаблоны для Figma — теннисный клуб

Шаблон сайта теннисного клуба для Figma — скачайте прямо сейчас!

Шаблоны для Figma — Тюнинг ателье автомобилей

Шаблон сайта тюнинг ателье для Figma — скачайте прямо сейчас!

Шаблоны для Figma — Премиум-Салон красоты

Шаблон сайта премиум-салона красоты для Figma — скачайте прямо сейчас!

Шаблоны для Figma — Сайт лечебной аква терапии

Шаблон сайта лечебной аква терапии — скачайте прямо сейчас!

Шаблоны для Figma — Сайт центра лечения волос

Шаблон сайта центра лечения волос — скачайте прямо сейчас!

Курсы по веб-дизайну

Новичок в веб-дизайне?

Изучите работу программы Figma на практике. В серии видео я подробно показываю процесс создания дизайн-макета.

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

Веб-дизайн за 1 месяц

Знаете Figma, но процесс создания дизайн-макета вызывает сложности? Посмотрите плейлист, в котором я описываю процесс, по которому я создаю дизайн-макеты уже почти 6 лет.

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

2023 © d-e-n.info Копирование контента и размещение на других сайтах запрещено.

Источник

Figma template gallery

Discover 300+ templates made by our team to help you get an idea off the ground or shape it into something new. Use the menu above to get started, or keep scrolling to find inspiration from some of our favorite categories.

Figma favorites

Search through some of our curated and most popular templates.

Speed up your design workflow with our component based wireframe kit.

Go from project proposal to purchase ready in no time.

Make planning more inclusive, productive and fun

Brainstorming templates

Whether you think linearly or tend to jot things down as they come, use these free brainstorming templates to keep all of your notes in one place.

Organize details in a way that makes sense with this flow chart diagram.

Discover your greatest ideas yet in a collaborative brainstorming session.

Log data, deliverables, and dependencies in a project requirements doc.

Strategic planning templates

Get a jumpstart on your next strategic planning sessions with these free templates. Share them with your team for easy collaboration anytime, anywhere.

Break down your business model and streamline operations with a lean canvas.

Craft a clear and polished product launch announcement using our guiding template.

Evaluate your company as related to potential opportunities and challenges.

Research and design templates

Keep your design ideas, UX research, wireframes and QA notes all in one place with FigJam templates that work alongside your Figma tiles.

Keep track of user interview data with this shareable template in FigJam.

Keep track of user behavior and attitudes with an empathy map diagram.

Quickly brainstorm with images to unlock new levels of creativity.

Meeting templates

Plan projects, keep team members updated, and run smoother meetings with these free templates.

Get the most value out of any meeting with this shareable notes template.

Start your project on the right foot and cover all important topics.

Set the stage for introspection and collaboration.

Diagramming templates

Organize your thoughts and turn ideas into action with this collection of free diagramming templates.

Take comparisons to new levels by recording similarities and differences.

Give your data a fresh new look with colorful, shareable infographics.

Map out every role and plan for new hires with this org chart template.

Explore 1,000+ templates on the Figma community

Explore even more templates, widgets, and plugins—all built by the Figma community.

Источник