форма обратной связи figma
Как сделать прототип в Figma: интерактивные компоненты
Создаём рабочий чекбокс, радиокнопку и всплывающее меню с умной анимацией.
Обложка: Оля Ежак для Skillbox Media
Каждый элемент интерфейса по-своему даёт пользователю обратную связь: меняет цвет, форму, текст, добавляет или убирает что-либо на экране. Делать прототип без компонентов очень сложно, так как вам придётся создавать очень много копий одного и того же экрана.
С помощью функции интерактивных компонентов в Figma вы можете один раз сделать анимацию элемента и затем использовать его во всех своих макетах.
Рассказываем, как анимировать ваши компоненты для прототипа.
Это руководство по продвинутой работе с прототипами и вариантами в Figma. Если вы впервые о них слышите, советуем сначала прочитать предыдущие статьи об этих инструментах:
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Базовые интерактивные элементы
Заранее настройте чекбокс, радиокнопку, обычную кнопку и переключатель. Благодаря этому у вас появится «библиотека», из которой вы сможете взять что угодно в любое время.
Каждый интерактивный компонент можно в любой момент изменить в комбайне, и они будут одинаково работать на всех экранах вашего прототипа:
Всплывающее меню с умной анимацией
Внутри одного интерактивного компонента может быть сразу несколько. Это позволяет делать сложные элементы интерфейса и быстро их менять, если вам в них что-то не нравится. Для примера сделайте всплывающее меню, в котором все пункты меняют цвет по наведению курсора.
Добавьте своё меню на прототип и проверьте результат. Даже если разместить его на нескольких фреймах прототипа, работать оно везде будет одинаково:
Также из вашего меню можно сделать ссылку на внешний фрейм прототипа. Для этого свяжите любой из пунктов меню прямо из комбайна с внешним фреймом:
Библиотеки компонентов в Figma: что это, зачем нужно и как работает
Редактируете одну кнопку — меняются все. Разбираемся с главной фишкой Figma, за которую её любят веб-дизайнеры.
Если каждую кнопку на сайте рисовать по отдельности, жизнь веб-дизайнера превратится в ад. Чтобы этого не произошло, в Figma есть компоненты.
Что такое компонент Figma
Компонент — это элемент, копии которого меняются вместе с ним. Например, поле ввода, аватар со статусом или меню. Исходный компонент называется основным (main component), его копии — экземплярами (instances).
Допустим, мы создали основной компонент — чёрный квадрат. Затем добавили два его экземпляра.
Перекрасим первый в красный цвет. Все три тоже станут красными — экземпляры наследуют параметры основного компонента.
Наряду с наследованием, экземпляры можно изменять напрямую, не разрывая при этом связь с «родителем». Например, сделать второй квадрат сиреневым, а третьему добавить обводку и растянуть.
Свойства, полученные экземплярами непосредственно, всегда приоритетны по сравнению с унаследованными. Если уменьшить и перекрасить «родителя» в жёлтый цвет, один из его «потомков» всё равно останется фиолетовым, а другой — прямоугольником, потому что эти свойства были приобретены самостоятельно, а не от основного компонента.
Основной компонент — шаблон для будущих элементов дизайна. Например, для кнопки он состоит из прямоугольника, текста и иконки. А их размер и содержание зависят от экземпляра.
Автор статей о веб-дизайне и веб-разработке с неразделённой любовью к программированию.
Что такое библиотека компонентов
Библиотека — это файл, где хранятся основные компоненты для проекта. Он точно такой же, как файл с готовым дизайном, — отличается только назначением. Если нужно добавить в проект один из стандартных элементов, дизайнер не рисует его заново, а берёт из библиотеки.
Для библиотек нет строгих стандартов оформления. Обычно компоненты структурируют и снабжают заголовками. Их удобно группировать по фреймам — например, в зависимости от интерфейса (мобильный или десктопный) и типа (уведомления, контекстные меню и тому подобное).
Зачем нужны библиотеки компонентов
Профессионалы сходятся во мнении: библиотеки компонентов — одно из главных преимуществ Figma перед другими программами для дизайна. Они позволяют:
Как создать библиотеку компонентов
Сделайте пустой файл, который станет библиотекой, и наполняйте его компонентами. Вначале нарисуйте составные части компонента. Затем выделите их и щёлкните Create Component в верхней панели.
Чтобы новую библиотеку можно было использовать в проектах, её нужно опубликовать. Сделайте это на вкладке Assets, кликнув иконку-книгу и нажав Publish.
С библиотеками проще работать, если соблюдать несколько правил:
Фрейм называют как категорию элементов. Допустим, «Уведомления» — все уведомления помещают в него. Визуально так проще ориентироваться, но самое главное — в раскрывающемся списке компонентов появится одноимённый пункт.
Как правильно использовать библиотеки
Когда библиотека опубликована для команды, её компоненты появляются на вкладке Assets в левой панели. После этого участники могут их использовать.
Поместить экземпляр компонента в дизайн можно тремя способами:
Бывает, что изменённый экземпляр уже сильно отличается от «родителя». Если он ещё понадобится в таком виде, можно сделать две вещи:
Что в итоге
Библиотеки компонентов Figma — удобный способ хранить заготовки для интерфейсов, а также делиться ими с командой и всем миром. Сохраняйте в них всё, что будет использоваться многократно. Чтобы подредактировать экземпляр, вносите правки на месте. А если уйдёте далеко от оригинала, элемент можно сделать самостоятельным компонентом.
Как рисовать универсальные компоненты, которые адаптируются к размеру экрана, создавать команды, взаимодействовать с разработчиками и не только — вы узнаете на нашем курсе. Прокачайте знание Figma и станьте настоящим профессионалом веб-дизайна!
Мои правила хорошей дизайн-системы. Компоненты и архитектура интерфейса в Figma
В этой статье я покажу, как организую структуру интерфейса, которая позволит легко создавать новые разделы продукта и менять их дизайн в будущем.
Фигма и другие современные инструменты позволяют задавать взаимосвязи между элементами, упрощая редактирование отдельных компонентов или целых экранов; группировать их в библиотеки компонентов и давать желаемые права доступа.
Эти принципы теперь называют дизайн-языком или дизайн-системой. Мы закладываем алгоритм разработки всех графических модулей и можем бесконечно масштабировать проект на все типы устройств и разрешения экранов.
По методологии Атомарного дизайна, я начну с атомов и буду двигаться дальше к более сложным компонентам. Буду работать в Фигме и продемонстрирую, что у Скетча появился серьёзный конкурент.
Итак, современный инструментарий превращает работу дизайнера уже в полноценную разработку. Понятие дизайн-системы не означает лишь только набор ui kit с концептуальными правилами и красивыми иллюстрациями. Это прежде всего система визуальной архитектуры, упорядоченная определенным образом. С ней тесно коррелирует понятие продуктового дизайна, т.к. дизайн-система может охватывать несколько продуктов внутри одной организации, подавая их конечному потребителю с помощью фирменного “дизайн-языка”. Буду считать, что грамотному читателю о плюсах такого подхода давно известно.
Кстати, если вы используете Figma, я рекомендую обратить внимания на наши готовые дизайн-системы. Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.
А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken
Раз существует понятие “дизайн-язык”, значит на нём можно “говорить”. А еще лучше — писать. Слова образуют фразы. Из фраз состоит предложение. А из предложений уже строится целая глава. Это иная метафора Atomic design’a и она мне нравится больше. Когда в июле этого года вышла Figma 2.0, буквально сразу стало ясно, что этот инструмент идеален для написания такого языка. Или системы, если хотите. У небольших компаний появилась возможность организовать грамотный дизайн-менеджмент для нескольких продуктов и не выходить за рамки одного графического редактора, не прибегая к дополнительным надстройкам/плагинам. Впрочем, и у больших компаний тоже, просто они так погрязли в дебрях мультинструментализма, что им теперь крайне сложно перестроиться. Это я про то, что только Sketch’ем им уже не обойтись для командной игры. Тут и Craft, и InvisionApp, и Marvel, и Zepplin и еще множество других ругательств, о которых вероятно вы и не слышали.
Вторая версия Фигмы меня подкупила близостью к Sketch, работой под маздаем Win и особый интерес вызывал Developer’s handoff. Это расширение редактора специально для разработчиков. Девелоперы теперь открывают исходник в браузере, видят все отступы и могут забирать код любого элемента в CSS, Swift или Android XML. Коллаборация дизайнеров и разработчиков стала еще немного эффективнее. Производительность интеграции любого дизайна ускоряется в 2-4 раза. Проверено лично. Правок минимум; багов с отступами, шрифтами и размерностями нет. Всё генерирует программа. Необходимость писать какие-то спексы в документах — в прошлом. А если вы независимый дизайнер, работаете с несколькими клиентами, то теперь гораздо проще установить эффективную связь с отделом разработки в штате вашего заказчика.
Давайте перейдем к практике. Суть данной публикации в том, чтобы продемонстрировать конкретный алгоритм визуальной разработки. Говоря проще, разработать дизайн интерфейса таким образом, чтобы его можно было кастомизировать/редактировать за минимальное число действий. В результате создается библиотека компонентов, свойства которой распространяются на связанные с ней элементы. Поменяли там — поменялось везде. А разработчикам даже не нужно нажимать “refresh” — они видят изменения в реальном времени на своих экранах. Как я сказал выше, любом дизайн-языке из “слов” образуются “фразы”, из “фраз” строится “предложение”, а из них состоит целая глава. Абстрактно говоря, нам нужна возможность быстро заменить в одной главе любое “слово” на другое.
Слова. Базовые элементы
Я начну с самых простых элементов. К “словам” можно относить заголовки H1, H2, H3 и далее, параграф текста, иконки. Любые простейшие элементы, которые входят в состав любого ui kit и из которых можно будет в дальнейшем составить “фразу”. Я стараюсь приучать себя к порядку, поэтому буду следить за неймингом элементов. Это особенно важно, если библиотекой будут пользоваться другие дизайнеры и разработчики. Хороший дизайнер начинает делать удобно не только пользователям, но и коллегам.
Далее из каждого элемента я создаю так называемый “component” (Ctrl-Alt-K). Компонент в Figma — это возможность создавать связи между однотипными единицами интерфейса или целыми разделами. Если я наделяю таким свойством, например параграф текста и использую его на определенных экранах интерфейса (copy > paste), то мне достаточно редактировать мастер-компонент, чтобы изменения распространились на все экраны. В использовании подобной иерархии вся суть этой статьи. Фигма подкрашивает фиолетовым все “components” в левой колонке:
Фразы. Многосоставные компоненты
“Фраза” — это метафора более сложных модулей, которые могут состоять из двух или более простейших элементов. Например, кнопка. Как минимум она состоит из фона (чаще всего это прямоугольник) и надписи (label). Или форма для ввода текста (input). В её составе и фон, и заголовок, и плэйсхолдер. Я сейчас ограничусь одной лишь “призрачной” кнопкой. Она будет состоять из прямоугольника без заливки и компонента H3 Header.
Почему так? Если в продукте используется несколько различных кнопок или состояний (primary, secondary, alternative, disabled и т.д), они расставлены по множеству экранов и появилась необходимость поменять шрифт, мне достаточно внести изменения всего в одном месте. Поменяв шрифт для компонента-«слова» H3 Header я автоматически распространю эти изменения и на всю библиотеку, и на все экраны интерфейса. Вот почему важно заложить корректный алгоритм визуальной разработки еще в самом начале.
Для визуализации иерархии более сложные модули я буду отрисовывать правее. В результате окажется, что двигаясь слева направо мы переходим от простых к более сложным. От “слов” к целой “главе”.
Как вы уже заметили на снимке выше, кнопка выделена, превращена в component; а в развороте слева виден её состав. Фигма позволяет вкладывать компонент внутрь другого, создавая несколько уровней иерархии, причем каждый уровень может иметь свои ответвления. Всё зависит только от сложности дизайн-модулей для создаваемого продукта. К примеру, если в библиотеке вы используете 5 различных типов кнопок с одинаковым компонентом H3 Header, то вносить изменения можно как глобально так и локально. Для глобальных изменений редактируется H3 на 1-м уровне, а для локальных редактируем вложенный компонент уже внутри конкретной кнопки и получаем изменения только для тех экранов, где такая кнопка присутствует. Для большей ясности я записал видео: сначала я изменяю глобально надписи у кнопок, а потом локально у определенных типов.
И вот тут всплывает некоторая спорная специфика инструмента, если вы вносите изменения локально в нужную категорию кнопок, то Фигма считает их приоритетными. И попытавшись изменить компонент глобально следующим шагом, не получите результата.
Предложения. От фраз к делу.
Настало время собрать что-то посложнее из “фраз” и “слов”. Я буду использовать компоненты 1-го и 2-го уровней, чтобы составить “предложение” — следующий 3-й уровень. Последнее время у меня много наработок по e-commerce, поэтому рассмотрим этот шаг на примере мини-карточки для витрины мобильного интернет-магазина.
Мини карточка состоит из компонентов: H2 (стоимость), H3 (название товара), Paragraph (краткое описание), BTN Ghost (кнопка добавления), иконки, фона и фотографии. Весь состав перечислен слева на экране выше. Ширина карточки выбрана таким образом, чтобы на экране смартфона уместилось две в ряду. По аналогии её следует превратить в компонент, чтобы написать нашу первую “главу”.
Такую карточку можно назвать модульной, т.к. она содержит компоненты первых двух уровней. Весь дизайн продукта может иметь модульную структуру, т.к. собирается из схожих по структуре компонентов. Модульность способствует порядку и радует разработчиков, т.к. действуя по системе лучше взять из библиотеки готовую мини-карточку и замостить ей экран. Можно изменить соотношение сторон, высоту, ширину, шрифты наконец. Говоря проще: не нужно в библиотеке клонировать много разных мастер-карточек, в которых вы потеряетесь по мере развития вашего продукта. Фигма позволяет вносить небольшие изменения и сохранить эту мастер-связь для быстрого редактирования.
Глава, состоящая из предложений
Мы приблизились к самому интересному. В метафоре, с которой я начал, “глава” является тем уровнем, где подаются уже самостоятельные и полноценные экраны приложения.
В “главу” можно обобщить множество однотипных экранов, например разных форм-факторов. Фигма позволяет быстро расставить constraints (настроить адаптивность), благодаря чему мини-карточку можно увеличить для планшетной или десктоп версии, не потеряв связь с мастер-компонентом. Плюс ко всему разработчикам становится понятна адаптивность любого модуля. Вопросов просто не возникает.
Таким образом получаем еще больше — трансляцию изменений под все устройства. Кстати, буквально недавно все компоненты удобно вынесли в отдельный раздел слева, попасть в который можно через табы снизу. Добавлять модули можно через drag’n’drop. До этого приходилось сильно мучаться в поиске разбросанных по холсту компонентов, когда экранов много.
Результат
В результате применения подобного дизайн-менеджмента мы получаем возможность быстро и оперативно внедрять изменения в набор экранов:
Стоит сказать, что использование только этих фич не сделает вас хорошим дизайнером, но уже продемонстрирует ваш грамотный подход к дизайн-менеджементу. Решать повседневные задачи теперь удастся эффективнее, а значит разработка продукта определенно ускорится. В Фигме крайне умный mass-select, практически идеальный snap и один из самых продвинутых pen tool. И для оптимальной командной игры использование подобной архитектуры уже необходимость.
Я уверен, что среди читателей найдутся те, для которых такой подход уже стандартный. Сегодня многие концепции и принципы кажутся вполне естественными, хотя еще вчера мы говорили “Wow!”. Я думаю, что окончательный wow-фактор в случае с Figma, это возможность использования созданной по вышеописанным принципам библиотеки внутри организации без дополнительных инструментов, плагинов или надстроек. Всё, что нужно сделать, это добавить все ваши компоненты в “Team library” и раздать ссылку всем дизайнерам и разработчикам в команде. Дизайнеры собирают новые модули и целые экраны из компонентов такой командной дизайн-библиотеки, а разработчики мгновенно получают апдейты, экспортируют все элементы в код и внедряют на продакшн. Success!
Заключение
Последние годы сильно поменялось представление о командном подходе в разработке интерфейсов. Хайп вокруг дизайн-систем сыграл свою роль. Когда буквально каждую неделю очередной западный IT-гигант выпускает свой дизайн-язык, свои правила и принципы, совершенно очевидно, что дизайнерский инструмент неизбежно встанет на те же рельсы.
Теперь к разработчикам можно отнести и дизайнеров тоже. Потому как теперь у них есть более эффективная среда, в которой им уже комфортно действовать системно и алгоритмично, закладывать нужную архитектуру, подчинять свою визуальную разработку определенным принципам. Хотя, мы еще далеки от того, чтобы вовлечь каждого дизайнера в кодинг.
“Дизайнеры должны кодить, но они не хотят”. Это абсолютно нормально, что дизайнер не любит писать код руками. В основном мы визуалы. Технарей среди дизайнеров очень мало. И всё что требуется, чтобы подтолкнуть нас к кодингу — предоставить иной подход к программированию. Нам нужна визуальная среда, в которой циклы, условия, подсчеты и анимация создавались бы простым перетаскиванием объектов в нужной последовательности.
Бьюсь об заклад, что рынок взорвет тот, кто первый выпустит в едином инструменте комбинацию Webflow + Sketch. Проблема еще не решена: дизайнер должен видеть типографику такой как в браузере, а не идеально отрендеренную в любом графическом редакторе. Особенно, когда балом правит шрифтовой дизайн.
Кстати, а какой ваш идеальный дизайнерский инструмент?
PS: Исходник прототипа БЫЛО // СТАЛО. Спасибо хабрадизайнерам, продолжайте креативить прямо в браузере (потребуется логин)
Как делать варианты элементов интерфейса в Figma
Каждый раз делать разные состояния одной и той же кнопки — долго. Варианты в Figma помогут избежать этой нудной работы.
Варианты — это группы компонентов, которые объединяются в один. Благодаря этому дизайнер может в любой момент выбрать, в каком состоянии показать элемент интерфейса: кнопку — нажатой или деактивированной, чекбокс — активным или пустым.
Рассказываем, как сделать варианты для кнопок и воспользоваться ими в макете.
Перед тем как читать эту статью, советуем узнать о функции Auto Layout и компонентах. Иначе вам будет сложно разобраться, для чего нужны варианты и как их сделать.
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Подготовка компонентов
Чтобы варианты работали, сначала нужно правильно назвать компоненты для них. Для этого в Figma есть система со слешами /:
Название элемента/Значение первого свойства/Значение второго свойства/…/Значение десятого свойства
Рекомендуем описывать варианты на английском языке. Например, отмеченный чекбокс большого размера можно назвать так:
Система названий поддерживает и русский язык, но имейте в виду, что, если ваш макет попадёт к зарубежным дизайнерам, они не смогут понять, что в нём написано:
Как сделать кнопки с системой названий в Figma
Теперь у вас есть два готовых компонента, которые можно превращать в варианты.
Создание вариантов
Чтобы создать варианты из ваших компонентов, выделите их и на панели настроек, в блоке Variants нажмите Combine as variants. Ваши компоненты объединятся в общую группу с вариантами — он называется комбайном.
Обратите внимание, что добавить в комбайн можно только компоненты. Если вместе с ними выделить группы, фреймы или копии компонентов, Figma не даст вам сделать из них варианты.
Как воспользоваться вариантом
Ваша контрастная кнопка перекрасится в серый:
Добавление новых состояний
У каждого объекта может быть сколько угодно состояний, но их важно правильно назвать, чтобы потом вы не потерялись в своём же макете. Сейчас состояния Primary и Secondary относятся к свойству Property 1 — вашему арт-директору будет непонятно, что это значит.
Чтобы переименовать Property 1, выделите весь комбайн c вариантами и на панели настроек в блоке Variants вместо Property 1 напишите Type. Теперь даже спустя десять лет кому угодно будет понятно, что в этом меню нужно выбрать тип элемента:
Как добавить новое свойство
Теперь у стиля Primary появилось новое состояние — Disable. Чтобы его активировать, выберите вашу кнопку на макете и на панели настроек в блоке Button укажите значение State — Disable:
То же самое можно сделать и с дополнительным стилем кнопки, чтобы вы могли быстро показать её отключённой.
С помощью вариантов можно менять что угодно, например цвет, размер, и добавлять иконки.
Когда вариантов становится слишком много, полезно привести весь комбайн в порядок, чтобы вы могли быстро найти любое состояние. Рекомендуем располагать всё вертикально и группировать по типу кнопок:
Не забывайте, что варианты — это те же компоненты. Если вы захотите изменить цвета или форму кнопок по всему макету, это можно сделать через комбайн.
Плагин Button Buddy
Создать варианты кнопок несложно, но отрисовывать каждую по отдельности — долго и нудно. Решить проблему поможет плагин Button Buddy, который автоматически создаёт все основные состояния по указанным вами параметрам.
Как пользоваться плагином:
У вас на макете появится готовый комбайн с базовыми состояниями кнопки:
обложка: Olyasnow для Skillbox Media