Прототипирование — это просто, как собрать пазл. Мультикомпоненты дизайн системы в Figma

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



    Повторяющаяся структура


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

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

    А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken


    Идея MК в структуре размноженных идентичных компонентах, обрезании заступов за область фрейма (clip content) и расставленных параметров ресайзинга в зависимости от направления масштабирования (constraints). Когда вы ресайзите границу фрейма — вы определяете нужный состав будущего модуля в дизайне. Количество вложенных компонентов должно быть настолько велико, чтобы складывалось впечатление бесконечной высоты или ширины. На самом деле вы редко встретите слишком много пунктов для выбора в простом выпадающем списке. Поэтому при создании МСО предел вложенных компонентов может быть ограничен, к примеру, высотой или шириной экрана.

    Полуавтоматизация дизайн-процессов


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

    Примеры


    Мультикомпонент для списков


    Давайте теперь вернемся к выпадающему списку чтобы, наконец, узнать как это работает. Смотрите как я просто перетаскиваю готовый компонент, растягиваю его вниз до уровня, когда доступны 5 элементов списка, а потом заполняю их текстом. Быстро и просто:



    Состав такого МК очень простой:

    1. создаем мастер-компонент в Фигме с элементом списка
    2. задаем все размерности и отступы (в моем случае по 8dp сетке)
    3. клонируем элементы списка друг под другом до необходимой высоты
    4. создаем новый компонент из размноженных фрагментов
    5. расставляем правила реакции на ресайз (constraints) → по оси X «Top», по оси Y выбираем «Scale»
    6. отмечаем чекбокс «Clip content»

    Мультикомпоненты для табов


    Табы это прекрасная категория, чтобы создать в ней гибкий МСО. В этом случае нас интересует масштабируемость по оси Х, так как табы горизонтальны. Увы, Figma не позволяет двигать объекты внутри подчиненного компонента, поэтому оптимально иметь в библиотеке несколько вариантов размерностей для Табов:



    Мультикомпоненты для таблиц


    Таблицы более сложны, т.к. должны масштабироваться по оси Y до нужного количества строк, а по оси Х до нужного кол-ва колонок. Поэтому конструктор таблиц состоит из двух независимых МК. Сначала вы формируете нужное кол-во строк модулем Table Base, а затем накладываете сверху модуль Multicolumn и задаете ему аналогичную высоту:






    В данный момент я сосредоточен на разработке и развитии material дизайн-системы в Figma. Совсем недавно вышла версия 1.3, в которой уже используются мультикомпоненты и проработано более чем 240+ стандартных UI элементов. Этот продукт действительно ускорит вашу дизайн-работу, если Вы работаете с графикой. Он безусловно будет интересен и разработчикам, так как позволяет собирать «боевые» прототипы без навыков дизайна. Вы также можете использовать её как основу для Вашей собственной дизайн-системы и объединить несколько продуктов в среде Фигмы. Смотрите как она работает:



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

    Share post

    Comments 12

      +2
      Особенно приятно, что разработчики Фигмы наблюдают за дизайн-сообществом. Мне удалось получить персональную благодарность за теорию (и практику!) мультикомпонентов:

      twitter.com/figmadesign/status/961335918014619648
        0
        Я так понимаю это аналог символов в скетче?
        Вопрос если допустим у нас 2 текстовых поля, расстояние у них 2 pх, при изменения одного поля сохранится ли расстояние?
        Задать привязку по низу/верху/центру для обьекта в компоненте возможно?
          0
          Да, суть аналогична символам.
          Вы имеете ввиду вытолкнет ли одно поле другое на значение равное изменению? Нет. Во всяком случае, пока нет.
          Конечно возможно, не только привязку, но и масштабирование во взаимосвязи с изменением размерности компонента, внутри которого элемент находится.
          0
          Во, отлично придумано
            0
            Автоматизация выглядит четко :)
              0
              Спасибо за интересный материал, завтра же опробую на практике ;)
                +1
                Пожалуйста! Вернитесь потом сюда и напишите, что у Вас получилось.
                –1
                Простите мое занудство, но в чем «открытие»? Это уже давно есть в скетче. Или обсуждаем исключительно возможности фигмы?
                  –1
                  «Клубу» анонимных минусовальщиков успехов в жизни, может быть они помогут вам понять что есть и другие мнения отличные от вашего, а может даже вы научитесь аргументированно отвечать а не «втихаря» ставить минус.
                  0
                  имхо: есть области которые не получится автоматизировать, как минимум, в ближайшее время. UI/UX веб-дизайн — одна из них.
                    0
                    Ну знаете ли, мир уже повидал много примеров, когда сначала все говорили «ну это не наступит никогда». А потом… «Ой!» Но в любом случае мы не паникуем, но держим руку на пульсе. И если что — готовимся.
                      0
                      да согласен, но есть весомый аргумент в пользу того, что это в некоей мере творчество. А если человек научится оптимизировать творчество, тогда я надеюсь, как и вы буду готов))

                  Only users with full accounts can post comments. Log in, please.