Auto Layout в Figma на русском языке Уроки и обучение Figma на русском

Содержание

• Создавайте компоненты забавной формы
• Дизайн-библиотека в Figma: кнопки и формы для ввода информации
• советов по компонентам Figma
• Что такое библиотека компонентов
• More from Дизайн-кабак
• Auto Layout в Figma на русском языке
• Три явных плюса от ультимейт компонента

Исходный компонент называется основным , его копии — экземплярами . Если каждую кнопку на сайте рисовать по отдельности, жизнь веб-дизайнера превратится в ад. Чтобы этого не произошло, в Figma есть компоненты.

Это базовый компонент кита, который покрывает большинство кейсов. Если мне понадобится что-то добавить, я добавлю, а если нужно сделать редизайн общего стиля, то кастомизирую детальки компонента и вуаля. Если мне понадобится что-то добавить, я добавлю, а если нужно сделать редизайн общего стиля, то кастомизирую детальки компонента — и вуаля. С текстовыми контейнерами дела обстоят поинтереснее, их нужно сделать столько, сколько у нас размерностей левой части. В моей демке есть маленькая иконка, средняя картинка и большая картинка, поэтому я сделал три контейнера, обычно больше и не требуется.

Так легко бывает не всегда, но основной объём черновой работы ускоряется, чтобы можно было быстрее начать шлифовку. Из компонентов интерфейс собирается как конструктор. Заготовки в виде миниатюр расположены в левой панели, откуда их перетаскивают в проект. Так можно быстро переключаться, например, с одного стиля на другой.

Создавайте компоненты забавной формы

В этом случае я создаю компонент Auto Layout вручную. Атомарный дизайн, примененный к нативному мобильному приложению Instagram. ИсточникРисунок выше иллюстрирует логику, которую я использую для своих компонентов. При таком подходе легко проектировать компоненты и, что очень важно, поддерживать их после. Готовые компоненты из UI KIT не подходят для работы с макетами ещё и организационно. Мы стараемся добавлять в один компонент все его варианты, свойства и состояния, нам так при сборке удобнее.

Глобальные стили позволяют быстро поменять шрифт в сотнях объектах, изменить цветовую схему и, фактически, получить новый стиль. Раньше дизайнеру достаточно было просто рисовать и двигать пиксели. Иногда он даже упорядочивал и аккуратно проименовывал слои и группы. Потом появились символы и дали полуавтоматизацию процессов. Сейчас пришли компоненты и изменения можно транслировать автоматически в разные фрагменты артбордов, разбросанные по всей дизайн-системе. Применение компонентов изменило и сам подход к визуальной разработке.

Базовые компоненты для iOS и Android имеют различия. Одних гайдов и официальных UI auto layout в figma KIT категорически не хватает. Она содержит типовые часто используемые компоненты.

Как и любое новшество на рынке, дизайн-системы пережили хайп и перешли в стадию практического переосмысления. Отныне их можно применять совершенно в разных случаях и для решения большего типа задач. Для крупной организации — это визуальный язык, брендинг, порядок, единство дизайна и кода. Для небольших организаций — это командная библиотека в Figma, в которой эффективен небольшой штат разработчиков и дизайнеров.

В прошлой статье мы создавали стили для текста, заливок, стили теней, а также компонент для плашек. По сути, я скруглил края аватарки в левой части, добавил кнопку (тоже на лэйаутах) в правую часть, и ячейка уже подходит под другое приложение. Сэкономьте несколько кликов мышью, набрав «auto» в поле значения интервала, чтобы установить для контейнера значение «space between». Когда вы активировали у фрейма функцию Auto Layout, все объекты внутри начали подчиняться новым правилам и выстроились в линию. Кнопка сама адаптируется под длину текста благодаря параметру Resizing— изменение размера. По умолчанию Figma вResizing использует свойство Hug contents— форма фрейма с активной функцией Auto Layout подстраивается под длину и высоту содержимого.

