pbcomponentsUI component library for React and Vue with Typescript and Tailwind- Development
- Frontend
- Design
- Tools
pbstylesBasic styles for quick prototyping- Development
- Frontend
- Design
- Tools
Tailwind UIBeautifully designed, expertly crafted components and templates, built by the makers of Tailwind CSS. The perfect starting point for your next project.shadcn UIBeautifully designed components that you can copy and paste into your apps. Made with Tailwind CSS. Open source.Radix UIStart building your app nowheroiconsBeautiful hand-crafted SVG icons, by the makers of Tailwind CSS.Tokens Studio for FigmaTokens Studio for Figma is a Figma Plugin allowing you to integrate Tokens into your Figma designs.Styles to VariablesOnly compatible with Color styles (solid and transparent).DestroyerLet Destroyer recursively detach instances, remove auto layouts, detach styles and variables within your current selection so you can iterate faster!RiveBuild interactive animations that run anywhereComponent CTI StructureОбъяснение CTI структуры дизайн-токенов- Design
- Frontend
- Development
Дизайн-токеныПолезные ссылки про дизайн-токены под рукойПодборка5 ссылок- Design
- Frontend
- Development
It's Nice ThatДля референсовIntegrating Design Tokens With TailwindИнтеграция дизайн-токенов в тему TailwindCSSDesign Tokens Format ModuleДокументация по дизайн-токенамCanduNo-code UI component builder for SaaS productswunderbucket.ioTurn local folders into websitesstyle-dictionaryПакет для компиляции дизайн-токенов в csszeroheightПространство для документирование дизайн-системы для всех участников продуктовых командAwesome design systemsБольшая подборка дизайн-системtimestripeДизайн твоего времениTailwindcssCSS frameworkStorybookИнструмент для сборки UI компонентовКарта компетенций продуктового дизайнераОт Юрия ВетроваOverlayFigma to clean codeС чего начать дизайн сайтов?Стартовый шаблон в FigmaВизуальный редактор статичного сайтаОтличное решение для сайтов без бекенда, просто удобный редактор для изменения контента на страницеSortable JSСортируемый перетаскиванием (drag and drop) спискиПробелыТаблица с пробелами, примерами, кодами и возможностью скопировать в буферТренажер для развития навыков вёрсткиЭто тренажер Ильяхова. Развивает редакторскую насмотренность, помогает лучше верстать.Как вскрытие может сделать тебя крутым фрилансеромПо сути обычная ретроспектива по agile, но без agileЭмпатия — это суперсилаИнтервью с руководителем отдела дизайна GoogleДизайн-кабакCамый большой коллективный блог про дизайн на русском языке7 фундаментальных приемов психологии в дизайнеВ заголовке написано «должен знать каждый дизайнер», громко сказано, но ознакомиться точно стоитВизуальная культураПро вкус, идеалы, красоту, доверие, заботу, любовь и визуальную среду в окруженииЛожная простота в UI дизайнеПроще не всегда значит лучшеProduct huntПодборки лучший приложений за деньTable CreatorПлагин генератор таблиц для FigmaБардак в коммуникацииПочему Basecamp взялась за разработку почтового сервиса HeyНедоверие к дизайну«Что-то не то», «Можно что-то интереснее», «Мне не нравится»10 ошибок при работе с цветом в UIСамые распространенные ошибки дизайнеров при работе с цветом в интерфейсе.Модель «двойного алмаза»Как управлять дизайн-задачами и проектамиДизайн-система в FigmaТатьяна Маслакова рассказывает как организовать дизайн-системуCross-sale и upsell инструментыКак увеличить средний чек?Алексей НовичковСделал «Финолог», «Мегаплан» и «Оптима»Онлайн журнал для дизайнеровПродуктовый дизайн (UX/UI), брендинг и аналитикаБиблиотека компонетов от iviМне нравиться что ivi выглядит везде одинаково, хороший пример кроссплатформенной дизайн-системыПроектирование доступных цветовых систем в StripeПодробное исследования о том как создать разнообразную цветовую палитру, но при этом учесть все нормы доступностиPitchПродвинутое создание красивых презентацийВсе о дизайне кнопокВсе, что вам нужно знать о дизайне кнопок в интерфейсеstorybook-addon-figmaПозволяет добавить пример макета прямо из фирмы для сравнения компонентовHamokСервис для быстрого создания презентаций для макетов на разных устройствахColumnsПриложение для создание множества разных спискомСтать профессионаломТри шага в верном направленииСетка для печатиИнструмент для настройки разных сеток и сохранении для печатиSpacing ManagerПомогает настроить внутри одного компонентаГлавред в FigmaПлагин главреда в FigmaMap MakerДобавляет карту в проектПолезные плагины для FigmaЭто список плагинов, которым я смог найти применениеПодборка13 ссылок- Figma
- Design
Get WavesГенератор волн и кривых с заливкойWave & СurveГенератор кривых линийRedlinesПомогает документировать макет для разработкиMarka Email GeneratorГенерирует шаблоны электронной почты HTMLSticky NotesСтикеры-заметки для размещения в проектеTypographerОтформатируйте текст с помощью типографских элементовTypografСоздаёт типографические элементыDesign LintПроверка макетаWebgradientsГенератор градиентовContentful to FigmaПозволяет использовать данные из Contentful в макетахСпециализация дизайнераКак можно сужать свою специализацию10 мелких ошибок в дизайнеВозвращение правила: «Не заставляйте меня думать»Зачем дизайнеру дружить с Tilda?Плюсы и минусы использования ТильдыКак оценивать свой прогрессКак оценивать свой прогресс и что считать нормальным развитием?Работа в офисе: плюсы и минусыАвтор делиться личным опытом после перехода с удаленки в офисRipple эффектАнимация эффекта волныНеоморфизмГотовые стили оформленияКлючевые метрики для дизайн-менеджераКак понять эффективность дизайн-командыПлагины Figma 11 частьПросто хочу сохранить для себя ссылку на эту рубрикуЧекбоксы и переключателиПро семантику элементов и когда их использоватьgranim.jsАнимированные градиентыТипографика digital-продуктаКак собрать систему текстовых стилей сложного сервиса, не уходя в крайности.Про стили наведения, фокуса и активного состоянияПодробно про каждое состояние и почему их надо разделятьИнтуитивно понятный call to action Очень простые, но полезные советы по организации основных действий экранаДизайн деструктивных действийИспользуйте красные предупреждающие сигналы и другоеКомпозицияПлохая композиция убьет сайт, даже если контент интересенПсихология рейтинговых системДолжны ли мы перестать использовать звезды?Продуктивность это управление вниманиемА не управление временем10 эвристических принциповЭвристические принципы помогают определить, где дизайн интерфейса не обеспечивает хороший опытМодульные сетки в работе UX-дизайнераМного информации про сетки, как их использовать и как это влияет на пользователейКак анимация влияет на UXАнимация как часть более качественного взаимодействия с продуктомСкруглённые углы проще для восприятияНемного теории почему скруглять углы это хорошоСкруглённые или остроугольные?Че же блин делать с углами? Разбор с аргументамиПопулярные мифы о методах обученияПолезно для дизайнеров, чтобы не питать иллюзий про получение опыта пользователяManifestСтранные, но интересно сделанные заметки прямо в браузере и на одной страницеAtlassian designКак устроена дизайн-система Atlassian Как стать лидером творческой командыАбстрактор об очевидно, но очень интересноНе мудрите с формами входаПлохие и хорошие паттерны формы авторизацииМир не вертится вокруг UXПрекрасная статья об экзестенциальном кризисе и понимании дизенром ценности своей работыВизуальный сахарПро злоупотребление визуальным сахаром в дизайнеКак упростить дизайнСобрание эвристик для понимание процесса упрощенияDesign tokens with FigmaКак построить работу с дизайн токенама с помощью Figma API50 day’s challengeОписание опыта участия в челенджеuxcrowdТестирование вашего сайта реальными пользователямиАнимации и загрузкиНесколько примеров анимаций для улучшения пользовательского опытаПодборка8 ссылок- Design
- Frontend
Search by MuzliГугл для дизайнеровГенератор чатаДля создания реалистичных скриншотовFigma — как единая точка правдыПочему Figma это хороший инструмент для всех кто участвует в процессе дизайнаEmojipediaБиблиотека всех эмоджиCSS loading animationsНесколько разных и готовых анимаций для отображения загрузкиМощь системы поощренийПеревод статьи автор оригинала — Николас КрамерМодальностьОдна из концепций UX, которую большинство дизайнеров не до конца понимаютКак спрашивать у пользователей при проведении UX-исследованияОчень хорошая тема для тех кто проводить интервьюEva IconsOpen Source iconsAnimate on ScrollЛегковесная библиотека для создания действий по скролуВсё (или почти всё) о пробелеПробел не так прост как кажется, особенно если причитать статьюChecklist DesignСписок из пунктов что надо сделать для реализации дизайна разных сущностейПодсказка для анимации UIНесколько хороших примеров анимации взаимодействия элементовПравильное использование анимации в UXДостаточно примеров как стоит делать и почемуДизайн система в фигмеОчень подробный пример как это может бытьСпецификация никому не нужнаГлавная мысль: спецификация не тех задание, а база знанийПро удаленную работуТут не про дизайн, но применимо ко всем на удаленкеНабор градиентовКрасивые, многоцветные, плавные и не оченьПользовательские сценарииЧто это такое, как и для чего их нужно строитьПримеры UX от известных приложенийПодробные разборы кейсов от известных компанийАнимация в браузереCSS анимация прямо в браузереЗакрой Dribbble3 вещи, которые помогут в карьере больше чем портфолиоSketch или FigmaРаунд #100500Pulse effectНа чистом cssАвтокомплитАвтокомплит — для помощи человеку, не для проверкиЧто такое UX/UI дизайн на самом деле?Объяснение для новичков и тех кто совсем не в темеЧто такое UX/UI?Очередная статья о том что это такоеОтличие UI от UX?Подробный разбор часто используемых терминовПочему дизайн-систему вы делаете не вовремя?Из статьи складывает ощущение что дизайн-система всегда не вовремя и заморачиваться вообще не стоитfullstack-дизайнерДля меня идеальное самоопределениеТри уровня дизайнаДизайн продукта, дизайн взаимодействия и визуальный дизайнСоздание интерактивной картыНовый инструмент для создание интерактивной карты пользовательского поведенияОпределение понятия «Дизайн-система»Достаточно точно и подробно описано что это вообще такое и где можно посмотреть примеры использованияДжуниор в 33Как быть если тебе 33 года а ты все еще джуниорCSS — это дизайн!Почему дизайнеру полезно уметь верстатьТестовые в студию ЧулаковаЕсть интересные работы и подробные презентацииДизайн в условиях хакатонаСоветы вполне подходят не только для хакатона, но и для MVPКак стать UX/UI дизайнеромБез образованя и опытаРассылка «Интерфейсы без шелухи»Уже не частая, но не менее интересная рассылкаСпрвочник материалов по дизайну от Антона ЖияноваСтруктурированные подборки материалов по многих важным вопросамКаталог дизайн системНа мой взгляд у рамблера самая крутая система из всех представленных, но они все на уровнеПример прелоадераПочти как на медиумеFigma freebiesДизайн системы, дашборды и всякое такое, но может и полезные плагины появятсяПроцесс выбора шрифтаОдна из многих, но достаточно неплохая статья как можно подойти к выбору шрифтаIcons setВ заголовке написано что набор иконок для лендингов, но использовать можно хоть где. Разделены тематическиКонвертировать psd в sketch файлОт AvocodeОптическое выравнивание компонентовНа примере модального окнаИсходник альбома для прототипированияАльбомный лист в точку, можно проектировать экраны любого размераАнимация с помощью svgОчень реалистичный вариант создания несложной (а можно и сложной) анимации без регистрации и смсTinkoff Design SystemОдин из подходов к организации дизайнаГайдлайн от КонтураПодробный гайдлайн по элементам интерфейса от контура, стоит посмотреть не как руководство к действию, а пример организации информацииДокументы для фрилансера от ТЖЕсть разные варианты документов, если вариант договора от ТЖ не понравилсяДокументы для фрилансераВариант договора от ТЖБиблиотека для анимацииРазнообразные примеры анимации, жаль что в вакуумеОтличный пример переверстки объявленияКратки, но по делу разбор переверсткиКак больше никогда в жизни не работать в стол Максим ИльяховВидео не о том как не делать в стол, а как не браться за проекты которые не будут реализованыВарианты верстки подчеркивания ссылокКратко собраны возможные варианты подчеркивания ссылок, есть даже вариант через backgroundFont AwesomeНаверное, самый популярный и большой пак иконок 
