Новый инструмент в Фигме
Интерактивный прототип и иллюстрированное описание инструмента “Breakpoints” который можно было бы воплотить в фигме
Всем привет, это моя первая статья и как сказал один чувак: “к счастью не уголовная”. Поэтому надеюсь на ваше понимание 🙂
В ней я хочу вам рассказать о потенциально новом функционале который мог бы вывести работу в фигме на новый уровень.
Предисловие
Работая в фигме над большим проектом, мне в голову начали приходить идеи потенциальных функций и инструментов которые можно было бы добавить в фигму.
И одной из таких идей был инструмент “Breakpoints”.
Согласитесь, было бы неплохо если бы в фигме можно было создавать не просто резиновый дизайн а адаптивный! Чтобы изменяя ширину страницы дизайн адаптировался под новые размеры.
Так мы могли бы более тщательно протестировать все адаптации еще на этапе дизайна, а верстальщику было бы удобней видеть в реальном времени как изменяется тот или иной элемент дизайна в зависимости от ширины сайта.
Да и клиенты могли бы сразу видеть как будет выглядеть их сайт не зависимо с какого устройства они открыли вашу ссылку.
Что такое брейкпоинты?
Брейкпоинты это контрольные точки проходя через которые дизайн сайта изменяется и адаптируется под новые условия.
У нас есть три дизайна страницы сайта:
Дизайн №1 - отображается на экранах от 400 px до 500 px по ширине.
Дизайн №2 - отображается на экранах от 500 px до 800 px по ширине.
Дизайн №3 - отображается на экранах от 800 px до 1000 px по ширине.
Вот эти переходы от одного диапазона к другому и есть прохождение через контрольные точки.
Для наглядности откройте сайт medium.com и уменьшая/увеличивая ширину браузера вы сможете наблюдать изменения расположения блоков на странице сайта.
Брейкпоинты в других программах
Когда мне это пришло в голову, я подумал что неплохо было бы продумать как это будет работать и всем об этом рассказать.
Но погуглив пару минут понял что я далеко не первый кому в голову пришла эта идея. Даже больше, подобный функционал уже осуществили в других программах, а значит это возможно осуществить и в фигме.
Вот пример брейкпоинтов в Adobe Muse, а вот как работают брейпоинты в WebFlow.
Как это будет выглядеть в итоге?
Перед тем как перейти к подробному описанию инструмента я хотел бы показать как это могло бы выглядеть в итоге.
Давайте представим что мы уже открыли фигму, создали три дизайна страницы, 960, 740 и 480 пикселей по ширине, потом всё настроили, создали брейкпоинты и перешли в режим просмотра.
На видео видно как при изменении ширины сайта, дизайн страницы адаптируется под новые размеры.
Подробнее об интерфейсе и принципе работы инструмента будет описано далее.
Важно!
Независимо от настоящего значения слова “брейкпоинт” в статье я буду ему придавать немного другое значение (не спрашивайте почему).
В статье я называю брейкпоинтом пакет фреймов разного размера.
Хотя правильно было бы называть брейкпоинтами сами фреймы.
Принцип работы нового инструмента и его интерфейс:
На картинке ниже вы видите как выглядит проект с одним созданным брейкпоинтом “Homepage” в который мы добавили три фрейма “Homepage 960”, “Homepage 740”, “Homepage 480”.
Слева панель “Breakpoints” со списком брейкпоинтов и фреймов которые они содержат
А в центре на холсте отображаются фреймы добавленные в тот или иной брейкпоинт.
Прежде чем перейти к подробному описанию интерфейса и принципов работы инструмента, я хочу вам показать интерактивный прототип в котором мы рассматриваем сценарий создания и настройки брейкпоинта. Пройдите сценарий от начала до конца чтоб лучше понимать о чем в дальнейшем пойдет речь.
Давайте представим что мы уже нарисовали дизайн главной страницы сайта в трех размерах 960px, 740px, 480px и для удобства поместили каждый размер на отдельную страницу (Pages) на панели слои.
С этого и начнем:
Интерактивный прототип
P.S. естественно при реальной работе с брейкпоинтами нам не придется так долго настраивать параметр “breakpoint width” у каждого фрейма, достаточно лишь раз создать стиль настроек, выбрать все фреймы к которым мы хотим добавить этот стиль и применить его.
В прототипе я специально показал работу инструмента максимально подробно.
Подробное описание элементов интерфейса
1 Вкладка “Брейкпоинты”
Новая вкладка при нажатии на которую открывается панель с брейкпоинтами. По аналогии с панелью “слои”.
2 “Добавить брейкпоинт”
Нажимая на “+” мы создаем брейкпоинт (в примере “Homepage”) в который мы будем добавлять фреймы разного размера.
Структура панели “брейкпоинты” аналогична панели “Слои”. Сначала мы создаем страницы/брейкпоинты, а потом выбрав нужную страницу/брейкпоинт создаем в ней фреймы.
В случае со вкладкой “брейкпоинты” мы фрейм не создаем а добавляем уже ранее созданный из панели “слои”.
3 “Свернуть брейкпоинты”
При нажатии на стрелку, список брейкпоинтов скрывается по аналогии со списком страниц на панели “слои”.
На левой картинке список брейкпоинтов развернут а на правой свернут.
В данном случае у нас только один брейкпоинт “Homepage”.
4 “Брейкпоинт”
Тут отображается список брейкпоинтов которые мы создали.
В данном случае у нас только один брейкпоинт “Homepage”.
5 “Добавить фрейм”
Нажимая на “+” открывается панель “слои” для выбора фрейма или нескольких фреймов которые нужно добавить в брейкпоинт.
6 “Фреймы”
Фреймы которые мы добавили в брейкпоинт “Homepage”.
Во вкладке “брейкпоинты” так же как и во вкладке “слои” можно раскрыть фрейм для просмотра содержимых слоев и для работы с ними.
Благодаря этому дизайнер может переходить во вкладку “брейкпоинты” и работать с отдельной страницей сайта всех размеров на одном холсте не отвлекаясь на другие страницы сайта, при этом не нарушая структуру расположения фреймов на панели “слои”.
7 “Иконка фрейма”
Иконка нужна для облегчения поиска фрейма нужного размера среди других фреймов.
Иконку можно поменять в настройках фрейма. На данный момент доступно 7 иконок: смартфон и планшет в портретном и ландшафтном положении, ноутбук, настольный компьютер, и телевизор. Далее это будет показано более подробно.
8 “Название брейкпоинта”
При создании брейкпоинта, автоматически присваивается имя: “breakpoint 1”, “breakpoint 2”, “breakpoint 3” и тд.
Брейкпоинт можно переименовать дважды кликнув по его имени.
9 “Убрать фрейм из брейкпоинта”
Чтобы убрать фрейм из брейкпоинта достаточно нажать на фрейм правой кнопкой мыши и выбрать “Remove frame”.
Брейкпоинты на панели инструментов
Вверху на панели инструментов есть иконка “брейкпоинты” по нажатию на которую выпадает список созданных брейкпоинтов и кнопка создания брейкпоинтов.
Далее подробнее:
10 “Создать брейкпоинт”
Создать брейкпоинт можно не заходя в панель“брейкпоинты”.
При нажатии на “New Breakpoint” создается новый брейкпоинт с присвоенным по умолчанию именем.
11 “Переименование брейкпоинта”
Чтобы переименовать брейкпоинт, нужно нажать на иконку которая появляется при наведении на брейкпоинт и ввести новое имя.
12 “Добавление фреймов в брейкпоинт”
Добавлять фреймы в брейкпоинт так же можно не заходя во вкладку “брейкпоинты”.
Находясь на панели “слои” можно выбрать нужный фрейм, открыть данное всплывающее окно на панели инструментов и выбрать брейкпоинт в который вы хотите добавить фрейм.
Слева показан брейкпоинт “Homepage” в который мы хотим добавить фрейм, а справа уже показано что фрейм добавлен в брейкпоинт.
Подробнее о настройках фреймов
Давайте подробнее рассмотрим как настраиваются фреймы которые мы будем добавлять в брейкпоинт.
Выбрав нужный фрейм, на правой панели мы можем добавить ему новый параметр “breakpoint width”.
13 “Создать настройку”
Нажимая на “+” создается настройка фрейма.
14 “Минимальная ширина”
Минимальная ширина до которой будет сжиматься фрейм.
15 “Максимальная ширина”
Максимальная ширина до которой будет растягиваться фрейм.
16 “Иконка фрейма”
Иконка которая будет отображаться рядом с названием фрейма на панели “Breakpoints”.
17 “Добавить стиль”
При нажатии на кнопку “Добавить стиль” открывается окно в котором можно выбрать ранее созданный стиль настроек.
18 “Редактировать стиль”
При нажатии на иконку открывается стандартное окно редактирования стиля в котором можно изменить все настройки стиля, изменить имя и добавить описание стиля.
Как влияют настройки фрейма
Давайте разберем примеры чтоб понимать за что отвечает каждая настройка параметра “breakpoint width”.
Картинка состоит из двух частей:
Слева - настройки фрейма.
Справа - за что отвечают настройки в режиме просмотра.
Оранжевым я показал рабочую ширину фрейма. Это та ширина которую мы задаём при создании фрейма.
Режим просмотра и подробное описание его интерфейса
Так выглядит режим просмотра, вы его уже видели в начале статьи в видео.
В новом режиме просмотра внизу появилась размерная шкала на которой отмечены границы фреймов и другие элементы управления о которых мы поговорим далее.
Так же я переместил кнопку “Restart” и кнопки переключения слайдов в углы.
Давайте разберем подробнее что нового в интерфейсе режима просмотра:
Магнит
Функция магнит работает почти по тому же принципу как и направляющие в фигме или фотошопе, когда мы перемещаем направляющую то она как бы магнитится к границам фреймов и объектов.
Когда мы перемещаем бегунок достаточно близко к минимальной, максимальной или рабочей ширине фреймов то он к ним магнитится.
Функция имеет три режима:
1) Выключено— можно свободно уменьшать и увеличивать ширину дизайна, бегунок не будет магнититься.
2) Включено— можно свободно уменьшать и увеличивать ширину дизайна но приближаясь к минимальной, максимальной и рабочей ширине фреймов - бегунок как бы магнитится к ним.
3) Усиленно — при уменьшении и увеличении ширины дизайна бегунок передвигается только по точкам минимальной, максимальной и рабочей ширине фреймов без промежуточных размеров.
Эта функция нужна чтобы было удобно переключатся между минимальной, максимальной и рабочей шириной фреймов.
4) Поле ввода
Поле для точного ввода ширины дизайна. Если вы хотите посмотреть дизайн в определенной ширине, то гораздо легче ввести значение в поле чем вручную передвигать бегунок по шкале.
5) Бегунок
Работает как индикатор текущей ширины дизайна а так же как слайдер потянув за который можно уменьшить или увеличить ширину дизайна.
6) Уменьшить
Уменьшает размерную шкалу по ширине, на случай если не все брейкпоинты помещаются на экране.
7) Увеличить
Увеличивает размерную шкалу по ширине, на случай если нужно более точно протестировать отдельный брейкпоинт.
8) Маркер
Маркер для уменьшения или увеличения ширины дизайна.
Теперь прочитав статью и поняв как работает инструмент можно еще раз посмотреть демонстрацию работы инструмента:
Конец
Конечно же это просто прототип инструмента, нет никаких гарантий что он когда нибудь появится в фигме, но я все же решил поделиться идеей, а там будь как будет 😊.
В любом случае это был хороший опыт. Пока я делал этот инструмент я понял что это совсем не легкое занятие, нужно не только сделать удобный инструмент но и предусмотреть дальнейшее его развитие в софте. Чтоб он не конфликтовал с уже существующими функциями и с функциями которые могли бы теоретически быть внедрены в будущем.
Например когда я разрабатывал этот инструмент мне пришлось его 3 раза переделать с нуля, и 2 раза переписать статью, так как в процессе разработки я вдруг понимал что инструмент становится слишком сложным, или начинает конфликтовать с другими функциями фигмы, или становится слишком ограниченным и бесполезным.
По этому не факт что и этот вариант идеален, но я старался.
У меня есть еще несколько идей для новых функций и инструментов фигмы, в том числе и по улучшению создания адаптивного дизайна в фигме, по этому если вам интересно — подписывайтесь, ну или не подписывайтесь😃.
P.S. в статье 57 раз упоминается слово “брейкпоинт” и 50 раз слово “фрейм” 🙂
