ArtJoker UI Kit в Figma: вкусные плюшки для дизайнера 🍪
Artjoker UI kit — это документ в Figma, в котором есть готовый настраиваемый набор стилей и оформления графических элементов для проектирования интерфейсов. По сути это дизайн-система без кода или шаблон для создания новой дизайн-системы.
![](https://cdn.cases.media/image/wide/eac363ec-d387-48c1-b67a-9ab9667b8af6.png)
Все элементы созданы по принципу атомарного дизайна и упорядочены так, что любой человек без труда и быстро найдет любой нужный элемент. Разработка UI kit была реализована по атомарному принципу с помощью компонентов. Соблюдаются принципы 8 px grid. Все размеры кратны 8, некоторые кратны 4.
Зачем нужен UI Kit?
Artjoker UI kit помогает проектировать консистентный дизайн, экономит время дизайнеров и разработчиков, ускоряет процессы проектирования, облегчает коммуникацию между специалистами, позволяет работать в одной “экосистеме”.
Использование UI kit может здорово облегчить жизнь дизайнерам. Создана структура документа - некий шаблон для быстрого начала работы. Нужно просто настроить стилистику уже созданных объектов (шрифты, цвета, форма кнопок и т.д.) и все элементы и блоки будут наследовать эту стилистику. Либо можно сразу собирать макеты из готовых блоков, а уже после настроить эти блоки в одном месте (в мастер-компонентах), а все копии (инстансы) будут наследовать изменения.
Макеты сайта, созданного с помощью UI kit будут содержать четко структурированный стайлгайд, который также может пригодится маркетологам для создания рекламных материалов, разработчикам - если потребовался какой-то элемент, которого нет в дизайне. Также, если работу начинает один дизайнер, а продолжает второй или же несколько специалистов работают с проектом одновременно – не возникнет путаницы и дублей в макетах. Четкая дизайн концепция Artjoker UI kit поможет облегчить проектирование интерфейса, создание прототипа сайта и UI дизайн в целом.
Философия «Artjoker UI kit»
- Атомарный подход – от атома к организму
- 8 px grid
- Консистентный дизайн
- Командный дух
Что внутри?
1. Пак качественных иконок на все случаи, все иконки созданы по гайдам и имеют размер 24х24 px + дополнительные иконки соцсетей, заготовки для создания Favicon, placeholder
![](https://cdn.cases.media/image/wide/84ea6975-72c1-46bb-b2d1-01c59641e638.png)
2. Проработанная система шрифтов для десктопа, лэптопа, смартфона. По умолчанию используется шрифт Gilroy
![](https://cdn.cases.media/image/wide/b2c9b1a4-8d08-4a15-808f-3549b3318dbe.png)
3. Проработанная палитра с разделением на функции (главный цвет, акцентный, нейтральные тона, вспомогательные цвета) с возможностью предпросмотра общей картины
![](https://cdn.cases.media/image/wide/f7b85327-1b49-4611-b469-d9ba7d02a84a.png)
4. Система кнопок, позволяющая быстро настроить состояния (ховер, фокус, неактивное), и переключаться между ними
![](https://cdn.cases.media/image/wide/025edc4e-c55f-4470-816e-d531ba79bfba.png)
5. Система инпутов с проработанными состояниями. Общий вид настраивается через один мастер - компонент
![](https://cdn.cases.media/image/wide/039fdd58-dea5-49e2-979c-ef700343c827.png)
6. Система селектов, дропдаунов, чекбоксов
7. Компоненты для быстрого создания таблиц
8. Множество других элементов, таких, как пагинаторы, бейджи, и другие
9. Шаблоны модальных окон
10. Шаблоны главной страницы и меню, в том числе адаптив
11. Шаблоны писем для Email рассылок
12. Инструменты для подбора цвета
13. Мокапы для презентаций
14. Пресеты сеток для страниц и блоков
![](https://cdn.cases.media/image/wide/ff2a550f-9b33-4149-b482-80a9bbe724f7.png)
![](https://cdn.cases.media/image/wide/0023352b-a773-41cf-b890-2d5e37acedc3.png)
![](https://cdn.cases.media/image/wide/077840bb-be14-4af8-9262-2c10d50342d6.png)
Как с этим работать?
1. Начинаем с типографики. Используем готовые стили. Настраиваем каждый (это займет немного времени по началу, но в дальнейшем это окупится + никто не запрещает использовать плагины, но это другая история). Изменяемые стили динамически меняются на превью.
![](https://cdn.cases.media/image/original/0060a353-eb3a-4cda-88ff-8d3d8518ef4f.gif)
2. Настраиваем палитру. Контролируем на превью, если нужно.
![](https://cdn.cases.media/image/original/7c168499-8b71-4758-8bfb-304d5996df37.gif)
3. Настраиваем кнопки, точнее мастер-компоненты состояний.
![](https://cdn.cases.media/image/original/10e5640c-e282-460c-b641-b1527ec6b93c.gif)
4. Настраиваем кнопки, точнее мастер-компоненты состояний. Раскрашиваем другие состояния с помощью стилей цвета.
![](https://cdn.cases.media/image/original/b0c89457-878e-4f3e-9ff4-3af40333c51f.gif)
5. Приступаем к работе. Используем библиотеку компонентов. Не рисуем новые, стилизуем готовые (пока не нужно, в будущем, и если осознанно - пожалуйста).
![](https://cdn.cases.media/image/original/38fab341-9c81-4142-8bc3-a76fa5673b9b.gif)
6. Рекомендую использовать сетки из UI kit.
![](https://cdn.cases.media/image/original/5013f4cc-3ab2-4c1c-b13d-ddab86fd37ff.gif)
Что дальше?
Цель создания Artjoker UI kit – сократить срок и удешевить проектирование сайтов, особенно создание интернет магазина, давая готовые и гибкие решения для команд дизайнеров и разработчиков. В будущем мы планируем работу по упрощении использования, добавим анимированные иконки и заготовки для анимации микро взаимодействий, кастомизируемые иллюстрации.
Создание UI kit стало отличным опытом для наших специалистов. Также в наших планах превратить этот UI kit в полноценную дизайн систему, с документацией и готовыми запрограммлеными блоками.