Как включить пиксели в фигме
Обновлено: 30.06.2024
Адаптивный дизайн – это способность проекта подстраиваться под все современные цифровые устройства. При разработке макета обязательно нужно предусмотреть возможность адаптива, чтобы пользователь смог комфортно просматривать страницы через телефон или планшет. Сегодня расскажем, как сделать адаптивный дизайн в графическом редакторе Figma. В него включен ряд инструментов, способных подогнать фреймы по ширине и высоте. Этот вариант адаптива называется растягивающейся версткой, где при изменении размеров окна дочерние объекты также будут меняться, расширяясь и сжимаясь.
Как работает адаптивность в figma?
Интернет-сайт рекомендуется сделать адаптивным, чтобы он одинаково корректно смотрелся на всех цифровых устройствах. Поэтому верстальщик обязан позаботиться о том, чтобы все важные элементы поместились на экране. У пользователя не должно возникнуть трудностей при просмотре страниц сайта. Если некоторые ссылки в навигации не являются важными, их следует поместить в гамбургер-меню. Этот список будет открываться при нажатии. Остальной контент рекомендуется разместить в виде ленты новостей, так как для пользователей удобнее прокручивать ленту, чтобы узнать последние апдейты и получить больше информации.
Версию страниц для смартфонов рекомендуется сделать облегченной, чтобы посетителя не отвлекали посторонние объекты. Идеальный вариант – это светлый шаблон для веб-сайта. Для телефонов стоит применить крупный шрифт для удобства чтения. Графическое сопровождение типа jpg-файлов при просмотре на ПК отображается полностью, для смартфонов их следует уменьшить, чтобы они помещались на экране полностью. Вся остальная графика, которая составляет интерфейс сайта, должна сжиматься и подстраиваться под конкретное устройство, именно так работает адаптивность. Сейчас мы разберем, как сделать резиновую верстку для вашего макета.
Работа с меню Constraints
У каждого объекта есть панель свойств, которая появляется сбоку при щелчке по форме. С её помощью можно производить разные действия – масштабировать, менять цвет и так далее. Один из параметров является Constrains, он позволяет делать привязку к краям. Для этого существуют раскрывающиеся списки меню. Каждое ключевое слово привязывает к определенному краю: left/слева, right/справа, top/сверху, bottom/снизу, center/центр. Также присутствуют пункты, где можно произвести настройку сразу по двум параметрам. Left and Right и Top and bottom.
Во всех случаях объект будет привязан к определенному краю, кроме пункта, где указано сразу два условия.
На примере выше мы задали сразу четыре условия привязки, воспользовавшись двумя списками. Здесь произойдет растягивание по всему холсту.
Scale – придает объекту свойство увеличиваться пропорционально фрейму. Масштабируются не только формы, но и отступы по краям.
Если нужно сделать центрирование контейнера, то для этого существует center, который настраивается в двух плоскостях (высота и ширина). Container будет придерживаться центра того места, где был размещен.
Крупный проект состоит из интерфейса и вложенных друг в друга блоков. Функция выравнивания пригодится, если существует задача сделать центрирование, ориентируясь на один из блоков. В таком случае стоит помнить, что манипуляция с привязкой осуществляются только внутри фрейма. Поэтому вначале создаем frame и придумываем ему имя block-1. Если он был создан за пределами макета, то переносим его на макет, у которого, предположим, название main-frame. В итоге у нас получится следующее:
Теперь rectangle (прямоугольник): применяем свойства Constrains, и квадрат будет выравниваться по отношению к block-1.
Создание адаптивного дизайна
Для создания адаптивного дизайна потребуется инструмент Auto-Layout. Он позволяет создавать динамические фреймы. Они меняются в зависимости от содержимого, если вы напишете текст, то область расшириться. Чтобы включить опцию auto-layout нужно выбрать frame и в правой панели нажать плюс, как показано на скриншоте ниже:
Если frame гораздо больше, чем текстовое поле, то при копирование в него текста произойдёт автоматическое сжатие. В нашем случае слой под названием frame-1 примет более компактный вид, как показано на картинке:
Обратите внимание на отступы по бокам, они были проставлены в настройках по умолчанию. Для их изменения следует открыть окно, нажав на иконку “Alignment and padding”. Посередине находится выравнивание, здесь предлагается сделать выравнивание по левому и правому краю, а также центру, по вертикальной плоскости и по горизонтальной, соответственно. Чтобы протестировать, рекомендуется увеличить размер области и попытаться выровнять текст внутри.
По бокам от опции “alignment” присутствуют четыре поля с цифрами. Если поменять значения, то расстояния от края до элемента изменятся. Другой способ, переназначить отступы, это воспользоваться Mixed, здесь все цифры требуется записать, как в стилях CSS, т.е. через запятую.
На панели есть две иконки “стрелки”, они указывают направление расположения “блоков”. Чтобы посмотреть, как это работает, рекомендуется разместить сразу несколько объектов, например “Rectangle”. Перед размещением нужно выключить auto-layout, если рабочая область недостаточного размера, то её следует растянуть, и уже потом размещать. Активируем снова auto-layout и в настройках меняем “alignment” по центру, а дальше щелкаем по направлению и смотрим результат:
У нас теперь несколько блоков. Над квадратами можно производить дополнительные действия, например:
- Spacing between items – отступ между прямоугольниками.
- Space between – автоматически проставляется расстояние между объектами при изменении области. Если оставить второй пункт в этом списке, то параметр первого изменится на auto.
В правой панели есть раздел resizing, он используется, когда требуется убрать пустое пространство. На выбор два раскрывающихся списка по “ширине” и “высоте”. Чтобы уменьшить область, нужно щелкнуть по “Hug contents”. На скриншоте показан пример “до” и “после”.
Примечание: наглядно можно увидеть, что если создать frame, расширить его, добавить несколько объектов, после этого применить auto-layout, то ключевые объекты будут отображены по центру, а остальное пространство будет убрано.
Внутренние примитивы также могут изменяться. Свойство Fill Container растягивает объект по всему холсту. Доступно два варианта по горизонтали и вертикали. В resizing также присутствует квадрат настроек, если на него навести мышкой, то появятся стрелки. Щелкая по ним, примитивы будут меняться в размерах.
Функцию Fill container можно использовать только на внутренних объектах фрейма. Для главной области есть hug container. Но при разработке, встречаются задачи, где требуется задействовать сразу два этих свойства. Рассмотрим пример, создадим frame и назовём его page-1, второй объект разместим внутри и дадим название left-frame. Нарисуем несколько примитивов, для каждого фрейма применим свойство auto layout, как показано ниже. Опция автоматически уменьшит слой page-1, поэтому размер width следует проставить вручную.
Щёлкнем по left-frame и настроим параметры resizing. Теперь в опции выбираем пункт, указанный на скриншоте ниже. После этого дочерний frame растянется на всю область. При изменении height у page 1, внутренний блок также будет увеличиваться или уменьшаться в размерах.
Допустим, центральный примитив rectangle, нужно сделать динамически видоизменяемым. Для этого поменяем свойства у прямоугольника, как показано в примере ниже. После выполнения всех действий при изменении параметр высоты у page1, размер rectangle также будет видоизменяться.
С текстовыми полями нужно производить те же действия. Например, при добавлении текста блоки расположенные ниже должны смещаться вниз. Как этого добиться? Для начала добавим еще frame, придумаем название container-text. Сделаем так, чтобы местоположение в иерархии было выше остальных слоев, начинаем заполнять область текстовыми полями их будет всего два.
- Краткое описание (description) статьи.
- Ссылка “читать полностью”.
В text-1 находится фрагмент статьи, взятый с официального сайта figma, а в text-2 ссылка для перехода, где можно полностью ознакомиться со статьей. Ниже показан образец, как это выглядит.
Container-text следует преобразовать в auto-layout и в resizing установить опцию fill container.
Чтобы text-2 сдвигался в зависимости при увеличении текстового поля, следует в text-1 поменять значение на Hug contents.
Ниже предоставлен пример, где при заполнении текстового поля text-1 надпись “Читать подробнее” сдвигается вниз.
Категории со статьями размещаются списком или три в ряд. Допустим, нужно сделать верстку нескольких карточек. Они будут состоять из двух блоков. Первый – это картинка статьи, вторая является общим контейнером, где будет содержаться всё, включая графическое превью (предварительный просмотр).
Начнем создание нового фрейма назовём его category-frame. Укажем размеры 1500 на 1000 пикселей. На главной области нужно добавить еще три фрейма. Имя объектам рекомендуется дать article-frame (1,2,3). Внутренняя часть карточек будет содержать превью, картинку и текст с описанием. Имя прямоугольников preview-(1,2,3). Полностью макет выглядит как на картинке:
Теперь в catеgory-frame добавим auto layout и, соответственно, то же самое нужно сделать с внутренними слоями. Внешний frame “направление по горизонтали”, внутренний – по вертикали.
При добавлении auto layers в article-frame(1-3) произойдёт сжатие объекта до минимальных размеров, вам потребуется вручную отредактировать высоту. На оставшееся пространство следует разместить два текстовых поля. Одно – это краткое описание статьи, второе – “читать подробнее”. Если вставить целый абзац, то текстовое поле расширится и верстка собьётся, как показано ниже:
После заполнения любого текстового поля с именем text-(1-2-3), надпись “читать подробнее” сместится вниз.
Особенности адаптивного дизайна для мобильных устройств
Получив техническое задание, разработчик уточняет у заказчика, под какие цифровые устройства делать дизайн. Клиент говорит – “под все”, и дизайнер озадачен, так как количество существующих разрешений велико и если нет опыта, то процесс разработки окажется трудоемким.
Для начала нужно понимать, что верстальщик работает в первую очередь с диапазоном размеров, поэтому для экранов требуется задавать жесткие рамки макета. Давайте разберемся, под какое оборудование какую ширину и высоту следует устанавливать.
- ПК – 1920 на 1280 пикселей, последний параметр можно сделать и 1440.
- Планшеты 1024 (768) на 1000.
- Смартфоны 480 (320), в некоторых случаях делают единый интерфейс на 360, тогда потребуется проверить корректность отображения верстки.
Рассмотрим задачу, где требуется разместить иконки. Для начала создадим frame для смартфона. Заходим и выбираем подходящее устройство, например, “iPhone 11 Pro Max”.
Создадим первые icons (для этого можно использовать инструмент rectangle) и упакуем их в frame. Быстрый способ это сделать – выделить объекты и нажать (Ctrl+ALT+G). Придумываем названия row-frame-1. Дальше делаем дубликаты row-frame-2, row-frame-3 и так далее, пока полностью не заполним.
К главному фрейму применим Auto-layout и в панели Design установим в Spacing Between Items 10 пикселей.
Чтобы адаптивный дизайн умел подстраиваться под все размеры цифровых устройств, можно сделать растягивающуюся верстку. Для начала у всех фреймов с названием row-frame-(1-9) установим Resizing “fill container”. То же самое нужно сделать с каждой иконкой. При увеличении размера внутренние объекты также будут менять ширину и высоту.
Вся иерархия состоит их этих настроек:
- IPhone 11 Pro Max-1 – “Fixed width и height”.
- Row-frame-(1-9) – Fill container (vertical и horizontal).
- Rectangle-(1-36) – те же настройки, что и во втором пункте.
Для того, чтобы получить доступ к опции Rectangle, нужно добавить Auto-layout во все слои с названием row-frame.
Этот вариант подойдет, когда необходимо оформить дизайн, где все блоки растягиваются и сжимаются при изменении масштаба. Что делать, если требуется оставить иконки без изменения, но при просмотре на разных устройствах увеличивать только расстояние между ними? Достаточно поменять настройки. Вот список изменений:
- Row-frame-(1-9) – Alignment and between нужно настроить на space between.
- Rectangle-(1-36) – resizing нужно настроить на fixed width и height.
После выполнения этих пунктов, иконки будут находиться на определённом расстоянии. Верстка будет подстраиваться под размер экрана.
Если в приложении требуется части интерфейса прикрепить к краям, то в этом случае подойдет опция Constrains. Размещаем блок и настраиваем Constrains по правому краю границы, второй можно прикрепить слева, как показано на картинке:
Когда дело доходит до разработки контентной части, здесь нужно сделать так, чтобы фрейм динамически расширялся при заполнении текстового поля. Как этого добиться? Просто создаем frame c именем content-frame, добавляем туда text и небольшой абзац. Подстраиваем наше описание под размеры content-frame.
Последнее, что требуется сделать, это в content-frame добавить Auto-Layout, после этого frame расширится до нужных размеров. Дальше пользователь может вписывать текст или стирать его, контентная часть будет автоматически масштабироваться по вертикали.
Figma mirror
Специальное приложение для просмотра макета на телефоне. Когда пользователь редактирует кадр в основной программе, то изменения вступают в силу и на мобильном устройстве. И все, что происходит в редакторе, отобразится на экране смартфона. Пользователь увидит, как выглядит верстка на мобильном устройстве. Вот пример работы расширения:
Адаптивный дизайн сайта – это необходимость для ведения успешного бизнеса онлайн. Многие пользователи смотрят интернет-страницы на телефонах и планшетах. Если ресурс будет динамически подстраиваться под гаджеты, то клиенты станут дольше задерживаться на странице, что положительно скажется на продвижении. Методы, приведенные в статье, помогут настроить верстку для вашего проекта в сервисе Фигма.
Всем привет, дорогие друзья! Сегодня мы рассмотрим создание сетки Bootstrap для Figma – одного из популярнейших UI-инструментов в настоящее время.
Сетка Bootstrap уже прочно вошла в стек инструментов для коммерческой разработки – она позволяет эффективно и быстро разрабатывать адаптивные сайты, значительно сокращает и оптимизирует время разработки на этапе Дизайн to Front-end. У нас уже были уроки по созданию сетки Bootstrap для различных графических программ, таких, как Photoshop, Adobe XD, Gimp, Inkscape и т.д. Ознакомиться с сопутствующими уроками и материалами:
Результат этого урока (готовые сетки Figma) вы можете скачать здесь:
Настраивается сетка в Figma довольно быстро, я рекомендую настраивать ее для каждого отдельного проекта. На странице урока вы также найдете документ Figma с сетками, которые мы сегодня создадим и сможете использовать их в качестве наглядного примера. В конце урока я покажу, как это сделать.
Итак, для начала создадим новый документ. Обычно я создаю документ для нового проекта с паттерном "Desktop":
Здесь у нас создается фрейм шириной 1440 пикселей. Это среднее универсальное значение. Конечно-же можно сделать макет шире или наоборот уже, но, в целом, начинать создание дизайна можно именно с такой ширины макета. Как я говорил ранее, сетка в Figma настраивается довольно-таки быстро и просто. Однако, что касается сетки Bootstrap, здесь есть подводные камни. Давайте разберемся подробнее.
На панели справа найдем "Layout grid" и добавим сетку со следующими параметрами:
Сетка Bootstrap с настройками по умолчанию имеет общую ширину 1140 пикселей на больших разрешениях (Extra large, см. документацию), но при создании сетки в Figma следует учитывать тот факт, что CSS-сетка имеет дополнительные отступы слева и справа по 15px, а в программе этих отступов нет, можно указывать только общее значение Gutter между колонками. Соответственно, ширина сетки в Figma будет иметь общую ширину 1100px (1140px - 15px - 15px) . Размер одной ячейки в этом случае рассчитывается следующим образом. Во-первых, у нас есть 12 промежутков по 30px (11 по 30px в самой сетке и 15px + 15px по бокам). Общая ширина всех отступов сетки составляет 12 * 30 = 360px . Теперь вычтем из общей ширины сетки Bootstrap в CSS ширину всех отступов: 1140px - 360px = 780px . Это общая ширина всех колонок без промежутков. Далее делим общую ширину всех колонок на 12 и получаем ширину одной колонки в системе сеток Bootstrap на самых больших разрешениях: 780px / 12 = 65px .
Обратите внимание в "Type" мы указали "Center" – это значит, что мы без проблем сможем в дальнейшем управлять шириной макета. Например, если макет в результате окажется слишком широким, мы сможем его обрезать. И наоборот, если понадобится увеличить ширину макета, это также можно будет сделать без опасения, что нарисованный в системе сеток контент разъедется и дизайн придется переделывать.
Кроме 12-ти колоночной системы сеток Bootstrap, я также использую и горизонтальную разметку для соблюдения вертикального ритма. Давайте добавим еще одну сетку (Rows) и зададим следующие значения:
Здесь мы указываем "Count" - "Auto" для того, чтобы вся доступная область выбранного фрейма заполнялась сеткой. Для того, чтобы сетка не была такой контрастной и не мешала работе над дизайном, я обычно прибираю значение непрозрачности цвета "Color" до 5%.
Обратите внимание, что "Type" мы можем указать как "Center" или "Top" – это самые популярные параметры горизонтальной сетки для веб-дизайна в Figma. Однако, я рекомендую использовать именно "Top", чтобы в процессе работы, если понадобится сделать макет выше, сетка не съехала и дизайн не пришлось переделывать.
В качестве "Gutter" и "Height" мы указали 10px. Это адекватный вертикальный ритм для большинства проектов, однако вы можете использовать более популярное значение 8px для этих двух параметров. Экспериментируйте.
Внимание! Здесь, стоит добавить, что если вы используете в работе стартер OptimizedHTML 5, то здесь уже определен наиболее оптимальный вертикальный ритм для дефолтного размера текста в 16px (line-height: 1.65). Эти значения являются результатом моего опыта работа над различными сайтами и являются наиболее адекватными для практически любого проекта.
Если вы планируете в дальнейшем использовать стартер OptimizedHTML 5 или общий межстрочный интервал в CSS line-height: 1.65 и дефолтный размер шрифта проекта 16px, то при создании дизайна следует устанавливать значения "Gutter" и "Height" для горизонтальной сетки в 13px:
На панели справа найдем секцию "Frame" в Figma, укажем высоту макета 3500 (H) и перейдем к созданию сетки для следующего разрешения.
При создании Bootstrap-сеток в Figma и других графических редакторах для других разрешений следует учитывать, что если для самого большого разрешения ширина фрейма свободная и может меняться, то на остальных разрешениях, которые меньше, ширина фреймов должна быть привязана к соответствующим значениям из документации Bootstrap (см. Bootstrap Grid options):
Соответственно, общая ширина фрейма для следующего разрешения составит 992px (Large):
Ширина одной Bootstrap-колонки для данного разрешения, при условии, что будет отражено 12 колонок, составит 50px. Остальные параметры Bootstrap-сетки такие-же, как у предыдущего фрейма:
Горизонтальная сетка (вертикальный ритм) для этого и последующих разрешений будет иметь те же параметры, что и у первого макета (см. скачанный файл Figma).
Отлично! Переходим к созданию сетки для следующего разрешения. Создаем новый фрейм (по документации Bootstrap ширина 768px). В данном фрейме можно также отобразить 12 колонок. Зачастую, на таком разрешении адаптивный контент еще не "схлопывается", контент максимально вытягивается по высоте. Однако, в зависимости от задач, вы можете указать и другое количество колонок. Ширина одной колонки на таком разрешении составит 30px, если количество колонок указано 12. остальные параметры – как у предыдущих макетов.
Следующий размер фрейма 576px. На таком разрешении целесообразнее отобразить 6 колонок. Ширина одной колонки 60px. Остальные параметры и горизонтальная сетка как у предыдущих макетов.
И последний фрейм сделаем шириной 320px, отобразим 2 колонки, ширина колонки 130px. Остальные параметры как у предыдущих макетов. 320px – это минимальное разрешение в веб-дизайне, так как в настоящее время уже нет устройств, способных отобразить современный веб-контент меньше этого разрешения. Обычно на таком разрешении весь контент вытягивается в длинную ленту, однако иногда бывают случаи, когда необходимо разделить дизайн на колонки и на таком маленьком разрешении. Так как отступы в любом случае одинаковые по краям, можно сделать разлиновку на 2 колонки для того, чтобы в случае необходимости у нас была возможность воспользоваться колоночной системой.
Для того, чтобы воспользоваться созданной в данном уроке системой сеток в Figma, Скачайте архив с документом Figma, распакуйте и перетащите файл в список проектов Figma (Drafts). У вас появится новый документ "Bootstrap-Figma". Откройте его.
Для того, чтобы включить или отключить сетки в Figma, воспользуйтесь горячими клавишами Ctrl + Shift + 4 .
Любой из фреймов документа "Bootstrap-Figma" вы можете выделить, скопировать Ctrl + C и вставить Ctrl + V в новый проект и использовать в своей работе.
В Фигме сетка уже вшита в систему и не нужно ничего докачивать, как это было с одной очень известной программой. Тут все под рукой. К тому же сетка у нас не в виде отдельного слоя, который может потеряться, а существует, как отдельная структура сайта.
Заходи на телеграмм канал - там еще больше полезногоСетка в Figma
Включить grid Figma можно только на фрейм. Выбери фрейм и вот тут увидишь то, что нужно и тут уже в настройках можно настроить сетку именно под себя. Создать все, что угодно, хоть бутсрап, хоть еще что-то. Настраивается все гибко и интуитивно понятно.
Кликаешь + и видишь настройки. По умолчанию создается именно сеточка с шагом в 10 пикселей. К слову сказать, любые объекты в Фигма, если ты их будешь двигать стрелочками, двигаются на 1 пиксель, а если будешь зажимать при этом Shift то двигаться они будут на 10 пикселей. Так что, если поменяешь тут значение на какое-то другое ( некоторые любят ставить размеры 8 и в этом есть разумное зерно) то придется изменить и настройки перемещения объекта с шифтом на 8. Делается это вот тут в меню
Как ты понимаешь, нужно поставить одинаковый шаг сетки и Nudge Amount, чтобы было удобнее перемещать объекты и они всегда были выровнены, как нужно, ну а если ты любишь работать в 10 пиксельной вселенной, то ничего отдельно настраивать не нужно.
Колонки в Фигме
С сеткой понятно, теперь давай разберемся с колонками. На второй вкладке ты можешь настроить колоночную сетку в Фигме.
У нас тут такие настройки:
Count — количество колонок
Gutter — межколоночный отступ ( он всегда у нас будет неизменным, на то это и колонки)))
Margin — отступ сетки от правого и левого края макета, в случае колонок, если ты настраиваешь горизонтальную сетку, то Margin будет отодвигать твои строки сверху и снизу. Теперь давай рассмотрим, что же у нас кроется в выпадающем списке Type
Stretch– тянущаяся или резиновая сетка. Колонки растягиваются на всю ширину фрейма. Можно задать только межколоночное расстояние, ширина такой колонки будет подстраиваться под ширину фрейма. Очень крутая штуковина для создания резиновый макетов и адаптива. Можно задать определенный отступ справа и слева, если говорим о колонках.
Center–Сетка по центру макета, можно настроить ширину самой колонки, но при этом при изменении ширины фрейма ширина сетки и расстояния между ними будет неизменной.
Left–тут все и так понятно.
Обрати внимание, что в одном фрейме можно создать сразу много сеток, хоть миллион.
Включить-Выключить сетку на Windows Ctrl+Shift+4. На Mac Cmd+g
Колонки bootstrap 4 Figma
Как создавать колонки разобрались, теперь давай создадим модульную систему сеток под бутстрап 4 в Фигме. Делается это очень просто. Создай фрейм, любой, какой тебе нравится. Я создал для примера с шириной 1920. Мы знаем, что ширина рабочей области в bootstrap 4 для десктопа составляет 1140 пикселей, (!)30рх по краям контейнера я не учитываю. Поэтому я просто создам прямоугольник длиной 1140 и центрую его во фрейме.
Все те же настройки и логика процесса работает и с горизонтальными сетками, поэтому расписывать что там и как я не стану.
Обрати внимание, что ты можешь вкладывать фрейм во врем и во вложенном настраивать отдельную сетку под свои нужды. Куда там динозавру фш до такого.
Линейка в Figma
Это нечто иное и работает так же, как в нашем общем друге фш. Предустановленных линеек в фигме нет, но ты всегда можешь вытащить их слева или верха рабочей области и использовать по назначению, а именно для того, чтобы выравнивать контент.
Два важнейших инструмента в Figma: полный гайд
Аудио перевод статьи
Figma — это революционная облачная платформа для проектирования, которая упрощает совместную работу команды и полностью снижает риск потери вашей работы из-за неоправданных сбоев (я смотрю на тебя, Adobe). При этом, она еще относительно молода и постоянно развивается. Не так давно в нашем списке желаний все еще были мощные функции, такие как Auto Layout и Variants (не говоря уже о Smart Animate, поддержке gif и плагинах). Если вы, как и я, всегда стремитесь идти в ногу со временем, вы захотите узнать, как применять Auto Layout и Variants в своих системах дизайна. Но не буду врать, к этому придется привыкнуть. Эти инструменты требуют, чтобы вы придерживались дисциплинированной архитектуры и не приветствуют быстрые и грязные экспериментальные изменения фреймов (также известных как артборды).
Так стоит ли оно того? Безусловно, и вот почему.
Сначала о главном: О чем мы говорим?
Auto Layout
Проще говоря, Auto Layout ( или авторазметка) позволяет объединить несколько слоев в одну строку или один столбец, причем каждый слой равноудален от другого.
Когда вы комбинируете слои с помощью Auto Layout, они будут заключены в «рамку» (или “фрейм”). Как и любой другой фрейм в Figma, фреймы Auto Layout могут быть сгруппированными.
Конечным результатом является возможность создания макетов, закрепленных на сетке. Вам больше не придется беспокоиться о том, что объекты могут находиться на несколько пикселей в стороне от направляющих. Auto Layout гарантирует, что все всегда будет идеально выровнено.
Слои, заключенные в рамку авторазметки, нельзя свободно перемещать по фрейму. В зависимости от того, какое действие вы выполняете мышкой, щелчок и перетаскивание одного из этих слоев приведет либо (1) к замене этого слоя другим, либо (2) к удалению слоя из фрейма. Такое ограничение спасает вас от самих себя: ваши проекты должны придерживаться определенной, целенаправленно разработанной и симметричной архитектуры. Это не рекомендация — они буквально должны это делать. Такой подход не означает, что вы не можете легко настроить пространственные элементы. Это просто означает, что ваши настройки будут применяться к фрейму в целом, что в любом случае является лучшей практикой. Также это именно то, что ваш разработчик будет делать при преобразовании дизайна в код (подробнее об этом позже).
Итак, как вы можете изменять элементы внутри фрейма Auto Layout?
Во-первых, я уже отмечал, что авторазметка позволяет создать строку или столбец. Вы можете изменить любой кадр с одного на другой, нажав стрелку вниз (для столбца) или стрелку вправо (для строки). Вы также можете изменить "пространство между" каждым слоем, увеличивая или уменьшая число рядом с символом ]〡[. Кроме того, вы можете настроить заполнение всего кадра (т.е. пространство вокруг), увеличивая или уменьшая число рядом с символом ▣. И, наконец, можно определить, как слои будут выровнены относительно рамки авторазметки. Они могут быть выровнены в любом направлении по осям X и Y (т.е. сверху-слева, сверху-в центре, сверху-справа, по центру-слева, по центру-в центре, по центру-справа, снизу-слева, снизу-в центре, снизу-справа).
В дополнение к этим явным элементам управления авторазметкой, существуют ограничения на фреймы авторазметки, которые Figma называет "Изменение размера". Изменение размеров позволяет вам определять следующие моменты:
- будет ли высота и/или ширина фрейма авторазметки "включать" его содержимое (т.е. соответствуют ли его размеры размерам содержимого);
- заполнено ли пространство основного контейнера фрейма (т.е. его размеры соответствуют размерам контейнера, внутри которого он находится);
- остается ли фрейм фиксированной ширины независимо от его содержимого или основного контейнера (т.е. его размеры задаются вами вручную и не будут меняться, пока вы их не измените).
На практике это означает, что вы можете использовать такие простые удобства, как автоматическая адаптация высоты компонента к объему текста внутри него. Или расширенная форма, естественно подстраивающаяся под дополнительные поля ввода. Или целая страница, адаптирующаяся к добавлению или вычитанию различных элементов. И все это без необходимости уточнять интервалы или вручную перемещать другие компоненты на странице.
Variants
Для того чтобы понять, что такое Variants (т.е. Варианты (компонентов)), необходимо иметь базовое представление о Компонентах Figma. Те из вас, кто пришел из мира Sketch, знают компоненты под другим названием: "Символы". И Компоненты, и Символы концептуально являются синонимами "шаблонов". Другими словами, они позволяют нам создать мастер-шаблон дизайна. Каждый раз, когда мы дублируем мастер, мы создаем "экземпляр" оригинала. Экземпляр всегда совпадает с эталоном, поэтому любые изменения, внесенные в эталон, каскадируются на каждый экземпляр. Это может сэкономить вам много времени и свести к минимуму риск создания несогласованных проектов с течением времени. Например, допустим, вы преобразовываете красную кнопку в компонент. Если вы решите изменить красную кнопку на синюю, каждый экземпляр этой кнопки в вашей системе дизайна также изменится на синий. Иными словами, вам не нужно вручную обновлять каждую кнопку — достаточно обновить первую созданную кнопку. Представьте это как отношения родителя и ребенка: родитель устанавливает правила, а ребенок следует им.
Но что, если вам нужно несколько кнопок? Например, первичная кнопка и вторичная кнопка. В этом случае вы создадите два компонента: один под названием "primary", а другой под названием "secondary". Затем вы сгруппируете эти компоненты, назвав каждый из них с помощью синтаксиса именования Figma. Синтаксис выглядит следующим образом:
[Категория] / [Подкатегория] / [Под-подкатегория] / […]
В случае с нашими кнопками у нас есть одна категория (т.е. кнопки) и две подкатегории (т.е. первичная и вторичная). Поэтому название нашей основной кнопки будет выглядеть следующим образом:
А название нашей вторичной кнопки будет выглядеть следующим образом:
И Figma будет отображать их на своей боковой панели вот так:
Как вы видите, Figma сгруппировала оба экземпляра в папку под названием "Buttons". В этом примере мы использовали только одну подкатегорию, но вы можете иметь столько, сколько вам нужно. Например, возможно, я хочу иметь активное и неактивное состояние для каждого типа кнопок. Это будет выглядеть следующим образом:
- Кнопки / Основные / Активные
- Кнопки / Основные / Неактивные
- Кнопки / Вторичный / Активный
- Кнопки / Вторичный / Неактивный
Каким бы мощным ни был этот синтаксис, представьте себе его применение к более сложным компонентам. или даже к компонентам, вложенным в компоненты (например, компонент кнопки внутри компонента формы внутри компонента заголовка). Чем больше ваша система проектирования, тем более утомительным, трудоемким и склонным к ошибкам становится этот процесс.
Введите: Variants. Варианты — как и буквально следует из названия: это вариации одного компонента. В нашем примере выше у нас есть четыре независимых компонента, объединенных с помощью умного синтаксиса.
Если выделить каждый из них и нажать на кнопку "Объединить как варианты" в боковой панели, то все эти компоненты объединятся в один компонент, состоящий из четырех вариантов.
На изображении выше видно, что каждая кнопка теперь представлена как один компонент. С правой стороны кнопка объединения вариантов была заменена двумя рядами свойств. В свойстве 1 указан тип кнопки (например, Primary или Secondary), а в свойстве 2 — состояние кнопки (например, Active или Inactive). Щелкнув на имени свойства, вы можете переименовать его. Например, я переименовал эти свойства в "Тип" и "Состояние".
Если вы скопируете экземпляр своего варианта кнопки, вы увидите возможность изменить вариант, применяемый к этому экземпляру.
Все довольно просто, но можно сделать еще проще. Если переименовать свойство "State" в "Active" и изменить значения на "True" или "False", Figma сообразит и преобразует выпадающий список в переключатель. Когда он включен, отображается активное состояние. В выключенном состоянии отображается неактивное состояние.
Figma по сути рассматривает свойства как переменные. Как и в математике или коде, переменная — это имя, равное значению. Например, если X = 10, то 5 + X = 15, потому что X эквивалентно значению 10. Аналогично, наши свойства требуют имени (например, "Тип") и значения (например, Primary или Secondary). Это можно записать и по-другому: Тип = Первичный.
Фактически, Figma позволяет добавлять свойства, изменять существующие свойства или изменять значения свойств, используя именно этот синтаксис. Если вы посмотрите на панель "Слои", то увидите, что каждое свойство записано с использованием этого синтаксиса и разделено запятыми.
Двойной щелчок по варианту позволит вам редактировать эти свойства по своему усмотрению. Просто убедитесь, что любое свойство, которое вы добавляете к одному варианту, также добавляется ко всем другим вариантам в данном компоненте. Значения могут быть разными, но вариант должен существовать. Если свойство отсутствует в варианте, Figma не поймет, как с ним обращаться, потому что не получила значения там, где ожидала его найти.
Хорошо, так в чем же преимущество?
Есть два основных преимущества. Первое — это невероятная последовательность и модульность. Поскольку фреймы и варианты авторазметки могут быть вложены в другие фреймы и компоненты, вы можете создавать страницы, на которых все — от целого раздела до одной кнопки — может быть добавлено, убрано или изменено одним кликом.
Это удобно, когда, например, вы создали шаблон целевой страницы для маркетинговой команды, а им нужно создать отдельные версии для каждой рекламной кампании. Или, если использовать пример, ориентированный на продукт, когда вам нужно переключить макет между различными административными разрешениями. Варианты упрощают процесс переключения, а автоматическая верстка гарантирует, что каждая версия вашего шаблона будет идеальна до пикселя.
Второе и, возможно, более важное преимущество — совместимость с разработчиками. И Auto Layout, и Variants говорят на языке кода. Вы, вероятно, знаете, что в Figma есть вкладка "Inspect", которая преобразует ваши проекты в простой код для облегчения процесса преобразования статических проектов в динамические интерфейсы. Возможно, вы не знаете, что до появления Auto Layout, Figma позиционировала элементы "абсолютно" внутри фрейма. Для тех из вас, кто не знаком с абсолютным позиционированием, просто знайте, что в мире адаптивного дизайна это. абсолютно. ужасная идея (или, если вам интересно, вы можете узнать больше здесь). Вместо абсолютного позиционирования современные элементы фронтенда позиционируются относительно друг друга (т.е. относительное позиционирование). Авторазметка позиционирует элементы относительно, позволяя разработчикам получать более значимые фрагменты кода из вкладки Inspect. Это может показаться тривиальным, но это не так. В конце концов, ничто не имеет значения, если реальное приложение не отражает макеты. Чем больше мы можем сделать, чтобы помочь разработчикам в реализации нашего видения, тем лучше.
Отлично, а в чем подвох?
Если вы работаете с командой, которая незнакома или не заинтересована в этих новых инструментах, Auto Layout и Variants могут привести к путанице и разочарованию. Оба инструмента требуют дисциплины, и ни один из них не позволяет быстро и рандомно корректировать макеты. Прямое редактирование экземпляра компонента (с включенными вариантами или иным способом) отсоединяет его от мастера, что не позволяет ему наследовать обновления до сброса (и, как вы догадались, сброс стирает все ваши переопределения). Кроме того, автоматическая верстка предотвращает изменения, которые не соответствуют ранее заданной архитектуре сетки. Это может привести к тому, что незнающие или просто раздраженные дизайнеры удаляют фреймы авторазметки в качестве быстрого решения проблемы.
Во многих отношениях такие обходные пути имеют смысл. Конструкции рождаются в процессе итеративного процесса проб и ошибок. Сложные инструменты мало способствуют такому поведению и в то же время сдерживают творческий потенциал. Поэтому, чтобы стимулировать их внедрение, я советую дизайнерам поработать над дубликатами компонентов и фреймов. После того как они окончательно оформили свое видение в черновике, они могут изменить архитектуру макета в Auto Layout и импортировать его в главный компонент, где он будет автоматически применен ко всем экземплярам. Для некоторых этот процесс кажется достаточно простым. Для других он кажется громоздким. В любом случае, небольшая дополнительная работа — это справедливая плата за более простую, устойчивую и масштабируемую систему проектирования.
Выводы
Использование авторазметки и вариантов может уменьшить нежелательную изменчивость в вашей системе проектирования, упростить работу по обслуживанию и облегчить процесс проектирования и разработки. Но чтобы это произошло, вы и ваша команда должны быть заинтересованы в этом. Неубежденным членам команды будет сложнее приложить дополнительные усилия, что приведет к использованию коротких путей и быстрых исправлений, разбросанных по всему вашему дизайну. Даже один непоследовательный шаблон дизайна может сбить с толку разработчиков, которые справедливо предположат, что отклонения являются преднамеренными. Это замедляет время разработки и, в худшем случае, приводит к неправильному пользовательскому интерфейсу в реальном приложении.
При этом период адаптации вполне оправдан и стоит того. Для настороженных членов команды я рекомендую провести несколько “внеклассных” занятий во время обеденного перерыва, в ходе которых вы будете руководить своей командой при выполнении примеров проектов. Figma предлагает отличные образовательные ресурсы по авторазметке и вариантам, которые вы можете найти здесь и здесь, соответственно.
Читайте также: