КодВеб | Дизайн База
4.55K subscribers
570 photos
122 videos
1 file
989 links
Здесь публикуются самые лучшие сниппеты с codepen.io, стильные макеты Figma, опросы, туториалы, статьи и прочее.

Реклама: @shmyzna
Download Telegram
🎨 Объёмные иконки в Figma за 5 минут

Создание реалистичных 3D-элементов казалось прерогативой тяжёлых дизайн-инструментов. А можно ли превратить плоскую иконку в объёмную, не покидая Фигму?

Пошаговый туториал с двумя плагинами: сначала разбираемся с базовой формой и контуром, затем добавляем градиенты и тени для глубины, финишируем настройкой освещения. На выходе получим готовую 3D-иконку для интерфейсов.


Универсальный метод для дизайнеров, которые хотят разнообразить визуальный язык проектов объёмными элементами, не перегружая процесс 👨‍🎨

📺 Смотреть видео

🎨 Дизайн База | #Figma #Дизайн #Плагины
🎨 Эффект Tilt Shift — точечное размытие в Figma

Размытие — одна из ключевых техник в дизайне интерфейсов. Но стандартные методы не всегда дают нужный контроль над эффектом.

В Figma нет встроенного инструмента для точечного размытия, но есть обходной путь с использованием Gaussian Blur и Frame Blur — показываем, как эмулировать эффект tilt shift для глянцевых интерфейсов, стекол и морфизма.


Ценная находка для дизайнеров, которые работают над проектами с современной эстетикой без необходимости вставлять отдельные изображения или использовать внешние плагины 🎯

📺 Смотреть видео

🎨 Дизайн База | #Figma #Design #Гайды
🎨 3D SVG — преврати любой SVG в 3D логотип

Нужен срочно 3D-логотип для презентации или сайта? Есть сервис, который делает всё буквально за пару минут.

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


Сервис бесплатен для тестирования, что круто для быстрых лэйаутов, а полноценный пакет выходит относительно недорого для разовых задач 🤑

🌐 Перейти на сайт

🎨 Дизайн База | #Tools #Дизайн #3D
🎨 Анимация удаления по свайпу в Figma

Хочешь добавить интерактивности в мобильные интерфейсы? Создание компонента "Проведите для удаления" — отличный способ оживить списки и сделать UX более интуитивным.

Пошаговое руководство по созданию полностью интерактивного свайп-компонента: настройка слоев, работа с Auto Layout, создание анимаций перехода и реализация drag-эффектов для реалистичного поведения.


Отличный материал для дизайнеров мобильных интерфейсов, которые хотят освоить продвинутые техники работы с компонентами в Figma и создавать профессиональные прототипы 🎯

📺 Смотреть видео

🎨 Дизайн База | #Figma #UI #Гайды
🎨 Как не стать злодеем UX

Соглашаешься ли ты с условиями, не читая? Тогда знай, какие манипуляции могут скрываться за "простыми" интерфейсами.

Тёмные паттерны UX: скрытые кнопки отписки, трёхшаговая система оплаты, превращающаяся в лабиринт, навязчивые подписки, которые сложнее прервать, чем пройти босса в хардкорном Souls-like. Причина — дизайнерские решения, направленные на манипуляцию, а не на удобство.


Идеальное чтение для дизайнеров и разработчиков, которые хотят создавать честные интерфейсы и не поддаваться соблазну манипулятивных паттернов 🛡️

🌐 Перейти на сайт

🎨 Дизайн База | #UX #Design #Разбор
🎮 Тренажёр кривых Безье онлайн

Хочешь освоить инструмент "Перо" в графических редакторах, но не знаешь с чего начать? Эта игра поможет прокачать навыки работы с кривыми Безье через практические задания.

Интерактивный курс обучения с постепенным усложнением: от простых фигур до сложных контуров. Игровая механика позволяет отслеживать прогресс и сравнивать результат с идеальным вариантом.


Отличный способ для дизайнеров и разработчиков отточить владение ключевым инструментом векторной графики без скучных туториалов 🎯

🌐 Перейти на сайт

🎨 Дизайн База | #Design #Tools #Гайды
🎨 Ответы на вопросы веб-дизайнеров

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

Основные темы: выбор между курсами и самообучением, поиск первой работы, формирование портфолио, стратегии трудоустройства в топовые компании. Автор делится практическими советами на основе реального опыта.


Полезный материал для тех, кто только входит в профессию и хочет избежать типичных ошибок на старте карьеры 🤔

🌐 Перейти на сайт

🎨 Дизайн База | #Дизайн #Карьера #Разбор
🎨 Анимированное меню в Figma

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

Что разберём: создание компонентов для состояний меню, настройка переходов между экранами, работа с прототипированием и smart animate для плавных анимаций. Всё на реальном примере мобильного приложения.


Отличный способ быстро прототипировать интерактивные элементы и показывать клиентам, как будет работать финальный интерфейс 🚀

📺 Смотреть видео

🎨 Дизайн База | #Design #Figma #UI
1
🎨 Ускоряем дизайн мобайла с Figma Variables

Разрабатываешь приложения под iOS и Android и устал от дублирования макетов для каждой платформы?

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


Эффективный подход, который экономит до 50% времени дизайнера и ускоряет подготовку к разработке — отличный лайфхак для команд, делающих кроссплатформенные продукты 🎯

🌐 Перейти на сайт

🎨 Дизайн База | #Figma #Дизайн #Tools
1
🎨 Penpot: открытая альтернатива Figma

Ищешь полнофункциональный инструмент для дизайна, который не привязывает к подписке и работает локально?

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


Отличный вариант для команд, которые ценят независимость от SaaS-сервисов и хотят полный контроль над своими дизайн-активами 🚀

🐱 Перейти на GitHub

🎨 Дизайн База | #Design #Tools #OpenSource
💡 Авторизация через приватный ключ вместо пароля

Устали от бесконечных паролей, двухфакторной аутентификации и неудобных менеджеров паролей? Автор предлагает принципиально иной подход к авторизации — через приватный ключ, что может изменить UX привычных сервисов.

Ключевая проблема: текущие системы безопасности создают нагрузку на пользователя — сложные пароли, 2FA-коды, биометрия. SecretAuth предлагает альтернативу — ассиметричное шифрование с клиентским приватным ключом, который хранится только у пользователя. Система работает как SSH-ключи для веба.


Идеальный инструмент для проектов, где важно сочетать безопасность с удобством пользователей, особенно для SaaS, криптовалют и финансовых сервисов 🔐

🌐 Перейти на сайт

🎨 Дизайн База | #UX #Security #Разбор