Затем выделите их и щёлкните Create Component в верхней панели. Свойства, полученные экземплярами непосредственно, всегда приоритетны по сравнению с унаследованными. Допустим, мы создали основной компонент — чёрный квадрат. Теперь я могу разделить дизайн на части и предоставить ссылку на любую из них! Секция (фиолетовая)Раньше мы использовали для организации наших дизайнов фигуры или фреймы.

Чтобы подредактировать экземпляр, вносите правки на месте. А если уйдёте далеко от оригинала, элемент можно сделать https://deveducation.com/ самостоятельным компонентом. Копия основного компонента или его копии автоматически становится экземпляром.

Дизайн-библиотека в Figma: кнопки и формы для ввода информации

Поэтому, когда сайту или приложению нужно обновить дизайн, основная работа — просто отредактировать библиотеку. Мы можем соединять прототипы с самими секциями, а также с любыми экранами, фреймами и вложенными секциями внутри этих секций. У секций появился новая уникальная иконка, которая помогает отличать их от фреймов, фигур и других предназначенных для дизайна инструментов.

С помощью функции Auto Layout это сделать просто. 9 мая 2022 года разработчики Figma выпустили обновление. В графическом редакторе изменился интерфейс и появились новые функции. Эта инструкция всё ещё может помочь вам освоить работу с Auto Layout, но если вы только начали пользоваться Figma, советуем прочитать обзор последних обновлений. Рассказываем, что такое Auto Layout и как с помощью него можно аккуратно и быстро сверстать кнопку, модуль и страницу. Еще один большой организм — это компонент таблицы, но он очень простой.

Наряду с наследованием, экземпляры можно изменять напрямую, не разрывая при этом связь с «родителем». Например, сделать второй квадрат сиреневым, а третьему добавить обводку и растянуть. Автор статей о веб-дизайне и веб-разработке с неразделённой любовью к программированию. Всякий раз, когда я делился с разработчиком ссылкой на дизайн, я мог отправить только ссылку на первый фрейм, весь файл или на страницу. Это позволяет вам выйти из сценария и снова войти в него в той же точке без необходимости создавать какие-либо причудливые связи в прототипе.

советов по компонентам Figma

Если забыли создать нужны стиль — создаём, добавляем в нашу систему. А для правой части – горизонтальный Fixed height, размер которой поставь по высоте средней левой части, в моём случае – 48pt. Когда у вас есть множество фреймов auto-layouts, перемещение по дочерним элементам может стать запутанным.

• Чем больше вы познакомитесь с сочетаниями клавиш auto-layout, тем быстрее их использование войдет в привычку.
• Это был вторничный совет о дизайне интерфейсов.
• Это компонент Auto Layout с несколькими компонентами атомных кнопок внутри.
• Когда настанет время дизайна, мы заменим гарнитуру на нужную, подкорректируем кегль — и вуаля, на всех экранах нужный шрифт в правильном размере.
• А также мы перейдем к очень интересной части — описанию всех компонентов в составе веб-дизайн системы Websy.

У меня активные по табу кнопки будут иметь синюю тень. Для этого я дополнительно создала стиль для тени. Позже я покажу, как можно легко манипулировать кнопками.

Что такое библиотека компонентов

Компонентная разработка интерфейсов заключается прежде всего в унификации и последовательности. С одной стороны процесс создания интерфейса сильно упростился за счет софта нового поколения. С другой — появление нововведений заставляет обучаться и приобретать новые навыки, уходить в специализацию. Визуальный разработчик дизайн-систем — возможно очень перспективная профессия уже ближайшего будущего.

More from Дизайн-кабак

Стрелки указывают, как будут выстраиваться элементы внутри фрейма с Auto Layout. Стрелка ↓ означает вертикальное выравнивание, а→— горизонтальное. Чтобы понять, как работает Auto Layout, создадим простую кнопку с любым текстом. В отличие от обычного фрейма, кнопка с активной функцией Auto Layout будет сама адаптироваться под длину текста, и вам не придётся её каждый раз переделывать. Вы можете увидеть пример такого поведения ниже.

Первый слой помогает нам создавать отступы вокруг контента. Я какое-то время играл с компонентами Figma Auto Layout. Здесь я покажу, как создать полностраничный компонент, используя Auto Layout в Figma.

Здесь нам нужен первый компонент Auto Layout, чтобы отделить заголовок от тела таблицы. Я выделил компоненты, которые используют Auto Layout.

Auto Layout в Figma на русском языке

Нажмите SHIFT + I, чтобы активировать меню быстрой вставки. Основное рабочее пространство в Figma, обычно соответствующее одному экрану интерфейса. Здесь используется как пространство для размещения компонентов одного типа. Небольшое отличие от фреймов заключается в том, что у вас не получится вложить секцию в них или в существующие группы (но секции можно сгруппировать). Поскольку сама иконка довольно мелкая, мы переопределим радиус скрепления углов прямоугольника в этих компонентах для чекбоксов, настроив нужный нам вид. Cоздадим новый компонент для чекбоксов и радиобоксов.

Три явных плюса от ультимейт компонента

И, возможно, рассмотрим некоторые готовые темплейты для landing pages. Обсудим их состав и гибкость изменения блоков, чтобы подгонять под любые нужды и цели… Подписывайтесь, если интересно. Открыв панель активов (используя option / alt + 2 или shift + I), вы можете перетащить экземпляры компонентов на холст.

Хоткеи Фигмы на русском языке | Бложик о дизайне

30 комментариев

73 458

2 июля 2019

Многие работают в русско-язычных версиях програм: Фотошоп, Иллюстратор или Индизайн и т. д. Фигма же на данный момент не поддерживает интерфейс на русском языке, поэтому в этой статье все горячие клавиши переведены на русский для более быстрого освоения программы.

Тем не менее, есть возможность «закостылить» себе русское оформление через изменение файла menu. js в декстопной версии в текстовом редакторе (ну в блокнотике). Суть простая: просто меняем названия менюшек в файле на русские аналоги и сохраняем (предварительно сохранив оригинал на случай ядерного апокалипсиса).

Посмотреть хоткеи можно через пункт меню Keyboard Shortcuts в помощи в нижнем правом углу или нажав CtrlShift?

Essential

Tools

View

Синим цветом показаны кнопки, которые уже были нажаты, а серые контурные — еще нет. Очень удобно отслеживать новые сочетания клавиш.

Zoom

Text

CtrlShift< >	Adjust Font Size	Изменить размер текста
Alt,/ .	Adjust Letter Spacing	Изменить межбуквенное расстояние
AltShift< >	Adjust Line Height	Изменить межстрочное расстояние

Shape

Selection

Cursor

Edit

Transform

Arrange

Components

Еще по теме «Фигма и Адобе»

Кстати, подписывайтесь на ютубчик 🙂

Поговорим о дизайне на фрилансе в видео-формате

Лучшие плагины Figma для писателей в 2022 году

Frontitude Team

31 мая 2022 года

Чтение через 4 мин.

Figma добилась больших успехов в своем стремлении занять первое место. Независимо от того, какую роль вы играете в UX или какую операционную систему вы предпочитаете, Figma упрощает совместную работу команд и совместную работу над дизайном и разработкой продукта.

31 мая 2022 г.

4 мин чтения

В рамках разработки нашего плагина Figma мы столкнулись со многими полезными плагинами, которые работают вместе с Frontitude и которые, по нашему мнению, должны работать лучше каждого писателя. Если ни один из них не поможет вам, не бойтесь — мы следим за новыми плагинами и регулярно обновляем наш блог, публикуя больше подобных сообщений.

‍

Итак, писатели, мы составили список лучших плагинов Figma специально для вас:

‍

Лучшие плагины Figma для

поиска и навигации : 

‍

– The Walker

ваш проект Figma становится больше, чем просто несколько экранов, вы можете быстро прокручивать вперед и назад и чувствовать головокружение при этом. Figma Walker — это средство запуска для Figma, которое вы можете использовать для навигации по кадрам, перехода к различным местам в вашем файле Figma и вставки компонентов через одно поле поиска/ввода, не отрывая пальцев от клавиатуры. Бесплатно

‍

2. Найти и заменить. Когда вам нужно внести общие изменения в UX-копию, охота за повторяющимися экземплярами текста в Figma — это не шутки, амирит? Легко находите текст в своей копии и редактируйте все экземпляры во всех кадрах одновременно с помощью этого плагина Figma. Бесплатно

‍

Найти и заменить: Поиск текстов на странице и их замена, как в текстовом редакторе.

‍

Лучшие плагины Figma для проверки правописания

:

‍

3. SPELLL — Один из лучших плагинов Figma. Мы привыкли иметь проверку орфографии почти в каждом продукте, который мы используем, поэтому может быть довольно неприятно быть одному в файлах Figma. SPELLL дает вам знакомые волнистые линии под словом для орфографических или грамматических ошибок в Figma, поэтому вы случайно не запустите продукт с опечатками. Вы можете легко принять все предложенные правки или проигнорировать их, а SPELLL поддерживает 43 языка. 7-дневная бесплатная пробная версия, за которой следуют планы от 10 долларов США в месяц или единовременный платеж в размере 9 долларов США.9 (для 1 пользователя) 

‍

ЗАПИСАНИЕ: Средство проверки орфографии и грамматики для Figma.

‍

4. SpellChecker — Ищете бесплатный плагин для проверки орфографии и грамматики без всех наворотов SPELLL? SpellChecker отлично работает с небольшими объемами текста, выделяя ошибки красным цветом (здесь нет волнистых линий!) и делая предложения. SpellChecker работает на английском, русском и украинском языках и включает сотни миллионов слов и словосочетаний. Бесплатно

‍

Лучшие плагины Figma для

предложений контента: 

‍

5. Typeout — Ищете копию для пустого состояния или кнопки? С библиотекой разговорного и дружественного UX текста от Typeout вам не нужно слишком много работать. Просто выполните поиск, нажмите на копию UX, которую хотите использовать, и внесите необходимые изменения. Бесплатно

‍

6. Ghost UXWriter — аналогично Typeout, Ghost UXWriter также позволяет искать UX-копию для каждого компонента и добавлять ее. Для каждого типа текста он дает несколько разных тонов: простой, случайный и игривый. Вы можете сохранить избранное, чтобы иметь его под рукой в ​​следующий раз. Как только вы вставите копию, вы сможете отредактировать ее в Figma. Бесплатно

‍

7. ContentReel — Один из лучших плагинов для фигмы. ContentReel от Microsoft Design позволяет легко заполнять ваши проекты текстовыми строками, а также изображениями, такими как аватары и значки, извлекая их из одной палитры. Просто выберите слой (слои) в своем дизайне и выберите тип содержимого, чтобы применить его. С помощью текстовых строк вы можете выбрать порядок их отображения и решить, хотите ли вы, чтобы они были общедоступными или частными. Бесплатно

‍

8. Хемингуэй. Писатели любят приложение Хемингуэй за то, что оно помогает улучшить качество письма с помощью визуальных подсказок: фиолетовое выделение указывает на то, что вы можете использовать более простое слово или фразу, а желтое — на предложение, которое трудно прочитать ( а красный означает, что это очень трудно прочитать). Некоторые истинные фанаты пошли еще дальше, создав плагин Figma, вдохновленный веб-приложением (но не связанный с ним официально). Те же отличные реплики, теперь доступные для ваших дизайнов. Бесплатно

‍

Хемингуэй: Сделайте свой текст в Figma жирным и четким.

‍

Лучшие плагины Figma для визуальной поддержки

: 

‍

9. Объем текста — сколько копий достаточно? Сколько места он занимает на экране? Команда дизайнеров Chime, стартапа, предоставляющего финансовые услуги, снова и снова сталкивалась с этими вопросами, поэтому они создали плагин Figma для их измерения! Text Volume основан на исследовании Джонатона Колмана о правильном количестве текста в мобильных приложениях и может помочь вам визуализировать его. Они не говорят об этом, но мы думаем, что это может быть особенно полезно для локализации. Бесплатно

‍

Объем текста: Рассчитайте объем текста на любом фрейме в Figma.

‍

10. Figmoji – Кто не любит смайлики? Для многих из нас они стали частью нашего языка и, безусловно, нашли свое место во многих приложениях и платформах. Теперь вы можете перетаскивать милые картинки прямо в свою копию. Плагин в настоящее время поддерживает смайлики Twitter в формате .svg. Бесплатно

‍

11. Изменение размера текста — посмотрите, что произойдет с вашей копией и как она будет выглядеть, если пользователь изменит размер текста на своем устройстве. Убедитесь, что ваш текст читается всеми пользователями, независимо от их устройств и настроек, и что он соответствует рекомендациям по доступности. Бесплатно

‍

12. Редактирование текста — вот еще одно приложение от разработчиков финансовых услуг. Хм… Text Edits показывает вам все слои текста на определенной странице, организованные в алфавитном порядке. Затем вы можете редактировать весь текст одновременно, и слои с одинаковым текстом будут объединены в один слой, поэтому вам не нужно управлять несколькими слоями. Бесплатно  

{{manage-copy-cta=»/styleguide/blog-ctas»}}

Лучшие плагины Figma для

вместо Lorem ipsum:

‍

13. Вкус письма — зачем довольствоваться латинским текстом-заполнителем (кхм, мы смотрим на вас, Lorem ipsum), если вместо этого вы можете выбрать что-нибудь веселое на английском языке? Write Flavor дает вам блоки текста, которые вы можете использовать в качестве текста-заполнителя, но все с разнообразными забавными темами, включая Covid, Okay Boomer и Vino. Бесплатно

‍

14. Копия пользовательского интерфейса — мы привыкли видеть Lorem ipsum в дизайне, но нельзя отрицать, что это не дает полного представления о продукте. Копия пользовательского интерфейса, которая доступна как для Figma, так и для Adobe XD, дает вам возможность начать с настоящей конвертируемой копии-заполнителя, написанной людьми. 7-дневная бесплатная пробная версия, за которой следуют планы по цене от 18 долларов США в год (персональный, 1 устройство) до 112 долларов США в год (корпоративный, неограниченное количество устройств)

‍

.

‍

Лучшие плагины Figma для отслеживания

прогресс:

‍

15. Это уже сделано? – Когда над продуктом работает множество людей, которые участвуют на разных стадиях, трудно отследить, на какой стадии цикла разработки находится ваш продукт. С помощью этого плагина вы можете присвоить статус каждому кадру, чтобы все в команде знали, что нужно сделать, что пересматривается, что требует изменений и что завершено. Бесплатно

‍

16. Заметки о передаче — добавляйте примечания к каждому кадру дизайна, чтобы ваши товарищи по команде понимали причины вашего выбора копии. С помощью этого плагина вы можете хранить все это в одном месте, а не копировать в одном месте, а документацию в другом (или многих других, как это часто бывает). Бесплатно

‍

Примечания по передаче: Помогите другим лучше понять ваши статические проекты.

‍

17. Time Machine — еще один продукт от разработчиков Text Edit (см. выше). Time Machine был разработан для сохранения старых версий проектов с датой и отметками времени, чтобы вы могли сравнивать итерации с течением времени без необходимости активно создавать копии или пинать себя позже за то, что не сохранив предыдущую версию. Бесплатно

‍

‍

Часто задаваемые вопросы о плагинах Figma

В: Где я могу найти плагины Figma?

О: Лучшее место, где можно проверить, узнать и открыть для себя новые плагины Figma, — это страница сообщества Figma. Вы можете выполнять поиск не только по имени или категории, но и после того, как вы перейдете к определенному плагину, вы найдете предложения для других, похожих ниже. Удачных поисков!

‍

В: Как установить плагин Figma?

А: Полегче! Во-первых, убедитесь, что вы вошли в свою учетную запись Figma. На странице конкретного плагина на веб-сайте сообщества Figma нажмите синюю кнопку «Установить» в правом верхнем углу. Затем вы должны увидеть плагин в своем списке плагинов как в веб-приложениях, так и в настольных приложениях.

В: Как использовать плагины в Figma?

О: Плагины в Figma просты в использовании. Просто нажмите «Файл» → «Плагины» и выберите из списка установленных плагинов. Кроме того, вы можете выбрать рамку. Щелкните правой кнопкой мыши и выберите плагин из списка. Имейте в виду, что у вас должны быть права на редактирование файла, чтобы использовать плагины; плагины не будут работать в режиме только для просмотра.

‍

Хотите управлять всей своей UX-копией в одном месте и улучшить совместную работу и рабочий процесс продукта и команды дизайнеров? Начните бесплатно или закажите бесплатную 15-минутную демонстрацию сегодня.

Получайте ежемесячный обзор UX-письма

Будьте в курсе новых функций, отраслевых обновлений и последних тенденций UX-письма

Вы в деле!
Следите за новостями в своем почтовом ящике.

Это письмо выглядит не так… Попробуйте еще раз.

Мои правила твердотельной системы проектирования. Компоненты и архитектура пользовательского интерфейса в #Figma

В этой статье я покажу вам простую и эффективную архитектуру интерфейса, которая поможет более эффективно генерировать новые разделы продукта или вносить изменения в будущем. Теперь подход к разработке визуальной части интерфейса внутри организации/команды изменился в лучшую сторону. Современные средства визуальной разработки позволяют использовать взаимосвязи между элементами, упрощая настройку отдельных модулей или целых экранов, группировать эти модули в библиотеки компонентов и давать доступ всем уполномоченным лицам. Такие принципы можно назвать языком дизайна, системой дизайна или дизайном продукта. Как пожелаете. Суть остается прежней: поставив правильный алгоритм разработки всех графических модулей, вы получаете безграничную масштабируемость под все типы устройств и разрешения экрана. Согласно принципам «Атомного дизайна» я начну с атомов и перейду к более сложным компонентам. Я буду работать в Figma и покажу, что у Sketch есть конкурент, которого нельзя недооценивать.

Вторая версия Figma подкупила своей близостью к Sketch, особый интерес представляла работа под неправомерной Windows и передача от Разработчика. Это расширение редактора, специально разработанное для разработчиков. Разработчики теперь открывают исходники в браузере, видят все отступы и могут подобрать код любого элемента в CSS, XML или Swift Android. Сотрудничество дизайнеров и разработчиков стало немного эффективнее. Производительность интеграции любой конструкции ускоряется в 2–4 раза. Я проверял лично. Минимум правок; багов с отступами, шрифтами и размерами нет. Все генерируется программой. Необходимость прописывать какие-то спецы в документах осталась в прошлом. А если вы независимый дизайнер, работающий с несколькими клиентами, то теперь гораздо проще наладить эффективную коммуникацию с отделом разработки в компании вашего заказчика.

Приступим к практике. Суть этой статьи в том, чтобы продемонстрировать конкретный алгоритм визуального развития. Проще говоря, спроектировать интерфейс так, чтобы его можно было настраивать/редактировать за минимальное количество действий. Результатом является библиотека компонентов, свойства которых распространяются на связанные элементы. Ты изменил его там, и он изменился везде. А разработчикам даже не нужно нажимать «обновить» — они видят изменения в режиме реального времени на своих экранах. Как я уже говорил выше, «слова» любого языка дизайна образуют «фразы», ​​«фразы» строят «предложения», из которых состоит целая глава. Абстрактно говоря, нам нужна возможность быстро заменить любое «слово» на другое в любой главе.

Слова. Базовые элементы

Начну с самых простых элементов. «Слова» включают заголовки h2,h3,h4 и далее, текстовый абзац, иконки. Любые простые элементы, входящие в состав любого ui kit и из которых в дальнейшем можно будет сделать «фразу». Я стараюсь привыкнуть к порядку, поэтому буду следить за именованием элементов. Это особенно важно, если библиотека будет использоваться другими дизайнерами и разработчиками. Хороший дизайнер начинает делать удобно не только пользователям, но и коллегам.

Далее из каждого элемента создаю так называемую «компоненту» (Ctrl-Alt-K). Компонент в Figma — это возможность создавать отношения между однотипными блоками интерфейса или целыми экранами. Если я даю такое свойство, например, абзацу текста и использую его на определенных экранах интерфейса (копировать > вставить), то достаточно просто отредактировать мастер-компонент, чтобы изменения распространились на все экраны. Использование такой иерархии является сутью данной статьи. Figma окрашивает все «компоненты» в левом столбце в фиолетовый цвет:

Фразы. Многокомпонентные элементы.

«Фраза» — это метафора более сложных модулей, которые могут состоять из двух и более простых элементов. Например, кнопка. Он состоит как минимум из фона (чаще всего прямоугольника) и надписей. Или как форма для ввода текста (ввод). В своем составе он имеет фон, заголовок и заполнитель. Я ограничиваю себя только одной кнопкой «Призрак». Он будет состоять из прямоугольника без флуда и компонента заголовка h4.

Почему? Если в продукте используется несколько разных кнопок или состояний (основная, дополнительная, альтернативная, отключенная и т. д.), они размещаются на нескольких экранах, и если есть необходимость изменить шрифт, мне достаточно внести изменения в одном месте. Меняя шрифт для компонента-слова Заголовка h4, я автоматически внесу эти изменения для всей библиотеки и всех экранов интерфейса. Именно поэтому важно в самом начале поставить правильный алгоритм визуального развития.

Чтобы визуализировать иерархию, я нарисую более сложные модули справа. В результате, двигаясь слева направо, мы двигаемся от простых вещей к более сложным. От «слов» до целой «главы».

Как видно на картинке выше, кнопка выделена, преобразована в компонент; а слева его композиция. Figma позволяет вам поместить компонент внутри другого, создавая несколько уровней иерархии, и каждый уровень может иметь свои собственные ответвления. Все зависит от сложности дизайна модулей для продукта. Например, если в библиотеке вы используете 5 разных типов кнопок с одним и тем же стилем текста заголовка h4, то вы можете вносить изменения как глобально, так и локально. Для глобальных изменений редактируется компонент h4 до 1-го уровня, а для локальных редактируем вложенный компонент уже внутри конкретной кнопки и получаем изменения для тех экранов, где кнопка присутствует. Для наглядности записал видео: сначала глобально меняю метки кнопок, а потом локально с нужным типом кнопок.

А вот и некоторые спорные особенности инструмента, если вы вносите изменения локально в нужную категорию кнопок, Figma считает их приоритетными. И пытаясь изменить компонент глобально на следующем шаге, вы не получите результата.

Предложения. От фраз к действиям.

Пора собирать из «фраз» и «слов» что-то посложнее. Компоненты 1-го и 2-го уровня я буду использовать для составления «предложения» — следующего 3-го уровня. В последнее время у меня большой опыт в электронной коммерции, поэтому давайте рассмотрим этот шаг на примере мини-карты продукта интернет-магазина Windows Mobile.

Мини-карта состоит из компонентов: h3 (значение), h4 (название элемента), Paragraph (краткое описание), Ghost BTN (кнопка добавления), иконки, фон и фото. Вся структура указана слева на экране выше. Ширина карты подобрана так, чтобы на экране смартфона она помещалась две в ряд. По аналогии его нужно превратить в компонент для написания нашей первой «главы».

Такую карту можно назвать модульной, так как она содержит компоненты первых двух уровней. Вся конструкция изделия может иметь модульную структуру, так как состоит из схожих по структуре компонентов. Модульность способствует порядку и радует разработчиков, ведь воздействуя на систему, лучше взять готовую мини-карту из библиотеки и проложить ею экран. Вы можете изменить соотношение сторон, высоту, ширину, шрифты. Проще говоря: вам не придется клонировать множество разных мастер-карт в библиотеке, где вы потеряетесь с развитием своего продукта. Figma позволяет вносить небольшие изменения и сохранять основную ссылку для быстрого редактирования.

Глава, состоящая из предложений.

Мы подошли к самому интересному. В метафоре, с которой я начал, «глава» — это уровень, на котором вы можете иметь независимые и полные экраны приложения.

Так вы получите еще больше — поток изменений для всех устройств. Кстати, совсем недавно все компоненты удобно было вынесено в отдельный раздел слева, в который можно попасть через вкладки внизу. Вы можете добавлять модули с помощью перетаскивания. До этого пришлось немало помучиться в поисках компонентов, разбросанных по холсту, когда экранов много.

Множество однотипных экранов можно объединить в одну «главу», например, форм-факторы. Figma позволяет быстро поставить ограничения (задать адаптивность), благодаря чему мини-карту можно увеличить до планшетной или десктопной версии без потери ссылки на мастер-компонент. Более того, разработчики четко понимают адаптивность любого модуля. Просто не возникает никаких вопросов.

Результат

В результате применения такого управления дизайном мы имеем возможность быстро и качественно внедрить изменения в наборе экранов:

Стоит сказать, что использование только этих возможностей не сделает вас хорошим дизайнером, а продемонстрирует ваш грамотный подход к управлению дизайном. Теперь будет эффективнее решать повседневные задачи, а значит, разработка продукта обязательно ускорится. Figma имеет очень умный массовый выбор, почти идеальную привязку и один из самых продвинутых инструментов пера. И для оптимальной совместной работы использование этой архитектуры просто необходимо.

Уверен, что среди читателей есть те, для кого такой подход уже является стандартным. Сегодня многие понятия и принципы кажутся вполне естественными, хотя вчера мы говорили «Вау!». Я думаю, что финальным вау-фактором в случае с Figma является возможность использовать библиотеку, созданную по вышеописанным принципам, внутри организации без дополнительных инструментов, плагинов или надстроек. Все, что вам нужно сделать, это добавить все свои компоненты в «Командную библиотеку» и дать ссылку всем дизайнерам и разработчикам в команде. Дизайнеры собирают новые модули и целые экраны компонентов такой библиотеки командного дизайна, а разработчики мгновенно получают обновления, экспортируют все элементы в код и внедряют в производство. Успех!

Заключение

Последние годы изменили взгляд на командный подход в разработке интерфейсов. Ажиотаж вокруг дизайн-систем сыграл свою роль. Когда буквально каждую неделю очередной ИТ-гигант выпускает свой язык дизайна, свои правила и принципы, понятно, что инструмент дизайна неизбежно встанет на те же позиции.

Теперь разработчиков можно отнести и к дизайнерам. Потому что теперь у них более эффективная среда, где им уже комфортно действовать системно и алгоритмически, закладывать нужную архитектуру, подводить визуальную разработку к определенным принципам. Хотя мы еще далеко не в состоянии вовлечь в кодирование каждого дизайнера.

» Дизайнерам нужно писать код, но они не хотят » Это абсолютно нормально, что дизайнер не любит писать код вручную. Мы в основном визуалы. Технари очень редки среди дизайнеров. И все, что требуется, чтобы подтолкнуть нас к кодированию, — это обеспечить иной подход к программированию. Нам нужна визуальная среда, в которой циклы, условия, расчеты и анимации создавались бы простым перетаскиванием объектов в правильной последовательности.

Примечательно, что рынок дизайнерских инструментов давно движется в одном направлении. Сегодня есть достаточно альтернатив Sketch, который когда-то стоял на вершине горы. Сегодня есть из чего выбрать, вам не придется менять свои предпочтения для работы в более продвинутой среде. Грядет (или уже наступил) передел этого рынка. Конкурируют огромные компании с солидными инвестициями. Этой зимой Figma закрыла еще один раунд на 17 миллионов долларов. А в январе 2018 года InvisionApp выпустит собственный Sketch, хотя, судя по анонсу, их «Студия» ничего нового дизайнерам не обещает.