websitevice — новая библиотека сайтов для воровства идей вдохновения

👉 @PortalToDesign

Совет: не допускайте повторного переноса текста при появлении полосы прокрутки.
Использование scrollbar-gutter: stable решает эту проблему.

👉 @PortalToDesign

Совет по дизайн-инжиринг:

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

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

const card = document.querySelector(".notification");
const shadow = document.querySelector(".shadow");

card.animate(
  [
    { transform: "translateY(0)" },
    { transform: "translateY(-160px)" },
  ],
  {
    duration: 900,
    easing: "cubic-bezier(.64,0,.78,0)"
  }
);

shadow.animate(
  [
    { opacity: 0.5, transform: "scaleX(1)" },
    { opacity: 0, transform: "scaleX(.35)" },
  ],
  {
    duration: 700,
    easing: "ease-out"
  }
);

👉 @PortalToDesign

В Figma появился новый инструмент для автоматизации рутинных задач — Check Designs.
Теперь проверка макета на соответствие дизайн-системе занимает считанные секунды.

Чтобы проверить фрейм, просто нажмите правой кнопкой мыши и выберите Check Designs.
Инструмент мгновенно подсветит:

Стили и переменные: привязаны ли цвета и типографика к вашим Libraries.
Доступность: соответствуют ли цвета требованиям по контрастности.
Консистентность: совпадают ли отступы и радиусы скругления с настройками дизайн-системы.
Состояние компонентов: есть ли «отсоединённые» (detached) компоненты, которые требуют обновления.

Все найденные проблемы можно исправить в один клик, а после завершения проверки — изменить статус макета на Ready for dev.
Функция доступна для всех платных подписок Figma.

👉 @PortalToDesign

Прокачай чувство UI-анимации 💪

Набор быстрых упражнений для тренировки навыка motion design: ищешь ошибки в анимации, называешь их и исправляешь.

→ https://emilkowal.ski/ui/train-your-judgement

Автор: Emil Kowalski

👉 @PortalToDesign

zcool — а это китайская копия беханса, с необычными работами китайских дизайнеров

👉 @PortalToDesign

Группы кнопок для компактных действий над продуктом.

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

👉 @PortalToDesign

Как я использую Claude Code и Remotion для создания анимированных диаграмм.
Это не один промпт.

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

Через Claude собираю компоненты, которые принимают этот формат и уже внутри фиксируют правила: дизайн-система, паттерны анимации, правила раскладки.

Дальше я просто описываю задачу обычным языком, например: «сделай блок-схему для проверки уровней доступа в скрипте», а Claude переводит это в наш формат входа:

flowchart TD
  t1[Tier 1<br/>read-only]
  t2[Tier 2<br/>in-project writes]
  t3[Tier 3<br/>everything else]
  action[Action] --> t1
  action --> t2
  action --> t3
  t1 --> skip([Skips classifier])
  t2 --> skip
  t3 --> classifier{Classifier}
  classifier --> approve[Approve]
  classifier --> deny[Deny]

Компонент дальше делает всё сам: раскладку, стили, появление узлов и связей. Плюс обрабатывает события для дальнейших шагов — например, “точка трассировки”, которая идёт по пути и подсвечивает узлы.
В конце я оборачиваю всё в отдельный CRT-шейдер компонент.

В итоге помогает общий язык с агентом. Когда я пишу «rise in fast on enter», он понимает это как: быстрое появление с движением вверх, из заданного смещения, с ускоренной длительностью и конкретной кривой Безье.

👉 @PortalToDesign

Знаешь, что PNG по сути сделали назло?

А JPEG просто выкидывает примерно половину цветов в картинке, потому что ты всё равно не заметишь.

Читай главу про сжатие изображений:

https://makingsoftware.com/chapters/image-compression

👉 @PortalToDesign

Хочешь использовать Claude Design без подписки на Claude?
Познакомься со skill baoyu-design, который переносит дизайн-движок Claude прямо в Hermes, Cursor, Claude Code, Codex или твоего локального агента.
Обычный промпт → получаешь отполированный UI-макет, прототип, wireframe или deck в виде самодостаточного HTML: весь CSS, JS и ассеты уже внутри.

Плюсы:
• 100% локально, ничего не нужно загружать
• Можно итерироваться через подход “point & edit” в превью
• Поддерживает офлайн-импорт Figma .fig файлов
• Результат сразу попадает в твой проект, его можно хранить в git
• Также можно экспортировать в PDF/PPTX

Репозиторий: https://github.com/JimLiu/baoyu-design

👉 @PortalToDesign

Remix Icons — здесь вы найдёте большую коллекцию бесплатных векторных иконок в нескольких стилях и популярных категориях

👉 @PortalToDesign

Figma выпустила расширение для Chrome, которое позволяет импортировать любую веб-страницу прямо в Figma, автоматически разбивая её на полностью редактируемые слои.

Что умеет:

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

Ссылка: https://figma.bot/ChromeExt

👉 @PortalToDesign

godly — сайт, где собрана огромная галерея красивого дизайна для вдохновения.

👉 @PortalToDesign

«Об этом никто не знает, но это можно сделать в Figma.»

👉 @PortalToDesign

Аллилуйя, в Figma наконец-то завезли группировку вкладок.

👉 @PortalToDesign

15 мощных расширений для Chrome для разработчиков, дизайнеров и создателей контента

Loom — расширение для записи экрана, которое позволяет быстро записывать видео с экрана вместе с голосовыми комментариями и делиться ими.
Grammarly — ИИ-помощник для письма, который проверяет грамматику, орфографию, тон и читаемость текста прямо во время набора.
ColorZilla — инструмент для выбора цветов, позволяющий определять и копировать цвета с любых веб-страниц.
WhatFont — помогает быстро определить, какие шрифты используются на сайте.
Site Palette — генерирует цветовую палитру любого сайта для поиска дизайнерских референсов и вдохновения.
GoFullPage — делает полноразмерные скриншоты страниц без необходимости прокручивать их вручную.
Page Ruler — измеряет ширину и высоту элементов страницы в пикселях.
Lightshot — инструмент для быстрых скриншотов с возможностью редактирования и мгновенного обмена изображениями.
Imageye — находит все изображения на странице и позволяет быстро скачать их.
Responsive Viewer — помогает разработчикам проверять, как сайт выглядит на разных размерах экранов и устройствах.
CSS Viewer — показывает CSS-свойства элементов страницы при наведении курсора.
Web Developer — набор инструментов для веб-разработки, встроенный прямо в браузер.
JSON Viewer — форматирует и отображает JSON в удобном для чтения структурированном виде.
Lighthouse — автоматизированный инструмент от Google для анализа производительности сайта, доступности, SEO и соответствия лучшим практикам.
Wappalyzer — определяет технологии, фреймворки, CMS и другие инструменты, на которых построен сайт.

👉 @PortalToDesign

Играли со шрифтами и проиграли

👉 @PortalToDesign

Добавляем классную градиентную обводку для карточки за считанные минуты.

👉 @PortalToDesign