КодВеб | Дизайн База
Open in Telegram
✨ Здесь публикуются самые лучшие сниппеты с codepen.io, стильные макеты Figma, опросы, туториалы, статьи и прочее. Реклама: @shmyzna
Show more4 574
Subscribers
No data24 hours
-177 days
-3330 days
Posts Archive
4 574
👨💻 field-sizing: content
Окно для написания сообщений / статей с кнопками и возможностью редактирования и масштабирования.
🟠 Сложность: Сложный
🟠 Стек: #HTML #CSS #JS
🎨 Дизайн База | #CodePen
4 574
🎨 Laws of UX — законы восприятия в помощь UX-дизайнеру
Проект систематизирует десятки принципов вроде закона Хика, эффекта Зейгарник и правила Якоба. Всё оформлено просто, с иллюстрациями и пояснениями, как применять эти законы в реальных интерфейсах.
Подходит для тех, кто хочет усилить дизайн с опорой на поведение пользователей. Отличный инструмент для создания удобных, логичных и предсказуемых интерфейсов 🚀
🎨 Дизайн База | #Интересное #UXUI
4 574
👩💻 Ищем Frontend разработчиков. Релокейт, удалёнка, платим много!
Специально для Вас, собираем лучшие вакансии. Только вакансии с прямыми контактами в Telegram!
👩💻 Frontend 👣 Go
🤖 ML 👩💻 Java
🖼️ PHP 👩💻 Node.js
👩💻 Python 👩💻 C#
🖥 SQL 🔎 QA
👩💻 DevOps 👩💻 UX
👩💻 Mobile 👩💻 Analyst
💼 1C
Подпишись чтобы не упустить свой шанс получить лучший оффер!
4 574
👩💻UJJO
Свежий и креативный макет лендинга рекламы острых соусов
🟠 Сложность: Средняя
🟠 Адаптивность: Нет
🟠 Язык: Английский
🎨 Дизайн База | #Макеты #Figma
4 574
🎨 Вопрос с собеседования: Что такое дизайн токены в Figma, как их внедряют в дизайн-системы и почему это важно для масштабирования и поддержки больших проектов?
Сначала подумайте, а потом можете свериться с ответом 😊
Ответ: Дизайн токены — это стандартизированные переменные (цвета, шрифты, размеры, отступы), заданные в цифровом формате и используемые по всему проекту через глобальные стили Figma. Они облегчают синхронизацию между дизайном и разработкой: экспортируются в код (например, через плагины), позволяют менять параметры “одним кликом” без ручного поиска по макетам. Это основа масштабируемых дизайн-систем: снижают количество ошибок, ускоряют редизайн, делают переход к автоматизации (DesignOps) и унификации интерфейса во всех продуктах компании.
Понравился вопрос? Поставьте любую реакцию, нам интересно ваше мнение 🚀
🎨 Кодвеб | #Вопросы #Figma
4 574
В айти делать нечего без технического английского!
Английский программиста - самый простой и удобный способ выучить it термины и профессиональный английский. Даже опытные кодеры нас читают!
Подпишись: @iteng
4 574
✏️ Vectr — бесплатный онлайн-редактор для создания векторной графики
Простой и удобный инструмент, который работает прямо в браузере: рисуйте формы, добавляйте текст, редактируйте SVG без установки софта. Поддерживает слои, сетки, экспорт и совместную работу.
Идеален для быстрых макетов, иконок, логотипов и любого лёгкого дизайна. Всё бесплатно и без лишней возни. 🎨
🎨 Дизайн База | #tools #ai
4 574
🎨 Вопрос с собеседования: В чём преимущество “Instance Swap” в компонентах Figma и как этот механизм помогает ускорить создание сложных интерфейсов?
Сначала подумайте, а потом можете свериться с ответом 😊
Ответ: “Instance Swap” позволяет быстро подменять вложенные компоненты (например, менять иконки, карточки, элементы меню) без потери связей и стилей. Это ускоряет вариации интерфейса: можно менять дизайн целых блоков одним кликом, не перестраивая всю структуру заново. Такой подход критичен для масштабных UI-китов, где сотни однотипных элементов, но с разным наполнением. Instance Swap поддерживает логику дизайн-системы и минимизирует дублирование.
Понравился вопрос? Поставьте любую реакцию, нам интересно ваше мнение 🚀
🎨 Кодвеб | #Вопросы #Figma
4 574
Айтишники, это вам — в телеграм есть комьюнити по каждому направлению в IT
Там есть буквально всё: чаты для общения, тонны материала(книги, курсы, ресурсы и гайды), свежие новости и конечно же мемы
Выбирайте своё направление:
💩 Frontend 🐍 Python
🐧 Linux 👩💻 С/С++
👩💻 C# 🤔 Хакинг & ИБ
📱 GitHub 🖥 SQL
👩💻 Сисадмин 🤟 DevOps
⚙️ Backend 🖥 Data Science
🧑💻 Java 🐞 Тестирование
🖥 PM / PdM 👩💻 GameDev
🧑💻 Golang 👣 Rust
🧑💻 PHP 💻 WebDev
🖥 Моб. Dev 🖥Анали.(SA&BA)
👩💻 Дизайн 🖥 Нейросети
💛 1C 🤓 Книги IT
➡️ Сохраняйте в закладки
4 574
👩💻 LUXTRIPS
Сайт туристического агентства
🟠 Сложность: Средний
🟠 Адаптивность: Есть
🟠 Язык: Английский
🎨 Дизайн База | #Макеты #Figma
4 574
🤔 Какой способ позволяет задать ограничения (constraints) для элементов внутри контейнера?
4 574
🔥Свежий слив курсов от крупных онлайн школ!
Python - ( 170 уроков)
Flask - (122 уроков)
Git - (74 уроков)
OpenCV - (144 уроков)
Flask - (59 уроков)
GameDev - (137 уроков)
Pyramid - (96 уроков)
AIOgram - ( 34 уроков)
Ruff - (82 уроков)
HTTPX - (57 уроков)
Pyramid - (72 урока)
Django - (132 урока)
NumPy - (46 урока)
Pillow - (74 урока)
PyTorch - (32 урока)
Pymorphy2 - (42 урока)
Получить доступ - https://t.me/+JoDi1w8uygRjMTgy
Ссылка для входа доступна только 48 ч., во избежание блокировок со стороны правообладателя.
4 574
👩💻 MURAN
Сайт магазина косметики
🟠 Сложность: Средний
🟠 Адаптивность: Нет
🟠 Язык: Русский
🎨 Дизайн База | #Макеты #Figma
4 574
🎨 Вопрос с собеседования: Как работают Boolean-операции (Union, Subtract, Intersect, Exclude) в Figma, для чего их используют при создании иконок, и какие ошибки совершают новички?
Сначала подумайте, а потом можете свериться с ответом 😊
Ответ: Boolean-операции позволяют создавать сложные фигуры путём объединения или вычитания простых векторных объектов. Union — объединяет фигуры в одну, Subtract — вырезает одну форму из другой, Intersect — оставляет только пересечение, Exclude — удаляет общие области. Они особенно полезны для создания иконок и нестандартных графических элементов “без лишних слоёв”. Ошибки новичков: неправильный порядок слоёв, “замыкание” фигур, отсутствие группировки после операций — это затрудняет редактирование и может привести к некорректному экспорту SVG.
Понравился вопрос? Поставьте любую реакцию, нам интересно ваше мнение 🚀
🎨 Кодвеб | #Вопросы #Figma
4 574
👩💻 XIAOMI
Сайт магазина электроники
🟠 Сложность: Средний
🟠 Адаптивность: Есть
🟠 Язык: Русский
🎨 Дизайн База | #Макеты #Figma
4 574
🤔 Какая операция в Figma удаляет область пересечения двух фигур, оставляя только внешние части?
4 574
🎉 Большой розыгрыш от крупнейшего IT-медиа 1337, легендарного паблика Рифмы и Панчи, канала Техно.
Победителей будет много, а для участия нужны лишь пара кликов:
1. Подписаться на Рифмы и Панчи, 1337 и на Техно.
2. Нажать «Участвовать» под этим постом
Что по призам:
1 место - Iphone 16 Pro 2 место - PS5 Slim 3 место - Nintendo Switch 2 4-10 места - 10 000 рублей на картуПобедителей определим 21 июля в 18:00 МСК. Всем удачи!
4 574
👩💻 ZEN
Макет сайта банковских услуг.
🟠 Сложность: Легкий
🟠 Адаптивность: Нет
🟠 Язык: Английский
🎨 Дизайн База | #Макеты #Figma
4 574
🎨 Вопрос с собеседования: Как работает интерактивное прототипирование в Figma, какие сценарии можно моделировать и в чём его ограничения по сравнению с полноценной фронтенд-версткой?
Сначала подумайте, а потом можете свериться с ответом 😊
Ответ: Прототипирование в Figma — это настройка переходов, кликабельных зон, анимаций между экранами или состояниями внутри макета. Это удобно для презентаций, UX-тестирования, согласования сценариев с заказчиком или командой. Сценарии: клики, свайпы, переключения, анимации, автопереходы по таймеру. Ограничения: нельзя реализовать сложную логику, обработку данных, интеграцию с сервером или динамическую подгрузку контента. Это “визуальный клик-думми”, а не готовый продукт, но отлично решает задачи визуального согласования.
Понравился вопрос? Поставьте любую реакцию, нам интересно ваше мнение 🚀
🎨 Кодвеб | #Вопросы #Figma
4 574
⚡️ Бесплатное обучение HTML/CSS, JavaScript, Angular с нуля с поддержкой от наставника
Можно неделями гуглить инфу по JS и смотреть туториалы, читать книги, делать задачки в тренажёрах,но всё равно не понимать, как из этого собрать нормальынй сайт.
С 20 июля действующий тимлид и опытный разработчик запускает бесплатное обучение в своём телеграм-канале. Участники разработают фронтенд для своего киносайта
Что вы сделаете на обучении
— Сверстаете макет своего кинотеатра под присмотром тимлида
— Затем добавите JavaScript (и это не пара скриптов для модального окна)
— И перепишете проект на Angular
Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля
🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как джуну стартовать на фрилансе или устроиться на работу
Помимо работы с кодом он даст пошаговый план изучения всего, что нужно современному фронтенду.
Поделится способом трудоустройства.
Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией
Подписывайтесь, осталось 30 мест
Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду
📌 Если вы уже пробовали изучать фронтенд, но каждый шаг — это гуглинг, страдание и тысяча вкладок, —
приходите на интенсив. Увидите путь от вёрстки до Angular и сможете продолжать изучать фронтенд без хаоса в голове.
👉Участвовать бесплатно
Подготовительные уроки уже доступны
Available now! Telegram Research 2025 — the year's key insights 
