Бесплатная дизайн-система Prometheus UI в Figma с 40+ элементами и примерами экранов

Привет! Я Дима — создатель открытой и бесплатной дизайн-системы Prometheus UI в Figma. В проекте уже более 40 элементов, а цвета, размеры и отступы заданы токенами (Variables).

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

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

⁕ Оформленный кейс дизайн-системы можно посмотреть на моем сайте.

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

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

Например, чем отличается checkbox от toggle, switch, toggle switch и toggle checkbox? А отличия действительно есть, и их важно понимать, чтобы называть себя senior-дизайнером или арт-директором.

А вообще сейчас даже к дизам middle-уровня огромные требования к UI, ибо рисование — наше все. Без хороших хардов в UI никого не будет интересовать ваш продуктовый подход — в 90% случаев это так.

К UI относятся не только сами элементы, но и всевозможные их состояния, переходы, поведение.

Дизайн-система построена на 8px сетке, поэтому вы не найдете отступы в 10 или 20 пикселей, что будет приятно знающим новичкам или опытным дизам.

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

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

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

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

Все стили текста базируются на шрифте PT Sans, у которого всего два начертания! Не нужно мудрить и путаться — сделал либо Bold, либо Regular, и не паришься. Да, не везде это подойдет, но я пока проблем не заметил.

Я собрал основные брейкпоинты для верстки и создания дизайна, а также разлиновал сетки и указал размеры, чтобы было проще разобраться и запоминать, что да как.

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

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

В разделе с эффектами вы также найдете обводку для состояния Focused — получилось очень гибко и эстетично.

В качестве основы я взял иконки из Staris UI icons, а затем доработал их: провел ревизию слоев, добавил состояния для некоторых иконок, скорректировал размеры и цвет.

Иконки выполнены в стиле Outline, т.е. можно настраивать толщину линий, что для меня удобнее Filled.

Для визуального кайфа я оформил каждый элемент в стиле новомодного Bento, поэтому пользоваться самой ДС-кой будет приятно — этому уделено особое внимание!

Первое — мне очень нравится проектировать системные штуки. Я выстраивал дизайн-процессы в команде Маргулана Сейсембая, делал свою аудио-систему из советских колонок, а сейчас веду базу знаний в Obsidian и конспектирую туда базовые научные книжки (Освальд Шпенглер, Юрий Орлов, Джозеф Вейценбаум).

А дизайн позволяет и зарабатывать, и выстраивать сложные системы, получая от этого удовольствие — поэтому я и ввязался в проектирование ДС.

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

Нет работы — я найду ее сам :)

Кстати, я сейчас свободен и активно откликаюсь на hh, поэтому буду рад пообщаться и рассмотреть ваши предложения о сотрудничестве!

Если вам понравилась ДС, вы можете использовать ее в своих проектах, дорабатывать, переиздавать, делиться с друзьями и знакомыми, высказывать критику — буду рад любой продуктивной и адекватной активности!

🔥Остальные компоненты вы можете рассмотреть бесплатно и самостоятельно по ссылке: дизайн-система Prometheus UI в Figma community.

🔥 А вот оформленный красивый кейс дизайн-системы (первый блок можно увидеть ниже)

----------

Если вы захотите посмотреть больше моих проектов, то сможете это сделать на моем личном сайте.

Также у дизайн-системы есть канал в тг, где можно задать вопрос в комментариях

#ux #ui #design #дизайн #продуктовыйдизайн #визуал