Ui kit figma что это
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 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. Это позволяет значительно экономить место на диске.
Данный вариант прекрасно подходит для создания вайрфреймов и адаптивного прототипирования, вне зависимости от разрешения экранов. Кроме того, вы сможете работать с формами и списками данных, даже если не умеете писать коды.
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.
В будущем мы вместе спроектируем мощный инструмент, который будет включать в себя огромное количество компонентов и символов!
Создание сайтов в Киеве, Харькове
Создание сайта с нуля — один из важных этапов в построении успешного бизнеса и его развитии, ведь именно он — тот самый маркетинговый инструмент, который позволяет привлекать новых клиентов, повышать продажи и достойным образом представить ваш бизнес общественности.
Создание сайтов в Киеве и продающих интернет-магазинов — приоритетное направление деятельности агентства Artjoker. Обратившись к нам, вы получите не просто качественный программинг, красивый и эргономичный дизайн, но и комплексный подход в решении бизнес-задач любой сложности.
Основные этапы разработки сайтов от компании Artjoker
Разработка сайта с нуля — процесс трудоемкий и требующий максимальной ответственности и профессионализма со стороны разработчиков и менеджеров. Основные этапы создания сайта от Artjoker:
В компании Artjoker выполняется разработка сайта быстро, мы проповедуем Культ Дедлайна, и вы можете быть уверены, что на выходе получите свой веб-проект на высшем уровне и в срок. Как правило, создание сайта с нуля занимает около 30 дней, и, в конечном итоге, мир веба пополняется новым выдающимся ресурсом, а ваш бизнес-инструментарий — мощным источником новых клиентов, стабильной прибыли и усилением имиджа бренда.
1 этап — Формирование технического задания на изготовление сайтов
Итак, с чего все начинается? Изготовление сайтов на заказ начинается со знакомства с заказчиком и его бизнесом. Менеджеры проекта проводят, как правило, несколько встреч с клиентом, на основе чего выявляют особенности и специфику бизнеса, его сильные и слабые стороны, определяют целевую аудиторию и вырабатывают стратегию дальнейших действий.
Поставленные цели и задачи, а также поэтапный план работы над проектом отображается в техническом задании на изготовление сайта — документе, в котором прописаны основные моменты работы: архитектура страниц, структура, ключевые модули, разделы и функционал. Кроме того, на этом этапе окончательно определяются необходимые ресурсы, команда и часы работы каждого специалиста, сроки выполнения (обязательно фиксируется дедлайн). В окончательном итоге мы получаем конкретный план проекта, нацеленного на достижения положительного результата.
2 этап создание сайта — Разработка дизайна под ключ
После того, как техническое задание готово, обсуждено и утверждено, специалисты приступают ко второму этапу — разработке дизайна. Команда дизайнеров рисует все необходимые элементы веб сайта с нуля в соответствии с выбранной концепцией и пожеланиями клиента, чтобы создать сайт под ключ, который будет привлекательным как для заказчика, так и для целевой аудитории.
3 этап разработки сайта — Верстка
Создание, разработка сайта Харьков, Киев от команды Artjoker следующим этапом предполагает внедрение технологий, в частности, верстку. Можно использовать разные типы верстки: фиксированную, резиновую или адаптивную. Своим клиентам мы советуем адаптивную, ведь именно она позволяет сделать ресурс максимально удобным для использования не только на ПК, но и на различных мобильных устройствах, что сегодня особенно актуально.
4 этап — Программирование
Далее приступаем к программированию, в процессе которого происходит так называемая «магия», ведь не посвященному в особенности технологий веб-разработки может показаться, что специалист и правда колдует над проектом. На этом этапе происходит создание всех страниц и обеспечение функциональности всех элементов. Все, зафиксированные в техническом задании модули, внедряются, а верстка прикручивается к админке. По согласованию с заказчиком, мы разрабатываем сайты на CMS (админке) MODx, а интернет-магазины — на Magento или расширенной собственными доработками и модулями MODx E-commerce.
5 этап — Наполнение контентом
Разработка, создание сайтов Харьков заканчивается тем, что они наполняются контентом. Мы готовы предложить команду специалистов в лице контент-менеджеров и копирайтеров, которые не только напишут уникальные и продающие тексты, но и сумеют гармонично их вписать в общую структуру ресурса, при этом обеспечив начальный этап внутренней оптимизации ресурса: мета-теги, уникальные тексты и перелинковка.
После того, как интернет ресурс будет окончательно готов, мы размещаем его на домене клиента, настраиваем хостинг и обучаем заказчика работать с ресурсом. Благодаря тому, что в качестве административной панели мы используем систему управления MODX или Magento, процесс взаимодействия для вас со своим ресурсом предельно понятен и прост.
Вот, собственно, и все: на этом работа над созданием веб-ресурса заканчивается, но следует помнить, что профессиональная разработка сайтов под ключ в Украине — это первый шаг для создания бизнеса в web пространстве. Следующим логичным шагом будет грамотное и контролируемое продвижение проекта.
Разработка сайтов под ключ ведется на базе CMS:
Почему стоит доверить изготовление сайта студии разработки веб сайтов Artjoker?
Студия разработки веб сайтов Artjoker— это не просто команда опытных специалистов, это «большой мозг», который постоянно работает над улучшением качества своей работы и результатов для клиентов.
Выбирая услуги создания сайта или интернет-магазина у нас, вы получаете:
Кроме того, вы получаете команду специалистов, состоящую из менеджера, дизайнера, верстальщика, юзабилиста, программиста, тестировщика и маркетолога, которые постоянно работают над вашим проектом и добиваются только лучших результатов!
Где заказать сайт под ключ дешево?
Создание сайтов, заказать которое можно практически в любой студии веб-разработки в Киеве, зачастую стоит дорого. А ведь так хочется получить максимально качественный и профессиональный веб-проект, при этом не потерять в экономическом плане, не так ли?
Но, если вы хотите заказать сайт под ключ дешево, то следует помнить, что «скупой платит дважды» и, сделав проект по низкой цене, вы рискуете получить неэффективный ресурс, который может не принести желаемого результата. Чтобы действительно развить свой бизнес и поднять продажи, в первую очередь, в приоритете должно стать качество проекта, в первую очередь, профессиональная разработка сайта, стоимость которой в компании Artjoker окупается в самые короткие сроки.
Заполните бриф и отправьте заявку прямо сейчас, чтобы связаться с нашим менеджером. Мы поможем вам прокачать свой бизнес в сети!
Как и почему мы стали делать UI в Figma вместо Photoshop
По моему опыту, большинство игровых интерфейсов все еще делаются в Adobe Photoshop ввиду их художественности и графической сложности, на которую не способны векторные редакторы. Однако и в игры пришел тренд плоских интерфейсов, и настало время пересесть с тяжелого Фотошопа на более простые редакторы интерфейсов, такие как Figma, Adobe XD, Sketch и прочие.
У таких инструментов есть немало преимуществ перед Фотошопом, таких как совместная работа, возможность создания интерактивного прототипа, плагины, автолейауты, варианты, и со временем их становится все больше. По этой причине интерфейсы на новых проектах лучше начинать делать сразу в таких редакторах. Но если так случилось, что ваш проект начинал вестись в Фотошопе, а затем он перестал вас устраивать, эта статья для вас.
Зачем это было нужно
В 2018 году, когда наш проект Dino Squad только стартовал, наша команда работала по такому пайплайну:
Проектируем логику интерфейса и делаем черновые интерактивные прототипы в Figma;
Создаем макеты в высоком разрешении в Photoshop, затем передаем их в верстку;
Снова переносим картинки в растровом формате из Photoshop в Figma для создания «чистовых» прототипов, которые необходимы для презентаций и геймдизайн-документации.
Таким образом, мы перепрыгивали из одного инструмента в другой два раза: Figma → Photoshop → Figma. В какой-то момент стало очевидно, что от промежуточного шага можно избавиться. Тем более, перенос проекта полностью в Figma оказался не так трудозатратен и пугающ, как могло показаться сначала.
Было еще несколько моментов, которые, как нам казалось, ускорят работу и облегчат жизнь дизайнерам, если мы это сделаем.
Во-первых, в Photoshop не самая удобная для команды дизайнеров реализация библиотеки. Она долго синхронизируется из-за огромного веса файлов. В Figma же не нужно сохранять файлы, все изменения вносятся мгновенно, а макеты актуальны в каждый момент времени.
Во-вторых, в Photoshop слишком много функций, которые не нужны дизайнерам интерфейса. В этом плане Figma намного легковеснее и реже крашится, что сохраняет команде и время, и нервы.
Технические особенности перехода
Не для всех интерфейсов — особенно игровых — Figma подходит. Если в вашем проекте каждый элемент интерфейса — это произведение искусства, то растровые редакторы, вероятно, подойдут куда больше. Интерфейс нашей игры довольно простой: большинство элементов плоские (иконки, подложки, кнопки), и их легко реализовать в векторном формате. Поэтому весь огромный функционал Photoshop нашему проекту был не нужен.
Еще одним плюсом для нас стало то, что стилистика интерфейса и большая часть его элементов уже были готовы — не нужно было придумывать все с нуля. То есть, после переноса у нас уже будет готовый UI-kit для реализации новых фичей.
Что упростило задачу переноса
Процесс переноса окажется проще, если большая часть интерфейса будет представлена в векторном формате, так как Figma не поддерживает редактирование растровой графики.
Еще одним упрощающим переход фактором стало то, что все элементы подчинялись одной сетке. Мы выбрали не самую обычную сетку кратностью 7 (потому что могли). Во всех экранах присутствовала модульность, которую могли наследовать новые экраны, поэтому все элементы интерфейса органично вписывались и в последующие макеты.
Немалая часть элементов в проекте переиспользовалась: то есть, кнопки, подложки, бейджи и различного рода карточки на разных экранах были одинаковыми. Это уменьшило число необходимых для отрисовки элементов.
Перенос проекта из Photoshop в Figma
Чтобы упростить задачу и не перерисовывать с нуля каждый экран, мы решили подойти к вопросу системно. Во-первых, переиспользование цветов, шрифтов и повторяющихся элементов сильно ускоряет процесс переноса. Во-вторых, созданная система в дальнейшем поможет разрабатывать новые экраны и фичи намного быстрее.
Для начала внутри проекта мы создали три файла:
В файле Tokens представлены все токены проекта;
В Library хранятся все отрисованные элементы интерфейса и ассеты;
В файле Screens находятся все актуальные экраны проекта.
Также отдельно мы создали проект с прототипами и проекты черновиков для каждого члена команды, подключив к ним библиотеки основного проекта.
Этап 1. Создание токенов
Начнем с базовых переменных нашей системы — токенов, таких как цвета и шрифты.
Как устроена система токенов в Figma
Фигма позволяет создавать Color Styles, Text Styles и Effects Styles. Подробнее про стили можно почитать тут.
Так как в нашем проекте уже устоялась некоторая палитра и шрифтовая схема, на первом этапе необходимо было определить все используемые в проекте цвета и шрифты и занести их в стили Figma. Теперь для использования цвета или шрифта не нужно пипеткой доставать цвет с другого элемента — достаточно выбрать необходимый из стилей.
Цвета
В нашем проекте более сотни цветов и перекрасок, поэтому цвета — одна из самых сложных частей переноса.
Для начала мы попытались собрать в один список все используемые в проекте оттенки. Мы не нашли способов автоматизировать этот процесс, поэтому просто перебирали слои в проекте Photoshop и копировали их HEX, затем создавали в Figma прямоугольник этого цвета. Таким образом мы получили некоторое множество разноцветных прямоугольников — подобие нашей будущей палитры.
Со второй группой семантических цветов все понятно: ее мы оставляем такой, какая есть. В то же время общие цвета проекта необходимо упорядочить, удалить схожие и добавить недостающие. Для этого мы разложили их на подгруппы по оттенкам и упорядочили от темного к светлому. К каждой группе мы подобрали градиент цветов с определенным шагом светлоты, чтобы под каждый исходный цвет был найден подобный ему в новой палитре.
Шрифты
Этап 2. Загрузка ассетов и графического контента
На игровых проектах довольно много арта — растровых ассетов, являющихся частью интерфейса. Например, иконки, портреты, медали, изображения.
Иконки
Иконки — тот тип контента, который может быть использован в различном размере. Для этого мы перенесли все иконки (хайрезы или векторы) в Figma и вписали каждую во фрейм одного и того же размера с соблюдением необходимых отступов и правилам ресайза. Иконок оказалось не так много, поэтому мы обернули их в компоненты внутри одной группы. Теперь каждую иконку в любом используемом месте можно заменять другой за пару кликов.
Другие ассеты
Точно так же мы поступили и с остальными изображениями. Достаточно было вписать взаимозаменяемые ассеты во фреймы одинакового размера и обернуть в компоненты одной группы: либо сгруппировать в один фрейм, либо представить имя ассета в виде «GroupName / AssetName».
Таким образом, в библиотеке ассеты будут храниться по следующему пути: Library / Assets / GroupName / AssetName.
Этап 3. Создание библиотеки компонентов
В Figma предусмотрен функционал компонентов (а теперь еще и вариантов), поэтому каждый элемент необходимо отрисовать во всех его состояниях, обернуть в компоненты и объединить в варианты. Получив такую систему, мы сможем с легкостью переключать состояния элементов в инспекторе, а также централизованно менять этот элемент во всем проекте.
Как создать элемент:
Определить иерархию элементов и их состояний;
Начать с элементов в самом низу иерархии, отрисовать сперва их и все их состояния;
Далее продолжить отрисовку элементов на ступень выше, используя элементы, созданные на предыдущем шаге;
Действовать так до тех пор, пока не получится исходный элемент.
Теперь у нас есть базовый компонент, состояния подкомпонентов которого можно менять, чтобы получить новое состояние самого компонента. Его мы использовать в макетах не будем, поэтому скроем его для библиотеки за счет «_» в начале имени компонента:
Library / Cards / Lots / _BaseLot
Состояния элемента
Для отрисовки одного состояния мы берем базовый компонент, модифицируем элементы в нем под выбранное состояние, корректно именуем и оборачиваем в компонент. В библиотеке полученные состояния будут храниться в таком виде:
Library / Cards / Lots / LotHeart
Library / Cards / Lots / LotLeaf
Library / Cards / Lots / LotDrop
Как работать с состояниями элемента в проекте
Можно оставить состояния переключаемыми компонентами, как мы это делали до появления функции вариантов в Figma, и переключать их в инспекторе.
А можно объединить компоненты разных состояний в варианты и переключать в инспекторе разные состояния исходного компонента уже по свойствам.
Важное замечание
В Photoshop у нас был следующий паттерн хранения состояний элемента: все элементы хранились группами друг под другом скрытыми слоями и включались по необходимости. В Figma такого лучше избегать и использовать для этого варианты, а не скрытие.
Библиотека
Итак, мы перенесли из Photoshop все элементы интерфейса и собрали из них библиотеку элементов, которые можно использовать при создании новых экранов. Теперь не придется копировать элементы из старых макетов — достаточно просто перенести элемент из библиотеки на фрейм.
Мы вынесли для себя несколько правил для масштабирования и дополнения библиотеки:
Одинаковые элементы не должны повторяться;
Переиспользовать все, что можно переиспользовать, и не плодить сущности;
Следить за тем, чтобы внутри компонентов, находящихся не в самом низу иерархии, были только компоненты. Это желательно, но не всегда обязательно;
Использовать фреймы вместо групп и расставлять Constraints для адаптивности при создании прототипов под разные девайсы;
Не использовать не занесенные в стили цвета и шрифты.
Возникшие проблемы
Дизайнерам оказалось сложно быстро пересесть с одного инструмента на другой, поскольку они не были достаточно мотивированы. К тому же, это требовало времени, которое сложно найти в плотном графике релизов. После переноса еще какое-то время команда продолжала рисовать макеты в Photoshop, потому что так было комфортнее и на тот момент быстрее. Важно обучить и замотивировать всю команду, иначе переход будет морально тяжелым и затянется на долгие месяцы. Это и стало нашей главной ошибкой, которая до сих пор приносит немало проблем. Поэтому, если вы готовы к такому переходу, необходимо провести курсы по Figma для всех сотрудников, которые будут с ней работать.
Еще одной проблемой стало то, что Figma не может повторить некоторые свойства слоев, которые предусмотрены в Photoshop. Пришлось придумывать «костыли» или копировать готовые решения уже из верстки. Идеального повторения, к сожалению, достичь не удалось. Из проблем, с которыми столкнулись мы:
Наложение в Photoshop действует внутри группы, а в Figma — на все слои ниже в иерархии;
В Photoshop можно сделать внутреннюю обводку без наложения на заливку слоя, в Figma — нет.
Как подружить Figma с Unity
Одним из самых больших сомнений перед переносом проекта на Figma было то, что могут возникнуть сложности с версткой в Unity. Но на деле это оказалось даже проще, чем подружить с Unity Photoshop.
Во-первых, Figma предоставляет API, чтобы файлы можно было легко спарсить в JSON. Бонусом вы получаете доступ к модификации самой Figma.
Во-вторых, Figma обладает функционалом, предназначенным специально для интерфейсов, что позволяет создать из JSON сразу что-то хорошее.
В-третьих, человеку, верстающему интерфейсы в Unity, даже не требуется установленная Figma и аккаунт в ней — достаточно иметь токен UI-дизайнера и ссылку на файл.
В-четвертых, Figma поддерживает концепцию компонентов, которая очень схожа с концепцией Nested Prefabs в Unity.
Давайте разберемся, как получить из файла в Figma JSON. На сайте Figma есть подробная инструкция. Но, если разбираться в ней не очень хочется, можете просто скопировать код ниже. Благодаря нему с помощью токена и названия файла вы получите JSON с этим файлом.
Получится примерно следующий JSON, который потом с помощью любой библиотеки, умеющей парсить JSON, можно разобрать на нужные классы, а затем из них и создать uGUI-префаб.
Теперь разберемся, как получить имя файла и токен. Токен генерируется один раз и может быть найден в Settings в Figma во вкладке Personal Access Tokens.
Название файла таится в его ссылке. То есть, если ссылка на файл выглядит вот так: www.figma.com/file/NNNN/FileName, его названием будет NNNN.
Вообще, перейдя на Figma, вы будете приятно удивлены, потому что Photoshop не предоставляет никакого API для парсинга psd-файлов. Разбираться же в бинарнике psd ну очень сложно: спецификация этого файла не полная и устаревшая.
Результат
После переноса проекта в Figma прошло уже 4 месяца, и все это время мы работаем по новому пайплайну. Одним из самых важных для нас результатов стало ускорение работы примерно в 2 раза: мы избавились от проектирования на квадратах с «рыбными» текстами и переноса готовых экранов обратно в Figma: теперь мы сразу делаем прототипы из готовых экранов.
Проектирование с готовыми экранами упростило тестирование дизайна на коллегах: теперь они не задают вопросов, морща лоб, готовый ли это дизайн или просто набросок. Да и нам самим еще на этапе проектирования стало проще предвидеть проблемы, которые могут возникнуть на этапе отрисовки UI.
Еще одним важным результатом переноса стало приведение к единообразию цветовой палитры, стилей и некоторых элементов дизайна. Теперь намного удобнее использовать готовые элементы, системно модифицировать их под новые фичи (без необходимости делать это на каждом готовом экране) и переключать состояния одного элемента за пару кликов. И все это благодаря системе компонентов и вариантов Figma.
Теперь вся команда работает в одном проекте и видит результаты своих и чужих изменений сразу. Это еще один аспект, который ускорил процесс синхронизации и актуализации макетов в проекте.