Figma clip content что это
Компоненты в Фигме
Dec 9, 2016 · 4 min read
Сегодня мы рады представить вам наши Компоненты. Они созданы на основе концепций, заимствованных из разработки: композиция объектов, наследование, неограниченная возможность переопределять свойства экземпляров. Таким образом, Компоненты Фигмы еще больше приближают нас к миру, где проще конструировать дизайн-системы, с которыми мы сталкиваемся в повседневной работе.
Мы начали разработку Компонентов год назад, ко г да я отработал в Фигме первые две недели. Как человек с бэкграундом и в дизайне и в программировании, я всегда видел, что подходы к интерфейсам в этих двух сферах не совпадают. Всем нам приходится создавать сложные системы интерфейсов, части которых непрерывно меняются и должны быть согласованы между собой. Как с этим справляются дизайнеры? Программисты уже справились.
В разработке компонентный подход используется везде, начиная с iOS, Android, macOS, Windows, Unity, HTML и заканчивая технологиями для создания веб-интерфейсов и игр. Например, с React проще создавать сложную UI-систему за счет возможности компоновать примитивные куски в более и более сложное поведение.
Как применить эту парадигму в дизайн-инструментах?
Дизайн на основе Компонентов
Композиция — это базовое понятие дизайна. Благодаря ей мы умеем раскладывать сложные вещи на простые и переиспользовать повторяющиеся элементы, избегая рутину и трату времени. Дизайн-инструменты, поддерживающие компоненты, позволят сделать сложный дизайн более консистентным, а работу менее трудоемкой.
Например, приложение адресной книги выглядит как список. Дизайн хорошего списка подразумевает поиск подходящего кегля, отступов, иконок и так далее. Этот компонент может отображаться и в других местах, причем в другом размере и с некоторыми доработками.
Здесь компоненты не только ускоряют переиспользование, но и способствуют единообразию. И так как все переиспользованные компоненты не копии, а экземпляры исходного компонента, то любые изменения мгновенно применяются во всем дизайне.
Наш подход к компонентам
В Фигме мы верим, что дизайн-инструмент не должен стоять на пути творческого поиска. Многие инструменты пытаются решить проблему переиспользования элементов дизайна, но мы верим, что наша реализации отличается.
При работе над Компонентами, мы поставили цель сделать их:
Систематизация дизайна не должна замедлять работу. Вы не должны платить за преимущества инструмента ограничением творческой свободы.
Как это работает
Компоненты в Фигме работают как Frames — при копировании элементов создаются скорее экземпляры, чем копии. Мы выбираем то, что хотим сделать компонентом, и кликаем Create Component в тулбаре:
На этом этапе мы получаем просто Frame. До тех пора, пока мы не создали экземпляры.
Чтобы создать экземпляр, удерживайте Alt при перетаскивании, либо используйте команду Dublicate, либо обычный copy-paste:
Вместе с этими двумя экземплярами у нас получается три одинаковых штуки. У каждой свое положение на холсте, но в то же время они идентичны.
Любое изменение внутри главного Компонента мгновенно отражается на экземплярах:
Здесь есть один важный аспект, который делает экземпляры особенными: вы можете переопределять любые их свойства, не затрагивая остальных экземпляров.
А изменения главного Компонента отражаются на каждом экземпляре, но при этом не трогают тех свойств, которые вы переопределили.
Переопределение стилей и свойств
Изменения экземпляров можно считать переопределением стилей и свойств исходного Компонента. Давайте посмотрим, что будет, если сначала изменить цвет и обводку у экземпляров, а затем изменить исходный Компонент:
Если же в процессе мы передумали и хотим отменить все переопределения экземпляра, то просто выделяем элемент и нажимаем Reset Instance.
Составные компоненты
Выше в статье мы говорили о создании систем из легко компонуемых компонентов и о том, что компоненты могут содержать в себе другие экземпляры, чтобы создавать более сложное поведение. Такие «вложенные компоненты» также просто создавать в Фигме, как и все остальное. Просто добавьте экземпляр внутрь компонента либо создайте компонент из выделенного экземпляра:
Constraints
Фигма — это мощный инструмент, в котором все фичи можно использовать совместно. Constrains — одна из фичей, открывающая новое измерение для творческой работы, особенно когда вы хотите сделать элементы интерфейса, реагирующие на различные размеры и координаты:
Библиотеки компонентов в Figma: что это, зачем нужно и как работает
Редактируете одну кнопку — меняются все. Разбираемся с главной фишкой Figma, за которую её любят веб-дизайнеры.
Если каждую кнопку на сайте рисовать по отдельности, жизнь веб-дизайнера превратится в ад. Чтобы этого не произошло, в Figma есть компоненты.
Что такое компонент Figma
Компонент — это элемент, копии которого меняются вместе с ним. Например, поле ввода, аватар со статусом или меню. Исходный компонент называется основным (main component), его копии — экземплярами (instances).
Допустим, мы создали основной компонент — чёрный квадрат. Затем добавили два его экземпляра.
Перекрасим первый в красный цвет. Все три тоже станут красными — экземпляры наследуют параметры основного компонента.
Наряду с наследованием, экземпляры можно изменять напрямую, не разрывая при этом связь с «родителем». Например, сделать второй квадрат сиреневым, а третьему добавить обводку и растянуть.
Свойства, полученные экземплярами непосредственно, всегда приоритетны по сравнению с унаследованными. Если уменьшить и перекрасить «родителя» в жёлтый цвет, один из его «потомков» всё равно останется фиолетовым, а другой — прямоугольником, потому что эти свойства были приобретены самостоятельно, а не от основного компонента.
Основной компонент — шаблон для будущих элементов дизайна. Например, для кнопки он состоит из прямоугольника, текста и иконки. А их размер и содержание зависят от экземпляра.
Автор статей о веб-дизайне и веб-разработке с неразделённой любовью к программированию.
Что такое библиотека компонентов
Библиотека — это файл, где хранятся основные компоненты для проекта. Он точно такой же, как файл с готовым дизайном, — отличается только назначением. Если нужно добавить в проект один из стандартных элементов, дизайнер не рисует его заново, а берёт из библиотеки.
Для библиотек нет строгих стандартов оформления. Обычно компоненты структурируют и снабжают заголовками. Их удобно группировать по фреймам — например, в зависимости от интерфейса (мобильный или десктопный) и типа (уведомления, контекстные меню и тому подобное).
Зачем нужны библиотеки компонентов
Профессионалы сходятся во мнении: библиотеки компонентов — одно из главных преимуществ Figma перед другими программами для дизайна. Они позволяют:
Как создать библиотеку компонентов
Сделайте пустой файл, который станет библиотекой, и наполняйте его компонентами. Вначале нарисуйте составные части компонента. Затем выделите их и щёлкните Create Component в верхней панели.
Чтобы новую библиотеку можно было использовать в проектах, её нужно опубликовать. Сделайте это на вкладке Assets, кликнув иконку-книгу и нажав Publish.
С библиотеками проще работать, если соблюдать несколько правил:
Фрейм называют как категорию элементов. Допустим, «Уведомления» — все уведомления помещают в него. Визуально так проще ориентироваться, но самое главное — в раскрывающемся списке компонентов появится одноимённый пункт.
Как правильно использовать библиотеки
Когда библиотека опубликована для команды, её компоненты появляются на вкладке Assets в левой панели. После этого участники могут их использовать.
Поместить экземпляр компонента в дизайн можно тремя способами:
Бывает, что изменённый экземпляр уже сильно отличается от «родителя». Если он ещё понадобится в таком виде, можно сделать две вещи:
Что в итоге
Библиотеки компонентов Figma — удобный способ хранить заготовки для интерфейсов, а также делиться ими с командой и всем миром. Сохраняйте в них всё, что будет использоваться многократно. Чтобы подредактировать экземпляр, вносите правки на месте. А если уйдёте далеко от оригинала, элемент можно сделать самостоятельным компонентом.
Как рисовать универсальные компоненты, которые адаптируются к размеру экрана, создавать команды, взаимодействовать с разработчиками и не только — вы узнаете на нашем курсе. Прокачайте знание Figma и станьте настоящим профессионалом веб-дизайна!
англ. frame — рамка. Основное рабочее пространство в Figma, обычно соответствующее одному экрану интерфейса. Здесь используется как пространство для размещения компонентов одного типа.
Подход, в котором дизайн начинается с создания неделимых элементов, которые используются повторно и комбинируются между собой.
Прототипирование — это просто, как собрать пазл. Мультикомпоненты дизайн системы в Figma
Если вы работаете в среде Figma, то скорее всего вы используете компоненты в своих дизайн-процессах и знаете в чем их преимущества. Когда в ежедневной фриланс рутине я устал повторять создание одних и тех же списков, табов, таблиц или любых других модулей, состав которых динамичен, я начал думать об автоматизации этих процессов, чтобы рутина как минимум протекала быстрее. Таким образом мультикомпоненты и были открыты!
Повторяющаяся структура
Итак, что из себя представляет мультикомпонент? МК — это компонент, состоящий из некоторого множества повторяющихся вложенных элементов, который можно масштабировать простым ресайзом высоты, ширины или по двум осям сразу. Давайте рассмотрим на примере. Почти в каждом интерфейсе можно встретить выпадающий список. Если вы фрилансер, держу пари таких списков было разработано вами предостаточно. Каждый раз вы создавали сначала элемент списка, затем вы определяли размерность списка (кол-во элементов по высоте), клонировали и позиционировали каждую строку друг под другом, потом объединяли в группу или фрейм, заменяли текст; и использовали такой компонент, чтобы продемонстрировать action по клику на выпадающий список. Вы осознаете, что это рутина?
Кстати, если вы используете Figma, я рекомендую обратить внимания на наши готовые дизайн-системы. Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.
А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken
Идея MК в структуре размноженных идентичных компонентах, обрезании заступов за область фрейма (clip content) и расставленных параметров ресайзинга в зависимости от направления масштабирования (constraints). Когда вы ресайзите границу фрейма — вы определяете нужный состав будущего модуля в дизайне. Количество вложенных компонентов должно быть настолько велико, чтобы складывалось впечатление бесконечной высоты или ширины. На самом деле вы редко встретите слишком много пунктов для выбора в простом выпадающем списке. Поэтому при создании МСО предел вложенных компонентов может быть ограничен, к примеру, высотой или шириной экрана.
Полуавтоматизация дизайн-процессов
Сейчас автоматизация шагает по миру. Если когда-нибудь в будущем автоматизируют UI дизайн / прототипирование, то мы с вами скорее всего останемся без работы. Если мы начнем думать уже сейчас как автоматизировать собственные рабочие процессы — это поможет нам решать больше задач за один рабочий час. И тут на сцену выходят мультикомпоненты, чтобы уже сейчас ускорить дизайн-процессы.
Примеры
Мультикомпонент для списков
Давайте теперь вернемся к выпадающему списку чтобы, наконец, узнать как это работает. Смотрите как я просто перетаскиваю готовый компонент, растягиваю его вниз до уровня, когда доступны 5 элементов списка, а потом заполняю их текстом. Быстро и просто:
Состав такого МК очень простой:
Мультикомпоненты для табов
Табы это прекрасная категория, чтобы создать в ней гибкий МСО. В этом случае нас интересует масштабируемость по оси Х, так как табы горизонтальны. Увы, Figma не позволяет двигать объекты внутри подчиненного компонента, поэтому оптимально иметь в библиотеке несколько вариантов размерностей для Табов:
Мультикомпоненты для таблиц
Таблицы более сложны, т.к. должны масштабироваться по оси Y до нужного количества строк, а по оси Х до нужного кол-ва колонок. Поэтому конструктор таблиц состоит из двух независимых МК. Сначала вы формируете нужное кол-во строк модулем Table Base, а затем накладываете сверху модуль Multicolumn и задаете ему аналогичную высоту:
В данный момент я сосредоточен на разработке и развитии material дизайн-системы в Figma. Совсем недавно вышла версия 1.3, в которой уже используются мультикомпоненты и проработано более чем 240+ стандартных UI элементов. Этот продукт действительно ускорит вашу дизайн-работу, если Вы работаете с графикой. Он безусловно будет интересен и разработчикам, так как позволяет собирать «боевые» прототипы без навыков дизайна. Вы также можете использовать её как основу для Вашей собственной дизайн-системы и объединить несколько продуктов в среде Фигмы. Смотрите как она работает:
В заключении могу сказать, что концепция МК накладывается на множество других более сложных модулей в любом интерфейсе. В следующих постах я расскажу о более гибких и многосложных МК. Используя их вы начнете получать удовольствие от рутины, на которую теперь будете затрачивать совсем мало времени.
Архитектура компонентов в Figma
С прошлого года Figma добавила улучшения, которые расширяют способы структурирования компонентов, позволяя вам встраивать одни компоненты в другие, а также легко заменять экземпляры компонентов. Поэтому я подумал, что пришло время по-новому взглянуть на компоненты в Figma.
Одна из лучших особенностей системы компонентов Figma заключается в том, что вы можете получить доступ к стеку уровней каждого экземпляра компонента. Это может иметь огромное влияние на всю систему дизайна, поскольку может помочь сохранить компоненты и сократить количество необходимых компонентов.
В другом недавнем обновлении появилась возможность замены экземпляров простым перетаскиванием. Это может происходить локально внутри вашего файла или прямо из вашей общей командной библиотеки (отдельный документ Figma). Такая возможность окажет огромное влияние на то, как вы структурируете свои компоненты
Вот несколько идей, как вы можете максимизировать модульность, а в некоторых случаях сократить количество необходимых компонентов.
Вложенные компоненты
Figma позволяет вам складывать компоненты вместе. Это значит, вы можете структурировать их модульным способом. Ниже несколько способов использования вложенных компонентов:
Строительные блоки
Часто я создаю компонент «строительный блок» (building block) и использую его как основу для другого компонента. Например, в этих кнопках я создал базовый прямоугольник с закругленными углами для формы кнопки и превратил его в компонент. Этот компонент не публикуется в моей командной библиотеке, а его экземпляры просто используются в других компонентах, которые я создаю, например, фактические компоненты кнопок (которые публикуются).
Преимущество этого метода заключается в том, что все мои кнопки и состояния кнопок используют этот базовый компонент (с примененными переопределениями стиля). Если мне нужно сделать глобальное изменение, например, изменить форму кнопки, я могу просто вернуться и отредактировать исходный компонент, его изменение повлияет на все компоненты, которые основаны на нем.
Замена элементов
Другим преимуществом вложенных компонентов является то, что вы можете заменять их на другие компоненты. Например, в примере ниже, мне просто нужно сделать один компонент для заголовка плитки и поменять вложенный компонент на другой. Если вы знакомы со Sketch, вы, вероятно, уже знакомы с этой концепцией, однако в Figma взаимодействие для замены компонентов отличается (простое перетаскивание).
Чтобы поменять компонент – удерживайте клавишу option при перетаскивании.
Для замены верхнего вложенного компонента (внутри другого компонента, фрейма или группы) – Удерживайте клавиши ⌘ + option при перетаскивании.
Применение масок
Вы также можете использовать вложенные компоненты в сочетании с масками, чтобы легко поменять заливку. Думайте об этом, как о компонентном решении глобальных цветов (?). Чтобы сделать это, создайте компоненты образца (фигуру с заливкой) и поместите экземпляр компонента на слой поверх изображения, к которому вы хотите применить маску. Выбрав оба слоя, примените маску, и все, что вам нужно сделать, чтобы изменить цвет – использовать метод, описанный выше, для замены одного экземпляра компонента заливки на другой.
Показать/скрыть компоненты
Поскольку вы можете получить доступ к стеку слоев каждого экземпляра, бывают случаи, когда имеет смысл размещать различные состояния внутри одного компонента. Простейшим примером этого является флажок или переключатель. Вместо того, чтобы иметь два компонента («проверено» и «не проверено»), вы можете просто включить в свой компонент состояние «проверено». Отображение и скрытие слоя «проверено» приведет к переключению состояния.
Выберите отмеченный слой и нажмите клавишу «Удалить», чтобы скрыть слой. Альтернативный вариант, ⌘ + Shift + H, также будет переключать видимость слоев.
Кадрирование компонентов
Подумайте о компонентах как о расширенных фреймах – все те же вещи, которые вы можете делать с фреймами, также применимы к компонентам, включая возможность их кадрирования.
Создайте компонент и настройте ограничения внутри него – удерживая клавишу ⌘, перетащите фрейм своего компонента, чтобы обрезать содержимое, или отрегулируйте размеры на панели свойств. Содержимое вашего компонента может сместиться, если вы не настроили ограничения, поэтому в первую очередь убедитесь, что вы это сделали. Это отлично подходит для создания строк / столбцов «повторяющейся сетки» или настройки табличных данных. Вы можете создать больше строк, чем вам нужно, и использовать метод для отображения только нужного количества элементов. Соедините этот метод с ограничениями, и вы сможете настроить компоненты, которые будут скрывать или раскрывать контент, поскольку их родительский компонент расширяется и сжимается. Убедитесь, что на панели свойств стоит галочка «Clip Content», чтобы увидеть кадрированный результат.
Настройка кадрирования компонентов сетки:
Как только вы начнете создавать эти сетки, возможности станут безграничны. Переопределение текста, символов и добавление изображений – не проблема!
Текстовые компоненты
До тех пор, пока не будет альтернативного способа обработки текстовых стилей (?), создание их в виде компонентов является лучшим вариантом. Это отлично работает, потому что, как и любой другой компонент, вы можете добавить их в свою командную библиотеку и синхронизировать по своим проектам. Вы также можете легко переопределить свойства, такие как цвет, выравнивание, стиль и вес. Вот несколько шагов для создания текстовых компонентов:
И если вам интересна эта тема, Mirka S написал потрясающую статью по модульным/масштабируемым текстовым технологиям.
Все вместе
В приведенном ниже примере все вышеприведенные методы были использованы для создания чрезвычайно гибкого компонента плитки, который учитывает разные состояния и варианты.
Вот краткое описание нескольких различных вариантов компонентов:
Хорошо построенный компонент может принимать разные формы, просто заменяя вложенные компоненты и переключая видимость слоев
Разбор
Выше ряд элементов, вложенных внутри компонента плитки. Они могут быть включены / выключены или заменены на различные компоненты.
Вот он в действии:
Время, затрачиваемое на настройку компонентов, сэкономит ваше время при создании экранов и внесении глобальных изменений в несколько фреймов / файлов
Несколько дополнительных примечаний
Меню экземпляра (Instance menu)
Другим способом замены компонентов является выбор компонента и доступ к меню экземпляров на панели свойств. Отсюда вы можете выбрать другой компонент для замены. Это работает только для локальных компонентов, потому что список формируется только из компонентов, которые уже существуют в вашем документе.
Использование слеша для сегментации вашей схемы именования не только организует в этом меню ваши компоненты в группы, но и организует ваши экспортированные активы в подкаталоги.
Замещение компонентов
Изменение многих экземпляров часто используемого компонента звучит как сложная задача, особенно если они распространяются по многим различным фреймам. Мы знаем, что изменение экземпляра – это просто, проблема найти все. К счастью, у Figma есть возможность сделать выбор, основанный на общих чертах.
Документация
Figma позволяет добавлять описания к вашим основным компонентам. Если у вас есть изменения в похожих компонентах, конкретных случаях использования или даже обновленном компоненте, который вы проверяете, это отличное место для добавления полезной информации, которая будет сопровождать ваш компонент, который будет легко доступен для дизайнеров, прямо из панелей компонентов и командной библиотеки.
Документация важна не только для дизайнеров, но и для взаимодействия с разработчиком. Описать каждую деталь в маленьком поле описания невозможно, поэтому постарайтесь поставить себя на место разработчиков и определите, что им нужно знать. Благодаря тому, что структура многих приложений начинает ориентироваться на компоненты, высока вероятность того, что разработчики захотят использовать тот же подход к написанию кода и захотят понять всю гамму каждого компонента и его различных состояний, которые заданы в дизайне. Можно ошибочно полагать, что вам нужно для этого разработать руководство по стилю, сайт документации или дополнительные инструменты, но многие небольшие команды просто не имеют времени или ресурсов на это. Хорошая новость заключается в том, что для того, чтобы быть успешным это не нужно – придерживайтесь простоты и не усложняйте рабочий процесс.
Figma может помочь упростить передачу проекта разработчику. Рассмотрим приведенный ниже пример. Компонент выбора даты с различными состояниями. Этот конкретный компонент находится внутри файла настройки, чтобы быть хранилищем для всех компонентов интерфейса в системе дизайна. Компоненты в нем разделяются на другие файлы, содержащие макеты экрана. Вместо того, чтобы отправлять разработчику только экраны, подумайте о том, чтобы поделиться ссылкой непосредственно на документы из вашей командной библиотеки в придачу к макетам.
Основные компоненты, составляющие выборщик дат, находятся во фрейме (названы соответственно так, что они группируются на панели компонентов). Основные компоненты расположены слева. Это те компоненты, к которым дизайнеры будут иметь доступ со своей панели командных библиотек при работе с макетами экрана. Справа – это только экземпляры основных компонентов (поэтому вам не нужно беспокоиться об этом, загромождая командную библиотеку при доступе из других файлов). Эти экземпляры могут быть собраны для иллюстрации различных состояний компонента. Документация может быть такой же простой, как добавление примечаний и взаимодействие с разработчиками посредством комментариев. Это позволяет все держать в одном месте и спасает разработчика от необходимости искать различные макеты экрана, чтобы понять весь объем того, что ему нужно построить.
Удаление основного компонента
Удаление основного компонента может быть катастрофой. Представьте, что каждый связанный экземпляр упомянутого компонента внезапно отсоединяется и возвращается во фрейм! Figma этого не допустит. Экземпляры фактически сохраняют статус своего экземпляра, если вам придется вернуться к ним позже. Это позволяет вам либо выбрать их все, либо поменять их на другой компонент (который существует), или вы восстановите исходный основной компонент.
Спасибо за прочтение—пожалуйста поделитесь своими мыслями, задайте вопросы и дайте нам знать была ли эта статья полезна для вас. Свободно пишите автору в директ вTwitter, или вы можете найти его наSpectrum Figma канале, если у вас есть вопросы!
И… если вы не пробовали Figmaпрежде, но случайно наткнулись на эту статью, попробуйте ее, она бесплатна для частных лиц и студентов!