ui kit figma что это
UI-kit — что это простыми словами и как его сделать
UI-kit — это готовый набор элементов пользовательского интерфейса, который предназначен для того, чтобы ускорить создание дизайна, сделать его более структурным и упростить его последующую разработку. В этой статье я подробно расскажу вам про UI-kit: что это, как расшифровывается, как сделать UI-kit для сайта в Figma, как использовать его в дизайне и чем UI-kit отличается от дизайн-системы.
UI-kit — что это простыми словами
Для начинающих дизайнеров слово UI-kit, может вызвать массу вопросов. Например, почему именно kit, а не delphin 😊 и что значит UI? Давайте по порядку.
Во-первых, UI — это аббревиатура от словосочетания «User Interface», что в переводе с англ. означает «Пользовательский Интерфейс».
Во-вторых, слово «kit» в переводе с англ. означает «комплект, набор», а не морское млекопитающее как многие могут подумать 😊
Таким образом, соединив оба слово, у нас получится UI-kit — готовый набор элементов пользовательского интерфейса. Осталось разобраться, что означает слово «элементы».
Любой пользовательский интерфейс состоит из определённых элементов:
Все или часть из этих элементов присутствуют на любом сайте, сервисе или в мобильном приложении. В зависимости от типа сайта или приложения, в UI-kit включаются все необходимые элементы, из которых в итоге будет формироваться конечный пользовательский интерфейс конкретного проекта.
Какие задачи решает UI-kit в дизайне
В каждой отрасли, особенно в IT-сфере, стремятся к тому, чтобы избавиться от рутинной работы и оптимизировать рабочие процессы. Именно для этих целей и был придуман UI-kit.
1 — Структурирование работы над дизайном
При проектировании дизайна с использованием UI-kit, все ключевые элементы интерфейса собраны в одном месте, а не разбросаны по всем макетам. Таким образом дизайнеру намного проще использовать необходимые элементы в дизайне
2 — Создание дизайна в едином стиле
Используя UI-kit, вы можете легко стандартизировать свой дизайн и проектировать его в единой стилистике, при этом сохраняя логику взаимодействия элементов. Это особенно актуально при разработке сложных интерфейсов, в которых каждая последующая страница должна гармонировать с предыдущей.
Помимо этого, UI-kit можно использовать и в других проектах, в которых предполагается похожая стилистика. Например, если вы разрабатываете дизайн нескольких проектов внутри одного продукта. В этом случае, дизайн должен быть стандартизирован во всех проектах и для решения этой задачи прекрасно подойдет UI-kit.
3 — Упрощение командной работы
Если над проектом работает несколько дизайнеров и разработчиков, то UI-kit позволит решить проблему недоговоренностей. Создав UI-kit, каждый член команды будет знать как должен выглядеть тот или иной элемент и каким образом он должен себя вести в интерфейсе.
4 — Экономия времени на проектировании дизайна
Используя UI-kit, вы значительно экономите себе время на разработке дизайна и избавляете себя от рутинной работы. Вам не нужно каждый раз рисовать новый элемент дизайна с нуля, потому что у вас уже есть готовый компонент в UI-kit. Можно просто брать и вставлять в нужное место.
5 — Помощь веб-разработчикам
С помощью UI-kit, веб-разработчик может легко настроить будущую стилистику сайта, тем самым сэкономив себе немного времени на разработку. Помимо этого, веб-разработчик может легко скачивать из UI-kit нужные ему иконки или иллюстрации, вместо того чтобы рыскать по всем макетам и выискивать нужные элементы.
Что общего между UI-kit и походом в магазин
Я люблю объяснять сложные вещи простым и понятным языком. Поэтому для лучшего понимания давайте сравним UI-kit с обычным походом в магазин.
Каждый из нас ходит в магазин за покупками. И у каждого из нас есть свой любимый гипермаркет, в котором мы знаем где какой продукт лежит. Заходя в него, мы сразу идем в нужные нам отделы, берем все необходимое и оплачиваем покупку.
Таким образом, поход в магазин занимает у нас минимум времени. А теперь представьте, что каждый раз вам нужно ходить за продуктами в новый магазин. Там вы совершенно не знаете где и что лежит, поэтому вынуждены тратить время на поиски.
Тоже самое и с UI-kit. Если каждый раз при создании дизайна вы рисуете все компоненты с нуля, то на это тратите много времени. А если используете UI-kit, то экономите время на рутинной работе и оптимизируете свой рабочий процесс.
Что входит в UI-kit
В начале статьи я упомянул некоторые элементы, которые должны входить в UI-kit, но для наглядности давайте более подробно разберем каждый из них.
Каждый элемент UI-kit должен быть выполнен в виде компонента или стиля, чтобы в дальнейшем можно было легко вносить изменения в дизайн.
Навигация
В больших проектах навигация выполнена в виде отдельной панели (горизонтальной или вертикальной), которая занимает свое строго отведенное место.
В мобильных приложениях, навигация выполнена в виде меню-гамбургера или закрепленной в нижней части панели с иконками и текстом.
В проектах попроще, например в корпоративных сайтах или лэндингах, навигация более простая и чаще всего состоит из обычных текстовых ссылок.
Для навигации отрисовываются следующие состояния:
Навигация заносится в UI-kit отдельным блоком и потом переиспользуется на всех страницах проекта.
Текстовые поля
Это те элементы дизайна, с которыми пользователь взаимодействует по средствам ввода в них текста или выбора необходимых пунктов.
В UI-kit заносятся все возможные состояния текстовых полей, чтобы разработчик не гадал, как они должны себя вести при взаимодействии с ними в интерфейсе.
Обычно для текстовых полей рисуют 7 состояний:
Формы
Формы состоят из текстовых полей, о которых мы говорили выше. Наиболее популярными являются формы регистрации и подписки, оформления заказа и формы обратной связи.
Формам нужно уделять особое внимание, потому что они являются конверсионными элементами. Чем лучше они спроектированы, тем проще пользователю взаимодействовать с системой.
В UI-kit они заносятся готовыми блоками для дальнейшего удобного использования в других частях дизайна.
Кнопки
Кнопки используются во всех интерфейсах без исключения. Именно поэтому их обязательно стоит заносить в UI-kit.
Для кнопок рисуют минимум 3 состояния:
Некоторые прописывают еще состояние при нажатии, но это не обязательно.
Карточки
Под карточками подразумевается определенная совокупность элементов, которые создают один независимый компонент. Например, карточки товаров в интернет-магазинах.
Иконки
Все иконки, которые используются в дизайне, помещаются в UI-kit, чтобы их было просто и легко найти для повторного использования. Помимо этого, когда иконки находятся в UI-kite, их можно быстро выделить и пометить все сразу для экспорта.
UI-элементы
К UI-элементам относятся различного рода диалоговые окна, диаграммы, тултипы, всплывающие подсказки, снэкбары, контролы и так далее. То есть все те элементы дизайна, которые не принадлежат остальным группам.
Цвета и шрифты
Все цвета и шрифты, которые используются в дизайне, должны быть помещены в UI-kit для наглядного представления веб-разработчикам. Это упростит им дальнейшую разработку и поможет заранее прописать все необходимые стили для проекта.
Когда нужно создавать UI-kit
Ответ прост — всегда! Даже если вы разрабатываете дизайн для простенького лэндинга. Всегда помещайте в UI-kit основные элементы дизайна (цвета, шрифты, кнопки, текстовые поля, иконки и так далее). Приучайте себя к порядку и структурному подходу к дизайну. Это поможет вам в дальнейших работах над более крупными проектами.
Исключение — если вы создаете проекты «под ключ» (дизайн + верстка). В этом случае вы можете обходиться без UI-kit, потому что и так знаете как должен выглядеть конечный сайт и как должны вести себя UI элементы в нем.
Как сделать UI-kit для сайта в Figma
Для наглядности давайте я покажу, как сделать UI-kit для простенького сайта в графическом редакторе Figma.
Первым делом создаем новый документ и рисуем в нем 2 фрейма: один — под будущий сайт (назовем его Main), а второй — для UI-kita с соответствующим названием.
Во фрейме Main напишем заголовок «Мой первый UI-kit» и подзаголовок «В этом уроке я научусь создавать UI-kit».
Далее настроим параметры текста (цвет и размер) и занесем их в UI-kit, создав из них стили.
Затем нарисуем текстовое поле и кнопку в UI-kit и сформируем из них компоненты.
Отрисуем несколько состояний для текстового поля (по умолчанию, в фокусе, ошибка) и для кнопки (по умолчанию, при наведении, неактивна). Каждое новое состояние — новый компонент.
Далее из этих элементов создадим в макете небольшую форму из 2 полей и кнопки.
Таким образом мы создали небольшой сайт и простейший UI-kit для него. Если мы будем дальше разрабатывать дизайн, то уже будем опираться на имеющийся UI-kit, чтобы стиль сайта был одинаковый.
В процессе работы, вы можете корректировать UI-kit, но главное, чтобы все изменения применялись сразу во всех макетах. Для этого важно создавать из элементов компоненты, а в самих макетах использовать их дочерние копии.
Бесплатный UI-kit для скачивания
Если вы создаете дизайн под заказ, то предпочтительнее все же создавать свои UI киты под каждый конкретный проект.
Что такое гайдлайны в дизайне и чем они отличаются от UI-kit
Гайдлайн — это подробная документация того, как должен выглядеть дизайн и как должны взаимодействовать элементы друг с другом. По-другому их еще называют дизайн системами. Существует 2 самые распространенные дизайн-системы:
Отличие гайдлайнов от UI-kit заключается в том, что гайдлайн — это документация (все прописано текстом и показаны примеры как должно выглядеть), а UI-kit — это готовый набор элементов, которые можно брать и использовать в своих проектах.
У гайдлайнов Material и HIG есть свои UI-киты, которые составлены согласно документации.
Заключение
В этой статье я подробно рассказал вам про UI-kit: что это, как расшифровывается название, как сделать UI-kit для сайта в Figma, как использовать его в дизайне и чем UI-kit отличается от дизайн-системы. Надеюсь, статья была для вас полезной, и вы нашли все ответы на свои вопросы.
Не забудьте подписаться на мой YouTube и Telegram. Там еще больше полезного материала про дизайн интерфейсов.
Ui Kit что это такое
Ui kit – это набор готовых решений пользовательского интерфейса. Зачастую это кнопки, инпуты, меню, чек боксы, разные переключатели, и прочие стандартные элементы взаимодействия с сайтом.
Все элементы в ui kit связаны между собой, выполнены в одном стиле.
Когда фотошоп умер в ui kit стали включать помимо самих элементов и их состояний, компоненты/символы, наборы стилей и правил использования, что уже большее походит на дизайн систему или ее зачатки.
Продвинутые ui kit включают в себя еще и сетки, колонки, правила использования типографики, отступов и тд, что еще больше напоминает дизайн систему, но ею не является.
Сегодня все чаще простые ui kit перерастают в набор готовых для работы блоков сайта. Например футер, карточки товара, отзывы и тд. На основе ui kit создаются блоки сайта в разных вариациях. Создание такого продукта требует больших затрат по времени, но при этом он покрывает гораздо больше вопросов в работе. Тебе больше не нужно отрисовывать не только кнопки и инпуты, но и целые блоки сайта. По сути создается конструктор сайта в Figma Sketch с готовыми правилами, отступами типографикой и все что нужно для работы.
Зачем нужен ui kit
Так дешевле. Дизайнеру теперь не нужно платить за ui так много, ведь все уже готово. Можно и вовсе отказаться от дизайнера и самостоятельно собрать макет, особенно, если использовать toolkit
Единый стиль. Используя ui kit в разных проектах компания станет узнаваемой своим неповторимым стилем. + Теперь не нужно каждому дизайнеру в проекте объяснять что, как и почему — все есть в ui kit.
Для разработчиков, которые создают продукт для себя. Дизайнер, да и красивый дизайн им ненужен, а нужен просто набор элементов.
Зачем дизайнеру Ui Kit
Предыдущий раздел больше отвечал на вопрос — зачем в принципе нужны юи киты и показывал очевидные выгоды для заказчика. Тут я поясню несколько выгод непосредственно для дизайнера
Работая с ui kit ты значительно ускоряешь свою работу, значит и свой доход.
Ты можешь создавать свои собственные юи киты и продавать их на разных площадках. Средний ui kit стоит от 20 баксов и продается очень много раз. Конечно, для того чтобы у тебя его купили он должен быть как минимум качественным и профессиональным + выполнен на английском, ведь большинство покупателей, как ты понимаешь, говорят именно на этом языке.
Тематические ui kit
Сегодня мир интерфейсов и дизайна так развит, что одним юи китом уже не обойтись, поэтому создаются более конкретные и узконаправленные киты для упрощения работы в над проектами конкретной тематики. Например, ui kit для дашбордов, интернет магазинов, лендингов, таблиц, моды и тд.
Стоит ли новичку пользоваться ui kit
Нет. Категорически нет.
Новичок, который сразу начнет работать с китом, будет создавать красивые, но бессмысленные интерфейсы, при этом сам он не сможет отрисовывать и простой кнопки. Для начала нужно научиться все создавать самостоятельно, а после этого ускорять работу с помощью ui kit.
Максимум как можно использовать новичку ui — это посмотреть на то, как все устроено, как созданы элементы, стили, какие между ними связи и тд. После уже самостоятельно это рисовать в своем проекте. Не стоит поддаваться на соблазн «взять готовенькое и обмануть судьбу». Это как списывать на уроках в школе. В тетрадке пятерка, в голове кол.
Figma Starter UI – Kit: как дизайнеру работать быстрее (часть 1)
Привет мой друг!
Сегодня хотел бы немного поговорить о том, сколько дизайнер тратит времени на выполнение задач, и как сократить это самое время. Так же разберем создание твоего первого стартового UI-Kitа в фигме. Именно он станет главным инструментом при работе с новыми проектами.
Figma-исходник лежит тут!
Зачем тебе это нужно
Давай вспомним начало твоей работы с документом в фигме:
ты создаешь файл, кидаешь туда скрины с ТЗ и какими-то прототипами. Далее постепенно начинаешь набрасывать элементы интерфейса и опять рисуешь кнопки, которые рисовал миллион раз. Потом добавляешь текст, применяешь к нему стили шрифта. Прям вижу, как ты снова ищешь свой любимый Montserrat или Roboto, потом заходишь в палитру, выбираешь нужный цвет, а некоторые так вообще используют пипетку. Потом настраиваешь тени для кнопок, закругления, блюры… Фу, аж представить страшно!
В итоге ты тратишь несколько часов своего времени на 1-2 простейших экрана. При этом у тебя целая куча стилей и цветов, хотя на экране несколько простейших элементов. Потом разраб начинает проклинать тебя за эту неразбериху со слоями, цветами и другими параметрами.
Именно для этого тебе и нужно создать свой Starter UI – kit.
Что такое Starter UI-Kit?
Starter UI – Kit это базовый набор элементов и стилей, который призван сокращать время на создание типовых элементов. От полноценной дизайн-системы он отличается более простым набором элементов и не привязан к определенной стилистике. Если говорить проще, то это asset кнопок, шрифтов, цветов и всего того, что ты обычно рисуешь на своих артбордах.
Ближе к делу!
Не хочу грузить тебя большим количеством информации, поэтому мы разобьем эту статью на несколько частей. Непосредственно в этой мы создадим следующее:
Цветовая палитра
Любой элемент дизайна имеет свой цвет, поэтому первым делом мы создадим грамотную цветовую палитру. Чаще всего в дизайне интерфейсов каждый цвет соответствует определенному состоянию элемента, например:
красный — (ошибка), зеленый — (успех) и желтый — (предупреждение), голубой — (кликабельная ссылка). Отсюда следует, что нам необходимо создать следующий набор цветов:
Так же я создам еще несколько цветов
Например Black и Gray, они необходимы для текста.
Далее нам необходимо создать набор оттенков для каждого цвета.
Для этого я использую онлайн-инструмент Eva Colors Generator Он сам генерирует нужные оттенки и их количество. В итоге мы получаем вот что:
Я создал немного больше цветов исключительно для примера.
Чтобы сгруппировать все оттенки по категориям нужно каждому из них присвоить свое имя в следующем виде: Название категории / Номер оттенка.
Например:
Тогда наша палитра будет иметь такую структуру:
Шрифты
Здесь все максимально просто!
Тебе нужно создать набор всех необходимых шрифтов во всех нужных размерах, которые ты используешь в своих работах. Обычно нужны стили заголовков, основной боди-шрифт, шрифты для кнопок и ссылок, но всё зависит конкретно от твоих нужд.
В качестве базового семейства лично я использую — Roboto. Не знаю, просто люблю его! Создаю для каждого нужного размера 3 подстиля: равнение по левой стороне, центрированный шрифт и по правой.
Выглядит это примерно так:
Далее каждому из шрифтов присваиваем свое имя, здесь действуют те же правила, что и при создании цветов: Название категории / тип равнения
Думаю, ты начинаешь понимать принцип создания стилей. Поэтому сейчас тебе предстоит собственноручно создать небольшой набор теней.
Я же в свою очередь дам тебе Figma-исходник со всеми материалами, о которых мы говорили сегодня в этой статье.
Это была первая часть цикла статей по созданию Figma Starter Kit.
В будущем мы вместе спроектируем мощный инструмент, который будет включать в себя огромное количество компонентов и символов!
Figma Kit в помощь дизайнеру
Актуальные тренды веб-дизайна постоянно сменяют друг друга. Одни компании стараются успеть в погоне за капризной модой, другие игнорируют ее и остаются верны своим предпочтениям. Но есть и такие тенденции, которые не теряют своей популярности уже несколько лет, например, лаконичный минимализм или реалистичные текстуры.
Чтобы не тратить время впустую на детальное создание продукта, который может не понравиться заказчику, можно использовать различные онлайн-редакторы для совместной работы. Их возможности позволяют создать прототип сайта без излишних подробностей для стартовой презентации клиенту. О некоторых вариантах таких инструментов которой мы и поговорим сегодня.
Figma представляет собой графический онлайн-редактор, в котором можно работать над проектом одновременно с коллегами: создавать прототип сайта, векторную графику, интерфейс приложения для смартфона или утверждать правки в текущем проекте.
Вся информация постоянно обновляется в облаке, сохраняя каждое изменение и отображая актуальный вид проекта на данный момент. Любое изменение можно отменить, вернувшись к предыдущему этапу работы. Отметим, что для создания более сложной графики Figma использовать не стоит – отдайте предпочтение специализированным программам. Для расширения возможностей можно использовать один из множества плагинов или создать собственный.
Редактор не требует установки файлов или программ на компьютер, вся работа происходит в обычном браузере. Эта особенность делает его удобным для демонстрации подготовленных макетов клиенту, который может оставить свои комментарии и замечания прямо в редакторе. Заказчик сможет сразу увидеть отличия в отображении дизайна на разных электронных устройствах.
Редактор хорош не только для дизайнеров. В нем можно работать SMM-менеджерам и разработчикам, вести различные проекты и разрабатывать шаблоны рекламы для Facebook.
Фрилансерам, работающим самостоятельно или с напарником, будет комфортно: условно-бесплатный тариф Starter позволяет вести работу над проектом двоим людям. Если ваша команда больше, придется немного раскошелиться.
Одним из неоспоримых достоинств Figma также является присутствие готовых UI-Kit, среди которых вы можете выбрать подходящий, приобрести его и настроить по своему усмотрению. Мы привели примеры некоторых, удачных, на наш взгляд, решений.
1. Surge iOS UI Kit – UI Kit приложения iOS для крипто и кошелька
Экономические последствия пандемии активизировали интерес людей к альтернативным вариантам заработка, в том числе, к инвестициям и криптовалюте. А, значит, приложение крипто/кошелек будет востребовано пользователями.
UI-kit Surge представляет собой набор из 45 экранов pixel perfect, совместимых со Sketch и Figma одновременно. Одно из главных преимуществ этого пользовательского интерфейса — простая кастомизация (вы можете менять динамические компоненты, размеры, а также глобальные стили цвета и шрифта).
У этого набора впечатляющая анимация, скромный дизайн без излишеств и отличная функциональность.
Storefront― многофункциональный вариант пользовательского интерфейса iOS для онлайн-продаж. В вашем распоряжении 25 видов экранов, каждый из которых можно настроить под себя, верстка pixel perfect и многое другое.
При необходимости, вы можете кастомизировать данный кит с помощью изменения цветов, стилей текста и добавления своего контента.
Фитнес-клубы в последнее время стремительно набирают обороты. Каждое заведение пользуется популярностью, вне зависимости от вида занятий и ценовой категории. Разные поколения людей все чаще становятся приверженцами здорового образа жизни и занимаются разными видами спорта в свободное время.
UI-kit Fitness Pro позволяет создать удобный лэндинг для тех, кто неравнодушен к спорту. С его помощью можно получить общую информацию о спортивном направлении, записаться на занятие, и присоединиться к группе единомышленников.
Полнофункциональный набор дизайна пользовательского интерфейса, включает в себя файлы дизайна, красивые 3D-иллюстрации и макеты, которые можно редактировать в Figma.
В этом пакете вы найдете адаптивный и полностью настроенный шаблон целевой страницы с 72 готовыми экранами, требующими минимальной доработки. Обилие разного контента, максимально увеличивает количество конечных вариантов макета.
Чем хороши UI-kit?
Они позволяют без лишних усилий привести проект к единообразию и сделать так, чтобы все его составляющие гармонично сочетались друг с другом. Готовые наборы являются своеобразной базой знаний — вам не придется объяснять новому коллеге, как именно должен выглядеть тот или иной элемент. С их помощью работа над проектом значительно сокращается, ведь дизайнер может использовать готовые элементы, не тратя время на отрисовку каждой иконки или детали.
Говоря, о проектировании UI и UX, нельзя обойти вниманием прототипирование, позволяющее максимально сократить трудозатраты на тестирование той или иной функции, приложения или сайта. Это позволяет понять, актуальна ли идея, до начала полноценной разработки, а также улучшить опыт будущих пользователей.
Ниже мы рассмотрим несколько вариантов инструментов (помимо Figma) для создания интерактивной модели для дизайна и концепции продукта.
Есть ли жизнь после Figma?
Sketch представляет собой векторный графический редактор для macOS, появившийся на свет в 2010 году. За это время он успел стать одной из самых популярных программ прототипирования во всем мире. Sketch позволяет работать над любыми формами пользовательского интерфейса.
В отличие от Photoshop, Sketch не использует собственных средств для отрисовки создаваемого контента — эти функции возложены на встроенные инструменты Mac OS X. Это позволяет значительно экономить место на диске.
Данный вариант прекрасно подходит для создания вайрфреймов и адаптивного прототипирования, вне зависимости от разрешения экранов. Кроме того, вы сможете работать с формами и списками данных, даже если не умеете писать коды.