Как сделать точку по середине строки в figma
Обновлено: 06.07.2024
Горячие клавиши это та вещь которая значительно ускоряет работу специалиста с программами, не обязательно знать их все, но всегда нужно знать те основные без которых не обходится любой проект.
Самые необходимые на мой взгляд клавиши я распишу тут, а в конце статьи будет небольшой бонус.
Создание текстового поля, при нажатии появится строка в которою можно вводить текст. Если нажать и потянуть появится текстовое поле с ограниченными размерами.
Рисуем овал, дополнительные клавиши такие же как и у прямоугольника.
Пипетка, позволяет выбрать цвет не копаясь в глубинах палитры.
Эту клавишу я нашел для себя пока готовил статью.
Создать группу из выделенных объектов, выбираем то что хотим объединить, нажимаем, получаем группу, помогает организовать макет.
Выделяем объект, отводим мышку в сторону, смотрим расстояния до границ фрейма. Наведя мышку на другой объект получим расстояние до него. Очень удобно.
Уже упоминалось. Выделили, тянем за угол, увеличиваем пропорционально, можно тянуть за стороны и так же увеличивать сохраняя пропорции, экспериментируем, смотрим что получается, так же с помощью этой клавиши можно поворачивать объекты на 45° , 90°.
Противоположная сторона останется на месте, куда тянем туда и увеличивается.
Удобная штука, пока меняем размер можно изменить расположение объекта, если он вдруг съехал. А так же зажав пробел и тянуть мышкой можно перемещаться по холсту.
Вот так же интересная команда, так же нашел когда готовил статью, зажимаем если хотим увеличить фрейм, но не хотим чтоб там что либо изменялось, игнорирует ограничения которые мы ставили(или не ставили, я вот пока с ними не работаю, не научился еще)
Эта штучка тоже прикольная, помогает на маленьких экранах, нажимаем, все инструменты пропадают остается только рабочее поле.
Масштаб 100%, реальный размер, периодически нужно клацать, чтоб не терять связь с миром, если не нажимать можно начать мельчить или наоборот делать все гигантским. Следим за размером того что рисуем.
Вот вы сделали кнопочку одну или не кнопочку и дальше не переживаем, копируем ее свойства и вставляем куда нужно, на любой объект. Копирует вроде все, вы там еще проверьте, мало ли я что упустил.
По быстрому отзеркалить, очень удобно и очень быстро. Берем объект, нажимаем, он развернулся. Удобно? Удобно.
Создаем масочку, не забывай что объект для которого делается маска должен быть сверху.
Это мы зайдем в настройки фигуры, там можно прям по точкам трансформировать практически любые объекты.
Еще одно открытие пока статью писал, нарисовал квадратики или кружочки куда картинки будешь ставить, можешь много нарисовать, после этого жмешь эти кнопочки, выбираешь картинки которые ты уже подготовил в одной папочке, и клацаешь на те объекты куда какая фотка пойдет(есть превьюшка какая фотка сейчас будет вставляться, не запутаешься)
Вот еще один помощник, меняем прозрачность 1 это 10%, 0 это 100%.
Итак бонусы. Начнём с того который я тоже нашел пока писал статью, сам в шоке как много я упускал. Все команды можно посмотреть достаточно удобно в фигме вот тут.
Figma с обновления от декабря 2019 года поддерживает автоматическое выравнивание элементов относительно краев фрейма.
Кнопка (длинный текст)
Автоматическое выравнивание позволяет создавать компоненты, чувствительные к размерам своего содержимого. Самый яркий пример — кнопка, общий размер которой меняется в зависимости от для текста.
В верстке эквивалентом данного параметра можно назвать Padding.
На практике данная опция, разумеется, нужна не только для добавления кнопок, но и для создания любых однотипных элементов — div-вов и контейнеров.
Как включить Auto Layout (Padding/пэддинг)
Чтобы включить Auto Layout выберите несколько элементов и нажмите Shift + A (либо выберите пункт Add Auto Layout).
Если среди элементов нет вектора (прямоугольника), который был бы на заднем плане и располагался так, что все остальные элементы находились бы в его рамках, то Фигма создаст новый фрейм, в который поместит все выбранные элементы.
Если же такой вектор есть, Фигма назначит этот вектор Фрейдом, сохранив его параметры (цвет, округление, тень и так далее).
Также стоит учесть, что для корректной работы у текста должны быть выставлены корректные параметры масштабирования (вытягивать по длине).
Параметры выравнивания доступны в окне инструментов в правой части экрана. Выберите фрейм, для которого назначено выравнивание, чтобы отредактировать их.
Параметры Auto Layout
Параметры
Horizontal / Vertical — выравнивание элементов будет происходит по горизонтали или по вертикали
Horizontal padding — отступ от левого и правого краев фрейма
Vertical padding — отступ от верхнего и нижнего краев фрейма
Spacing Between Items — расстояние между элементами внутри фрейма (по вертикали или горизонтали — зависит от выбранного выравнивания)
Fixed или Auto (стрелка) изменения длины и ширины — в зависимости от выбранного типа выравнивания, вы можете указать способ изменения величины фрейма в другом измерении (для Horizontal — высоты, для Vertical — ширины)
Как использовать Auto Layout (с новой панелью)
Чтобы включить Auto Layout выберите несколько элементов и нажмите Shift + A (либо выберите пункт Add Auto Layout).
Если среди элементов нет вектора (прямоугольника), который был бы на заднем плане и располагался так, что все остальные элементы находились бы в его рамках, то Фигма создаст новый фрейм, в который поместит все выбранные элементы.
Если же такой вектор есть, Фигма назначит этот вектор Фрейдом, сохранив его параметры (цвет, округление, тень и так далее).
Новый интерфейс
Рассмотрим, как устроена новая панель.
Вложенность
Вы можете добавлять один фрейм с Auto Layout в друго фрейм с указанным пэддингом, если родительский фрейм может вместить в себя дочерний.
Вложенные фреймы с выравниванием сразу обоих фреймов
Вложенные фреймы с выравниванием сразу обоих фреймов
Управление
Вы можете перемещать элементы в очередности кнопками вверх-вниз, вправо-влево, либо перетаскивая элементы внутри фрейма
Figma — программа, используемая дизайнерами для совместной работы над проектом.
Ещё некоторое время назад в Figma отсутствовали плагины (дополнительные инструменты), с помощью которых можно было бы оптимизировать работу. Но так было раньше. Сейчас можно выбрать наиболее полезные и популярные плагины. О них мы сегодня и поговорим.
Топ-64 популярных плагинов для Figma
Content Reel
Плагин, который входит в первую тройку полезности. Он закрывает все потребности, связанные с контентом. С его помощью можно наполнять текстовыми данными свой макет. Содержит более 100 видов текста, 100 вариантов заливки, библиотеки со значками Microsoft. А если не нашли нужных данных, то можно загрузить свой текст или изображение.
Wireframe
Autoflow
Плагин, который визуализирует связи между объектами. С его помощью можно соединить стрелками картинки, тем самым показать последовательность действий. Очень удобно, что в Autoflow при перемещении кадров перемещаются и сами стрелки. Все происходит автоматически.
Clay Mockups 3D
Плагин позволяет вставлять фреймы в мокапы устройств. Можно настроить цвет, угол камеры и модель девайса. Для работы необходимо поместить дизайн в макет устройства, чтобы он отобразился в нужном месте (сайте, портфолио и т.п).
Morph
С его помощью можно создавать оригинальные эффекты, что украсит ваш проект. Действия уже заложены в программе и ими можно пользоваться сразу же. Эффекты можно использовать по одному или в комбинации с другими. Morph поможет сэкономить ваше время.
Ваш Путь в IT начинается здесь
Подробнее
Image Tracer
Умеет переводить растр в вектор, создавать точную копию изображения в векторном виде. Отличный вариант, если нужно быстро удалить фон, отредактировать очертания, поменять цвет, задать обводку. Плагин выручит при создании иллюстраций, работы с логотипами и значками.
Datavizer
Плагин для создания гистограмм, линейных и точечных графиков. Для создания дашбордов — Datavizer просто незаменимая вещь. Если нужен точный график, то данные можно загрузить при помощи файлов CSV или JSON. Для демонстрационного графика, используемого как визуал, подойдет функция Use random data.
Blend
Плагин расставляет выбранный шейп по выбранному пути, т.е. размножает фигуру.
Coda for Figma
Этот плагин работает с Сoda — инструментом для создания документов. Возможно загружать данные с Gmail, Spotify, Wikipedia и т.д.
Хотите больше зарабатывать или работать удалённо? Запутались в разнообразии профессий и не знаете, куда двигаться?
Команда GeekBrains вместе с экспертами по построению карьеры подготовили документы, которые помогут найти и выбрать востребованную высокооплачиваемую профессию.
Скачивайте и используйте уже сегодня:
Каналы для поиска работы
Список из 26 ресурсов и 34 Telegram-каналов
Топ-30 самых востребованных и высокооплачиваемых профессий 2022
Рейтинг наиболее актуальных специальностей в 9 направлениях
Color Kit
Плагин позволяет генерировать различные оттенки выбранного цвета. Если раньше для этого использовали другие программы, то теперь получить десятки оттенков определенного цвета можно сразу в Figma.
Design Lint
Модуль находит недостающие стили на всех слоях проекта. Многие дизайнеры сталкиваются с такой проблемой, когда при сдаче макета обнаруживаются расхождения: не тот цвет, шрифт и т.п. Design Lint решит эту задачу, автоматически убрав несоответствия. При этом плагин учитывает исправления, внесенные дизайнером.
Figmotion
Инструмент для анимации, который выведет ваш проект на порядок выше. Можно создавать расширенные анимации непосредственно в Figma, не прибегая к сторонним программам. Плагином Figmotion легко пользоваться. Сделать картинку анимированной можно с помощью mp4, gif или экспортировать как CSS или JSON.
Table Generator
Плагин автоматизирует добавление различных табличных данных. Реальная помощь дизайнеру при работе с таблицами. Имеются стилевые настройки для ячеек.
Isometric
Простой, но функциональный плагин. Он создает изометрические слои. Пользоваться просто и легко: нужно выбрать слой, запустить плагин, указать угол и сторону вращения.
LilGrid
Модуль организует элементы в нужной сетке. Другими словами, наводит порядок в интерфейсе. Отличный инструмент для организации пространства. Он не меняет дизайн, только систематизирует элементы.
Color Blind
GIF Export
Плагин экспортирует гифку из фрейма. Удобно, когда редактор не поддерживает gif. Установив GIF Export, анимированные картинки можно экспортировать в гиф-файлы внутри Figma.
Dot Grid
Хороший помощник для создания красивых точечных сеток. Преобразить сетку можно различными инструментами: изменить цвет заливки и обводки, размеры, разрывы. Плагин заполнит пустоту внутри сетки.
Мы вместе с экспертами по построению карьеры подготовили документы, которые помогут не ошибиться с выбором и определить, какая профессия в IT подходит именно вам.
Благодаря этим гайдам 76% наших студентов смогли найти востребованную профессию своей мечты!
Скоро мы уберем их из открытого доступа, успейте скачать бесплатно:
Гайд по профессиям в IT
5 профессий с данными о навыках и средней заработной плате
100 тыс. руб за 100 дней с новой профессией
Список из 6 востребованных профессий с заработком от 100 тыс. руб
Все профессии, которые есть в IT-сфере
63 профессии и необходимые для них навыки
Критические ошибки, которые могут разрушить карьеру
Собрали 7 типичных ошибок. Их нужно избегать каждому!
Get Waves
Плагин генерирует SVG-волны, с его помощью вы можете создавать свои кривые и рандомизировать их.
Map Maker
Map Maker позволяет быстро создавать индивидуальную карту. На данный момент поддерживает Google Maps и Mapbox. Чтобы сгенерировать карту местности, достаточно ввести адрес в программе с предварительно установленным расширением Maker.
Motion
Ещё один плагин для создания анимации. Позволяет экспортировать свою анимацию любым способом: GIF, кадры, sprite 24/60 кадров в секунду.
BeatFlyer Lite
Плагин имеет платные варианты, но его бесплатной версии вполне достаточно, если умело использовать настройки. BeatFlyer Lite помогает анимировать изображение в несколько кликов. Движения можно добавлять независимыми слоями или комбинировать нужные эффекты.
TinyImage Compressor
С помощью программного модуля можно экспортировать ZIP-файл сжатых изображений JPG и PNG напрямую из Figma. Размер изображения уменьшается до 90% без потери качества. Однако TinyImage Compressor имеет ограничение на бесплатное сжатие файлов — до 15 штук. Но продвинутые дизайнеры отмечают отличную работу плагина, за которую не жалко заплатить.
Image tracer
Переводит черно-белые растровые картинки в вектор. Про иллюстратор теперь можно забыть. Плагин берет все выбранные слои и объединяет их в одно изображение, затем преобразует их в черно-белый векторный формат.
Oblique
Плагин дополняет векторные объекты третьим измерением. С помощью Oblique можно создать объемные сложные предметы (псевдо 3d, изометрия), в том числе и текст.
Halftones
Приложение добавляет точечные или полутоновые фильтры на изображение. Очень простой в использовании плагин.
Flipbook Animator GIF
Интересный плагин для анимации, который улучшит любой дизайн. Имеет множество функций, в том числе предварительный просмотр, изменение скорости анимации, инверсию, экспорт анимации в gif.
Chroma Colors
Создает стили цвета. Для работы нужно выбрать объект с заливкой и запустить плагин. Цветовые стили создаются автоматически. Нет нужды искать определенный цвет, можно просто выбрать из предложенных.
Movie Posters
Модуль добавляет случайный постер фильма, мультфильма, сериала, популярных на сегодняшний день. Плагин понравится тем, кто создает сайты и аналогичные площадки по кино.
Tumble
Spellchecker
Это плагин для работы с текстом. Распознает орфографические ошибки в тексте на русском, украинском и английском языках. В наличии сотни миллионов слов и готовых фраз. В этом ему помогает сервис Yandex API.Speller.
Tracking
С помощью плагина вы можете создавать, обновлять, добавлять аннотации отслеживания непосредственно из файла Figma.
Geometric
Модуль создаёт математические фигуры, кривые, различные элементы. С Geometric с лёгкость можно создать сложные узоры, например, спирали, астероиды, тригонометрические объекты и т.д. Математические фигуры периодически обновляются, разработчики планируют расширить их список.
Able – Friction free accessibility
Плагин сравнивает контраст между двумя слоями — минимизирует время и усилия дизайнера. Приложение можно оставить открытым и пользоваться по мере надобности, не нужно каждый раз его запускать.
Remove BG
Плагин в один клик поможет удалить фон у изображения. Быстрая и четкая работа Remove BG заменит необходимость пользоваться другими программами.
Contrast
Tailwind Color Generator
Программный модуль создает палитру стилей Tailwind-like из выбранного цвета. Обычно такая процедура занимает много времени, но благодаря Tailwind Color Generator основная часть работы делается автоматически. Из одного цвета плагин генерирует 10 оттенков (включая изначальный цвет). Полученные цветовые решения можно распределить на панели стилей.
Figmoji
Данный плагин добавляет эмодзи в формате svg. Пока поддерживается только Twitter Emojis.
Nisa Text Splitter
Очередной плагин-помощник для работы с текстами и списками. Он помогает разделить их на мелкие фрагменты (строки, столбцы, отдельные буквы). Сохраняет стиль после разделения текста.
Brandfetch
Плагин Brandfetch экономит время на поиски логотипа. Просто укажите ссылку на сайт и нужный логотип сразу подгрузится на Figma.
Unsplash
С помощью плагина можно вставить случайную картинку в свой проект или найти конкретную. Лицензия позволяет использовать изображения для коммерческих и личных целей.
Figma to HTML, CSS, React & more!
Данный программный модуль помогает конвертировать figma-дизайн в высококачественный адаптивный HTML, CSS, React, Vue и др., сохраняя все цвета.
Image Palette
Плагин извлекает пять самых ярких цветов из всей палитры выбранного изображения. Для этого используется специальный алгоритм, но он может показать необычные результаты: извлеченные цвета могут не соответствовать шестнадцатеричным кодам на картинке. Но, возможно, такой цвет вам и нужен.
Batch Styler
Когда нужно настроить одинаковый стиль для нескольких проектов, то данный плагин выручит. Он изменяет несколько текстовых стилей за раз, избавляя дизайнера редактировать каждый отдельно взятый текст.
Split Shape
Плагин разделяет текстовые слои, фреймы, фигуры на несколько составляющих. Полезная вещь для тех, кому нужно сгенерировать данные в определенном контейнере. Размер вычисляется автоматически.
Similayer
Font Scale
Плагин подойдет для новичков и тех дизайнеров, которые только нарабатывают навыки. Инструмент поможет быстро создать последовательную гармоничную иерархию типографики.
Avatars
Плагин добавляет случайные аватарки пользователей в заданную вами область. Форма может быть любая: квадрат, звезда, круг. Изображение будет выглядеть в виде заливки.
QR Code Generator
QR-коды часто используются в дизайне. Название плагина говорит само за себя — он помогает быстро создать или вставить векторный QR-код.
Change Text
Hidden Kitten
Котята давно в тренде, и данный плагин может вставить случайного котика в ваш проект, придав ему эмоциональности. Эти милые животные знают толк в дизайне, запустив плагин они будут появляться в случайном месте выбранного вами фрейма.
Blobs
Нужны уникальные каплевидные формы или абстрактные обтекаемые элементы? Blobs поможет вам их создать.
Appearance
С этим плагином вы можете сделать темную/светлую тему.
Icon Resizer
Делает иконки одного размера в квадратной рамке. Нужно выбрать один или несколько фреймов, затем настроить картинку и размер рамки. Благодаря Icon Resizer не нужно вручную настраивать размеры иконок, приводить все к единому стилю, выравнивать изображение по центру. Пара движений мышкой и все готово!
Style Organizer
TinyImage Compressor
Данный плагин понадобится для того, чтобы экспортировать готовый проект из Figma. Если объемы файлов достаточно большие, то они увеличивают время экспорта, а TinyImage Compressor сжимает размеры до 90 %, сохраняя исходное качество. Плагин поддерживает файлы jpg, png, gif и другие.
Iconify
Импортировать иконки в Figma поможет плагин Iconify. Возможно, кому-то он не очень подходит, но это оптимальный бесплатный ресурс. Он содержит более 40000 различных иконок из Material-design, Jam Icons, EmojiOne, Twitter Emoji и других библиотек. Импорт идет в виде векторных фигур.
Status Annotations
Плагин облегчает взаимодействие с командой. Он помогает быстро отобразить статус вашего проекта.
Notepad
Это своего рода блокнот для заметок. В Notepad можно делать записи и просматривать их по ходу работы над макетами. Заметки сохраняются автоматически и их можно смотреть везде, где вы используете Figma.
Charts
Если нужно создать графики и диаграммы, то вам поможет этот плагин. Он использует случайные или реальные данные, поддерживает копирование-вставку из Excel, Numbers, Google Sheets.
Два важнейших инструмента в Figma: полный гайд
Аудио перевод статьи
Figma — это революционная облачная платформа для проектирования, которая упрощает совместную работу команды и полностью снижает риск потери вашей работы из-за неоправданных сбоев (я смотрю на тебя, Adobe). При этом, она еще относительно молода и постоянно развивается. Не так давно в нашем списке желаний все еще были мощные функции, такие как Auto Layout и Variants (не говоря уже о Smart Animate, поддержке gif и плагинах). Если вы, как и я, всегда стремитесь идти в ногу со временем, вы захотите узнать, как применять Auto Layout и Variants в своих системах дизайна. Но не буду врать, к этому придется привыкнуть. Эти инструменты требуют, чтобы вы придерживались дисциплинированной архитектуры и не приветствуют быстрые и грязные экспериментальные изменения фреймов (также известных как артборды).
Так стоит ли оно того? Безусловно, и вот почему.
Сначала о главном: О чем мы говорим?
Auto Layout
Проще говоря, 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 предлагает отличные образовательные ресурсы по авторазметке и вариантам, которые вы можете найти здесь и здесь, соответственно.
Читайте также: