что такое drafts в фигме
Разбор UI/UX на примере прототипа в Figma и основные принципы
Кому адресована статья
В данной публикации я хочу помочь начинающим и «не очень» бизнес-аналитикам, менеджерам проектов, владельцам продуктов, желающим сделать свой первый сайт и всем-всем, кому надо сделать макет сайта или приложения, а он не знает с какой стороны подступиться к делу.
В сети интернет масса материалов на эту тему, но в большинстве своем они или слишком поверхностны, либо требуют знания терминологии и опыта работы с конкретной системой для создания прототипов. Не претендуя на «создание золота», я все же надеюсь, что моя статья будет полезна и интересна желающим погрузиться в славный мир создания макетов с помощью современных средств, а не путем создания рисунков в Paint, Word или Excel. То есть, эта статья для «чайников» в части создания рабочих прототипов.
Сначала я кратко опишу, что такое прототип и UI/UX дизайн, потом опишу инструменты для их создания, а в конце статьи пошагово разберу небольшой пример создания прототипа в одном из инструментов – Figma.
Вместо введения
Разработка нового продукта в современном мире – дело дорогое, а иногда очень и очень дорогое. Даже самое небольшое изменение стоит денег. Цена ошибки велика и измеряется не только в стоимости доработки, но и в упущенной выгоде, потерянных клиентах и доли рынка. Поэтому очень важно еще до начала разработки продумать и согласовать все внешние атрибуты реализуемого функционала: типы пользоватлей, что конкретно они будут делать и зачем, дизайн страниц и кнопок, включая текст и картинки, а так же сценарии использования.
Как это сделать? Написать на бумажке – можно и нужно, но что поймет пользователь по итогам прочитанного и будет ли потом удобно разработчику реализовывать систему? Решение давно придумано – создать сначала макет, а потом рабочий прототип. Пусть макет будет «деревянным», а в прототипе будут только «открываться двери», но уже на этом шаге заказчик сможет «пощупать» свой продукт и своевременно внести замечания.
То что написано выше относится к любому виду продукта, как физическому, так и электронному. Далее мы будем говорить о прототипах в сфере ИТ (сайты, приложения, корпоративные информационные системы и т.д.), определим, что такое UI и UX, какием критериям должен отвечать прототип в продуктовой разработке, рассмотрим некоторые особенности среды для создания прототипов Figma.
Что такое прототип ИТ продукта? Каким он должен быть?
Прототип – это динамическая модель продукта, симулирующая взаимодействие пользователя с интерфейсов, с помощью которой можно дешево и быстро получить обратную связь от заказчика или представителей целевой аудитории.
Важно отметить, что прототип не является дизайн-макетом сайта (мокапом) или вайерфреймом (набором блоков будущего продукта). Он может визуально отличаться от готового продукта. Самое главное в прототипе это то, что он является рабочим инструментом для проверки гипотез и логики, отработки пользовательских сценариев. То есть прототип должен быть кликабельным.
Основные принципы прототипирования:
Прототипирование достаточно дорогая и время-затратная форма дизайн коммуникации. Так же стоит отметить, что прототипы обычно не являются лучшей документацией, которую можно представить, поскольку они требуют он «читателя» некоторых усилий, чтобы понять интерфейс. Однако при реализации крупных проектов без них не обойтись, потому как именно с помощью прототипа можно проверить будущий продукт на деле, проанализировать все его достоинства и недостатки, получить наиболее точную обратную связь от потенциальных пользователей и в дальнейшем сэкономить куда большие суммы на доработку неактуального функционала.
Необходимо помнить, что прототип продукта — это не конечная версия. Но именно он поможет сделать продукт ближе к идеалу, вовремя найти изъяны и грамотно спланировать дальнейший список действий.
Что такое UI/UX?
UX/UI дизайн существует с незапамятных времен и относится не только к приложениям и сайтам. Просто раньше он назывался по-другому. Например, швейная машинка Зингер. Ведь кто-то еще в 19м веке придумал, как она должна выглядеть и как ей пользоваться. При этом в основе лежала цель, которую должен достигнуть пользователь – сшить что-то быстро, красиво и качественно.
Так, что же представляют собой UI и UX дизайн?
UI — расшифровывается как user interface и переводится «пользовательский интерфейс». Под этим термином обычно понимают визуализацию экранных форм и интерфейсов. UI – это про графический дизайн. UI-дизайнер работает с цветами, композицией, анимацией, шрифтами. На основе черновых схематичных набросков (вайрфреймов) UI-дизайнер собирает финальный дизайн-макет.
UX или User Experience переводится как «пользовательский опыт». То есть это про то, как работать с интерфейсом, удается ли пользователю достичь цели, легко это или сложно. UX дизайнер перекладывает клиентский опыт на интерфейс, строит и проверяет гипотезы взаимодействия пользователя с системой.
Под UX/UI дизайном понимают проектирование любых пользовательских интерфейсов, в которых удобство использования так же важно, как и внешний вид.
UX и UI дизайны часто путают, так как они идут рядом друг с другом, но все же это разные понятия, которые в конце пути должны слиться в единое целое.
Связь прототипа и UX/UI дизайна
Является ли прототип информационной системы UX/UI дизайном? На мой взгляд, является.
Является ли UI/UX дизайн прототипом? Да, но только в случае, если бизнес логика наложена на интерфейс пользователя тем или иным способом. Если пользовательский опыт описан где-то на бумажке и его невозможно продемонстрировать клиенту на интерфейсе, то у нас есть отдельно UI и UX дизайны, но прототип отсутствует.
Есть хороший пример прототипа без разработки ПО. На листах бумаги рисуются страницы сайта. Экспериментатор садится перед пользователем и кладет перед ним лист с главной страницей сайта. Пользователь пальцем тыкает на кнопку или показывает на текстовое поле, поговаривая, что он туда вводит. На каждое действие пользователя экспериментатор заменяет предыдущий лист новым, в котором отображен ответ системы на действия пользователя.
UI есть — это листы бумаги с нарисованными кнопками. UX есть – это действия пользователя. Разработка есть — это действия экспериментатора. Прототип есть, так как подобным образом можно проверить пользовательский опыт и получить обратную связь от клиента.
Но, что будет, если убрать экспериментатора и оставить пользователя наедине с листами бумаги? Останется UX/UI дизайн, а прототип работать не будет. А значит, будет невозможно протестировать логику работы системы.
Инструменты для создания динамических прототипов
нужно отобразить другую.
Далее в качестве иллюстрации создания прототипа рассмотрим пример создания личной страницы в Figma.
Что такое Figma?
Figma — это программа для веб-дизайнеров, с помощью которой можно создавать не только прототипы, но и конечные интерфейсы сайтов и приложений. Процесс работы в программе интуитивно понятен, а возможность совместной одновременной работы над проектом привлекает все больше и больше команд к реализации прототипов именно в Figma.
Плюсы и минусы Figma
К плюсам работы в Figma можно отнести:
Пример создания простейшего прототипа в Figma
Простейший прототип в Figma может создать даже школьник. Ниже в качестве примера работы с инструментом я опишу процесс создания личной страницы. Это будет двухстраничный сайт. На первой странице я помещу небольшой текстовый блок и фотографию, на второй – контакты, так же будет создан хедер с меню.
Шаг 1. Регистрация
Не обязательно регистрировать отдельный аккаунт в Figma. Если у Вас есть Google-почта, то можно зайти в сервис с ее помощью. При первичном открытии Figma сразу предложит пройти краткое обучение работы с программой.
Шаг 2. Создание проекта
Для создания нового проекта достаточно нажать «+» в правом верхнем углу экран. Там же можно открыть один из ранее загруженных шаблонов.
Шаг 3. Создание рабочей области страницы
Прежде чем создать рабочую область будущего сайта или приложения необходимо определить, на каких устройствах она будет отображаться. Это важно, так как на разных моделях мониторов, смартфонов и планшетах макеты будут отображаться по-разному и может случиться, что Ваша фотография улетит куда-нибудь не туда.
Но сейчас речь не об адаптивном дизайне, а о том, что создавая рабочую область, мы по факту создаем основу интерфейса будущего прототипа, и пользователь на выбранном типе устройства будет видеть наш макет так, как он выглядит в Figma. Отдельно отмечу, что в Figma рабочая область сайта называется фреймом.
Чтобы создать основу будущей страницы необходимо нажать клавишу «F» и в появившемся меню справа дважды щелкнуть на выбранный выше тип устройства.
Получим белый лист, у которого можно изменить размер, фон и другие параметры и на котором создается интерфейс страницы.
Шаг 4. Добавление картинки
В Figma очень легко добавлять и обрезать картинки под любые формы. Для этого достаточно добавить на рабочую область нужные фигуру и изображение, выделить оба объекта с помощью сочетания клавиш ctrl и нажать сочетание ctrl+alt+M. При этом важно, чтобы картинка была выше фигуры. Выделять фигуры можно как на рабочей области, так и на панели слева, щелкая на их названия.
Шаг 5. Добавление текстового поля
Чтобы добавить текст необходимо нажать клавишу с буквой «Т» и выделить на рабочей области место для текстового поля. Параметры текстового блока можно изменить в ленте справа. Например, можно отцентрировать блок по центру рабочей области.
Шаг 6. Создание меню
В данной статье я не преследую научить читателя всем аспектам работы с Figma, поэтому меню у нас будет самое простое – двухкнопочное. Кнопки представляют собой прямоугольники, объединенные с текстовым полем. Можно объединить объекты в группу, нажав CTRL+G, а потом отцентрировать текстовое поле по центру будущих кнопок.
Шаг 7. Дублирование основы страницы
В основание страницы входит: рабочая область, меню и текстовое поле. Чтобы создать копию ее копию можно вынести маску изображения вне группы объектов первой страницы. Для этого достаточно левой кнопкой мыши нажать на название маски и перетащить иконку вверх. Затем в перечне объектов выбрать группу объектов, входящих в основание первой страницы, и нажать CTRL+D.
Шаг 8. Добавление внешних ссылок
Очень часто одностраничные сайты создаются только с одной целью – увеличить посещаемость основного сайта. То есть, одностраничник фактически представляет собой ссылку на сторонний ресурс. К сожалению, пока в Figma можно поставить ссылку только на текст. Для этого необходимо выбрать текстовое поле и нажать на значок сцепки вверху экрана и ввести адрес стороннего сайта.
Шаг 9. Добавление ссылок между страницами
Добавление ссылок на объекты внутри Figma аналогично добавлению ссылок на внешние источники за исключением того, что надо где-то взять ссылку на внутренний объект. Для этого надо кликнуть правой кнопкой мыши по объекту и выбрать в выпадающем меню Copy/Paste и Copy Link.
Шаг 10. Демонстрация прототипа
Последний шаг – демонстрация прототипа заказчику. Самое простое – нажать кнопку «Share» в правом верхнем углу экрана и во всплывающем окне выбрать «Сopy Link».
Результат
Вы можете просмотреть и прокликать выполненный прототип, пройдя по ссылке.
Видеоуроки по реализации прототипов в FIGMA
В качестве заключения хочу приложить ссылку на видеоуроки, созданные телеграмм-каналом «Наука и дизайн». Всего 2,5 часа в 15ти уроках по использованию FIGMA, в которых рассмотрены все основные функции и кнопки.
Еще хороший ресурс с видеоуроками по созданию прототипов в Figma.
Figma — простое решение для дизайнера, сложное решение для верстальщика
Если вы работаете в области web-разработки, то рано или поздно, вам суждено будет познакомиться с Figma. Смиритесь с этим фактом и начинайте изучать. Я же попробую описать данный продукт, с точки зрения повседневного пользователя.
Для начала стоит упомянуть о парочке приятных моментов, за которые дизайнеры любят использовать Figma. Что ж приступим:
Самый неоспоримый плюс – халява
В отличие от повседневных продуктов дизайна, будь то Adobe пакет (Photoshop, Illustrator, Adobe XD … ), или Bohemian Coding (Sketch) эта программа условно бесплатная для пользователей. Разумеется за определенные финансовые вливания Вы получите дополнительные плюшки, но и без оных, продукт выглядит вполне достойно. Будем надеяться, что данная политика не поменяется, и правообладатели не начнут закручивать гайки. Аминь.
Для тех кто не в теме – это способность одновременно работать над одним проектом нескольким людям. И когда я написал одновременно, то это действительно так, я как верстальщик, вижу, как дизайнер(или даже дизайнеры) правят проект realtime прям на своем мониторе. Выглядит этот эффект как teamViewer. Дизайнер больше не хранит свои макеты локально, теперь это всё живет в облаках. Не нужно больше обмениваться скриншотами с менеджером, процесс создания проекта стал публичным, необходим только браузер с нормальной скоростью Интернета.
Задействован принцип кроссплатформенности
Стала не важна операционная система (Windows, MacOS, Linux) верстальщика и дизайнера. Они смогут работать над одним проектом без проблемы несовместимости ОС.
Удобные быстрые клавиши
Если вы уже привыкли работать с графическими редакторами посредством hot key для вас не составит труда быстро освоиться с новым функционалом.
Программа имеет довольно толковое описание клавиш быстрого вызова, и к тому же они сильно повторяют функционал клавиш Photoshop или Sketch, за что авторам отдельное спасибо. Все ведь ленивые и не хотят опять обучаться, как вызвать элемент Pen.
Возможность работы с векторной графикой
В Figma можно работать не только с растровыми изображениями, но и с векторной графикой, экспортируя и импортируя готовые решения в формат SVG. Эта фишка очень полезна, особенно если вы беспокоитесь о производительности своего web проекта, который можно очень сильно ухудшить, если вставлять не тот формат, или не того размера.
Возможность создания компонентов
Да, для верстальщиков поясню, что в дизайне тоже есть компоненты. И им тоже даровано свойство Наследования (привет ООП). К примеру можно создать типовую кнопку, а потом “продублировать ” её по всем артбордам. И потом, когда от заказчика придёт желание перекрасить все кнопки в розовый горошек, это всё решается за пару кликов (разумеется, если дизайнер умеет данным свойством пользоваться)
В Фигме есть функционал настраиваемых плагинов, и их там довольно много.
Представлены как продукты частных компаний, так и реализации open source сообщества. Пока что, из-за частых обновлений софта можно увидеть забагованость функционала, но я уверен, что это поправят.
А теперь о негативных моментах, с которыми сталкиваются пользователи Figma в процессе работы, ну или о том, чего так не хватает, а очень надо.
Проблема с определением фактических размеров элементов и расстояния между ними
К сожалению, в процессе верстки постоянно сталкиваюсь с проблемою узнать реальное расстояние между элементами. Особенно плохо обстоят дела, если дизайнер забыл очистить картинки от прозрачного фона (transparent background) или некорректно прописал межстрочный интервал для текста.
Иногда эту проблему можно решить, выбрав элемент отсчета, а затем с зажатой клавишей Alt нажать на элемент, расстояние до которого необходимо узнать, но это не всегда работает.
Перекрытие и заблокированные слои
Очень часто происходят случаи, что получив ссылку на макет сайта, верстальщик не может изъять нужные элементы дизайна по причине того, что они перекрыты вышестоящими слоями, или же эти слои вообще заморожены.
Проблемы с текстом
а если открыть данный шаблон уже в режиме дизайнера, то уже можно наблюдать, что там Roboto Bold задействовано.
Семейство шрифта вроде ж одно и то, а только в процессе верстки его всё равно через свойство @font-face отдельно подключать надо, иначе эффекта как на макете не получить. И пока не затяните на свой проект, вы этого не узнаете (и можно долго играться со свойством font-width).
Если же вы работаете не только с открытыми Google шрифтами, но и используете личный подключаемый набор, а он ещё и кирилличный, то будьте готовы к приключениям.
Отдельные танцы с бубном начинаются, если ваш дизайнер очень любит градиентные шрифты с тенями и обводками.
Тут в код, предоставляемый Фигмой, можно вообще не смотреть. Как вариант решения проблемы вы можете сохранить данный текст в SVG (иногда это дешевле чем импортировать к странице новый шрифт), ну а если всё-таки будет необходимость заниматься решением данной проблемы на серьезном уровне, то опять забирайте макет на свой личный проект.
Тут правда у меня возникли вопросы, почему возле ползунков смены значения градиента разработчики поленились вывести хотя бы процент текущего значения, не говоря уже про угол направления градиента, и мне как верстальщику приходиться самому угадывать какое значение надо будет поставить в background: linear-gradient, а потом починить это через background-clip: text; Собственно свойство text-stroke в коде фигмы я пока тоже не встречал, хотя возможно это связано что оно ещё не во всех браузерах зеленое.
*Делитесь своими мнениями в комментариях, почему это может быть так сложно реализовать?
Figma является облачным продуктом
Иначе говоря, если у Вас нету связи с глобальной паутиной на хороших скоростях, возвращайтесь в свою пещеру к настенной живописи, или переходите на оффлайновые продукты. Тут Фигма увы бессильна и Ваше творчество так и останется недоступно для общественности, и не важно, что сроки горят, и завтра сдавать проект.
Работа в фигме расхолаживает дизайнера
Возможно, конечно, это лично моё субъективное мнение, но макеты, которые отдаются дизайнерами под верстку сайтов, ниже качеством по сравнению с макетами, выполненными в Photoshop или Sketch. (* я прям чувствую, что сейчас у кого-то подгорело)
И ладно, если с текстом это ещё может нормально прокатить, ленивый верстальщик с шестнадцатеричного представления цвета
скорее всего перейдет к rgba представлению
А вот если дизайнер решит делать такую штуку к блоку элементов (там где про background-color, color, background: linear-gradient ….), при этом, половина элементов будет с прозрачностью, а вторая, нет, то тут можно во вкладку Code и не смотреть.
В общем, Фигму нельзя рекомендовать как начальный инструмент для молодого дизайнера. Порог входа, тут пониже будет, но и нервы вы своими макетами коллегам испортите.
Отсутствие нормальной Темной темы
Это очень печально, но пока в Фигме нет возможности адекватно менять визуальное представление рабочего пространства под свои нужды. Особенно остро это стает когда пользуешься приложением, а не браузерной версией где можно извращается, ставя поверх браузера какие-то дополнения, плагины. Разуметься присутствуют плагины умельцев, но поскольку Фигма очень часто апдейтиться, то плагины за ней не успевают.
Лучше б конечно, чтоб за данный функционал отвечали те, кто пишет продукт
Личные попытки поставить Темную тему. (Windows 10, Chrome 76) были печальны.
*Возможно, у владельцев Mac-ов дела обстоят лучше. Делитесь в комментариях…
О том почему это важно и полезно можете посмотреть в презентации Тёмная сторона веба, Никиты Дубко Надеюсь что поправят. Всё-таки дизайнеры — тоже люди, и им тоже надо дать возможность комфортно работать 8 часов в сутки 5 дней в неделю.
Вот такой вот кратенький обзорчик Figma у меня вышел с пожеланиями и ворчанием.
Надеюсь, что мой пост прочитает кто-то из разработчиков данного продукта и сможет его улучшить. В любом случае за данным продуктом я вижу будущее, и желательно, чтоб он развивался в правильном направлении.
5 лайфхаков в Figma: повтор действий, изменение картинок, функциональный пробел
Рассказываем, как быстро скопировать несколько одинаковых блоков, исправить обрезанную иллюстрацию и выровнять макет по сетке.
Иллюстрация: Оля Ежак для Skillbox Media
В Figma есть множество скрытых функций и горячих клавиш, которые самостоятельно найти не так просто. Но если их освоить, вы сможете ускорить работу над макетом: быстрее корректировать размер фрейма или меньше ошибаться с выделением объектов.
Рассказываем о пяти простых лайфхаках, которые помогут вам быстрее работать в Figma.
Дублировать предыдущее действие
В Figma дизайнерам часто нужно копировать одни и те же элементы: плашки, карточки, кнопки, макеты с экранами. Если этих элементов десять или 20, то приходится на это тратить много времени: и копировать, и выравнивать отступы. Чтобы не делать всё это вручную, нажимайте Ctrl + D, и Figma продублирует то, что вы сделали в последний раз. В случае с копированием все отступы сами собой получатся одинаковыми:
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Игнорировать пропорции фрейма
Обычно при изменении размера фрейма за ним меняются пропорции внутренних объектов: их расположение и размер. Это удобно при проверке макета под разные экраны. Но если вы просто хотите изменить размер фрейма, эта функция вам помешает.
Чтобы пропорции внутренних объектов не менялись, при изменении фрейма зажмите Ctrl:
Изменить отображаемую часть картинки
Если вы случайно обрезали фотографию неправильно, это можно быстро исправить, изменив видимую часть изображения. При этом контейнер под иллюстрацию останется прежним:
Настроить шаг отступа
С помощью стрелок на клавиатуре в Figma можно сдвигать любой элемент в соответствующую сторону на один пиксель. А если при этом зажать Shift, блок будет сдвигаться сразу на десять пикселей.
Если вы работаете с сайтом на 8-пиксельной сетке, стандартный шаг в Figma для вас будет неудобен. Чтобы его изменить, нажмите кнопку 
, затем перейдите в Preferences и Nudge Amount. В появившемся меню измените шаг смещения блока:
Расширенные функции пробела
При выделении нескольких объектов у вас есть шанс ошибиться и выбрать не те. Чтобы переместить область выделения в нужную точку, зажмите пробел и передвигайте мышку. Если отпустить пробел, область можно будет изменить:
Примерно так же можно использовать пробел при создании фигуры: если она встанет не там, просто зажмите пробел и переместите её куда нужно. Кстати, если зажать Shift, фигура будет изменять размер пропорционально:
По умолчанию Figma пытается расположить любой объект внутри фрейма, находящегося над ним. Но если вам это не нужно, просто зажмите пробел во время перемещения: