Clip content в фигме что это
Компоненты в фигме: как сделать, убрать, отменить, разломать
В этом видео уроке и статье вы узнаете про компоненты в фигме. Разбираемся что это такое, зачем они нужны, как сделать, убрать, отменить и разломать компоненты в Figma. Это поможет вам работать намного быстрее и упростить вашу работу.
Что такое компоненты в Figma и зачем они нужны?
Компоненты в figma — это элементы, которые можно редактировать массово.
Например если вы создадите кнопку, сделаете из неё компонент, а затем скопируете, то при изменении цвета, размера, текста у главного компонента копии также будут меняться.
Как сделать компонент в фигме?
Чтобы сделать компонент в фигме выберите любой элемент и сверху по центру нажмите на иконку для создания компонента «Create component». Также можно нажать на комбинацию горячих клавиш «Ctrl + Alt + K». На примере выше показано, как сделать компонент из кнопки.
Если перейдете во вкладку «Accets», то увидите созданные вами ранее компоненты. Их можно перетаскивать в ваш проект и использовать повторно.
Главный компонент в слоях отображается иконкой с 4 ромбами. Дочерние компоненты (копии) обозначены одним ромбом.
Как работать с компонентами в фигме?
Если вы скопируете компонент, а затем измените что-то в копии (например зададите обводку, измените надпись, цвет, размер и т.д.), то при изменении этих параметров в главном компоненте, они не будут изменяться в копии.
Изменяю размер главного компонента, как показано на примере выше. Нижний компонент (копия) не изменяет свои размеры, потому, что ранее я уменьшил эту кнопку.
Чтобы размер дочернего компонента снова изменялся, нужно нажать на 3 иконки справа и выбрать «Reset size».
Теперь при изменении главного компонента копия тоже будет менять размер.
Чтобы убрать обводку у дочернего компонента, выбрите его и нажмите на иконку с 3 точками справа. Выберите из списка «Reset stroke».
Чтобы убрать все изменения в дочернем компоненте (для того, чтобы к нему применялись изменения главного компонента), нажмите на иконку с 3 точками справа и выберите пункт «Reset all overrides».
Как убрать компонент в фигме?
Чтобы убрать (отменить, разгруппировать, разломать) компонент в фигме, выберите копию компонента и нажмите на иконку с тремя точками в правой панели. Выберите пункт «Detach instance» или нажмите на горячие клавиши «Alt + Ctrl + B». В этом случае вы сделаете из компонента простой элемент. Это сработает только для дочерних элементов (копий). Разломать главный компонент обычным способом в фигме нельзя.
Как применить стиль дочернего компонента к главному
Представим ситуацию, что у вас есть несколько кнопок в формате компонентов. Вы выбрали дочерний компонент и изменили в нём цвет с оранжевого на синий. Если нажать справа на иконку с тремя точками и выбрать пункт «Push overrides to main component», то главный компонент примет стиль дочернего и все копии также изменят свой стиль.
Как найти главный компонент в фигме?
Найти главный компонент в фигме можно с помощью дочернего. Выберите копию компонента и в правой панели нажмите на иконку с четырьмя ромбами «Go to main component». Вас перенаправит к главному компоненту.
Как создать компоненты в фигме массово?
Если вам потребовалось создать сразу несколько компонентов, то выделите нужные элементы и сверху по центру (напротив иконки создания компонентов) нажмите на стрелку и выберите пункт «Create multiple components», что переводится как «Создать несколько компонентов».
На примере выше я выбрали 4 кнопки и создал из них компоненты.
Создадим фрейм вокруг этих кнопок и назовем этот фрейм например «Buttons». Если сделаю копию какой-то кнопки, то справа появится возможность менять стиль этой кнопки на другой компонент.
Заключение
Итак, вы этой инструкции вы узнали о том, как работать с компонентами в фигме. Это поможет вам работать быстрее, поскольку не нужно будет менять несколько элементов.
Архитектура компонентов в 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прежде, но случайно наткнулись на эту статью, попробуйте ее, она бесплатна для частных лиц и студентов!
Компоненты в Фигме
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 — одна из фичей, открывающая новое измерение для творческой работы, особенно когда вы хотите сделать элементы интерфейса, реагирующие на различные размеры и координаты:
10 советов по использованию компонентов в Figma
Использование компонентов в Figma выведет ваш рабочий процесс на новый уровень. В этой статье я объясню, что такое компоненты, как они работают, и дам ряд рекомендаций по их использованию. Приступим.
Что такое компоненты?
Компоненты – это элементы интерфейса, которые можно повторно использовать в наших дизайн-проектах. Компонентом может быть кнопка, иконка или что-то сложное, например, таблица данных. Преимущество использования компонентов в проектах заключается в том, что каждый раз, когда вы вносите изменения в компонент, он обновляет все экземпляры компонента, автоматически экономя ваше время на повторяющуюся и утомительную работу. Это ускоряет ваш рабочий процесс, делает вашу дизайн-систему более согласованной, а также значительно упрощает ее поддержку и сотрудничество с другими дизайнерами.
Понимание поведения компонентов
Прежде чем перейти к рекомендациям и советам по компонентам, давайте рассмотрим одну важную концепцию: главные компоненты (master components) и экземпляры компонентов (component instances).
Экземпляры связаны с главными компонентами. Когда вы вносите изменения в главный компонент, он применяет изменения к экземпляру. На панели слоев вы можете определить по иконке, какие элементы являются главными компонентами, а какие – экземплярами. Для главных компонентов используется иконка с 4 ромбами, а для экземпляров – иконка с одним ромбом.
Важно помнить, что экземпляр наследует все изменения, внесенные в главный компонент, за исключением переопределений экземпляра. Я более подробно остановлюсь на переопределениях экземпляров позже.
Организация и структурирование компонентов
Теперь, когда мы понимаем, как работают компоненты и почему их важно использовать, давайте рассмотрим лучшие практики организации и структурирования компонентов.
1) Используйте четкую систему наименований и фреймы для организации компонентов
Хорошая организация и система наименований позволяют легко находить компоненты на панели ресурсов, менять соответствующие компоненты и повышать юзабилити и адаптацию системы другими членами команды. Двумя наиболее полезными вариантами, используемыми при организации компонентов, являются имена со слешем (косой чертой) и фреймы-контейнеры. Использование обоих вариантов дает вам надежную и гибкую организационную структуру. Вот как они работают.
Именование со слешем
Именование со слешем – это соглашение об именах компонентов, которое использует косую черту для создания организованной иерархии ваших компонентов. Например, если у вас есть первичная и вторичная кнопки с поддерживаемыми состояниями, вы можете использовать «/»:
Для доступа к более широкой подкатегории «связанных компонентов» в меню экземпляра вы можете объединить две последние метки, т.е. текст кнопки (text) и статус кнопки (default), разделяя их тире вместо косой черты. Это особенно полезно для больших категорий со множеством подкатегорий. Вы можете увидеть это в действии на панели активов на скриншоте выше.
Фреймы-контейнеры
Сгруппируйте и организуйте свои компоненты в коллекции, используя фреймы. Это сокращает имена компонентов и упрощает визуализацию их связей.
Когда вы объединяете оба варианта именования, вы получаете лучшую организацию на панели ресурсов и в меню экземпляров.
Вот еще один пример использования фрейм-контейнеров и именований со слешем
2) Выберите простой для понимания метод структурирования состояний и вариантов компонентов
По мере роста ваших компонентов вам потребуется система для управления и структурирования их состояний и вариантов. Если у вас нет способа упорядочить различные состояния и варианты компонента, ваша система станет неуправляемой и неудобной в использовании.
Есть несколько методов, которые помогут вам управлять этими зависимостями. У каждого есть свои плюсы и минусы, и в зависимости от того, как работает ваша команда, один метод может оказаться более подходящим, чем другой. Я разберу каждый метод и поделюсь компромиссами их использования.
а) Отдельные главные компоненты для каждого варианта
Этот метод прост и понятен. Вы используете отдельные главные компоненты для каждого варианта или состояния, которое необходимо поддерживать. Он понятен и прост в использовании.
Плюсы:
Минусы:
b) Вложение всех вариантов в один главный компонент
Этот метод использует один главный компонент со всеми вариантами, вложенными в него. Хотя это кажется отличной альтернативой недостаткам метода A, оно имеет свои собственные уникальные проблемы.
Плюсы:
Минусы:
c) Создание переопределений для всех вариантов с использованием одного главного компонента
Этот метод использует один главный компонент и создает все варианты, используя переопределения экземпляров.
Плюсы:
Минусы:
Имейте в виду, что это не выбор между одним методом или другим. Вы можете использовать гибридный подход для поддержания различных состояний и вариантов компонентов. Тем не менее, я рекомендую использовать метод A (отдельные компоненты для каждого состояния или варианта) в качестве основного. Используйте методы B и C, если компонент поддается вложенным вариантам или простым переопределениям экземпляров, как пример с аватаром профиля выше.
3) Используйте вложенные атомные компоненты в качестве глобальных строительных блоков
Хорошо структурированная система компонентов проста в обслуживании. Один из лучших способов сделать компоненты более удобными в обслуживании – использовать «атомные» компоненты. Эта концепция основана на методологии атомарного дизайна, Брэда Фроста, в которой атом представляет наименьшее инкрементное свойство элемента интерфейса. Думайте об этих атомных компонентах, как о строительных блоках. Например, форма кнопки или иконка.
Наилучшим подходом для этого является создание набора многократно используемых атомных компонентов с единственной целью вложения атомарных экземпляров в другие связанные компоненты. Возьмем, в качестве примера, текстовые поля. Мы можем превратить форму текстового поля в атомный компонент и вложить его экземпляры в каждый другой компонент текстового поля, который мы создаем. Это означает, что все текстовые поля используют один и тот же строительный блок (то есть атомный экземпляр), и, если будет необходимо изменить форму текстовых полей, все, что нам нужно сделать, это обновить атомный компонент, и все другие компоненты текстового поля также обновятся. Использование атомарного подхода позволяет беспрепятственно применять глобальные изменения к компонентам, что значительно упрощает обслуживание вашей системы.
Работа с компонентами
У нас есть четкая система структурирования, организации и обслуживания компонентов. Теперь давайте рассмотрим рекомендации по созданию компонентов для улучшения рабочего процесса и производительности вашей команды.
4) Установите ограничения и сетку макета (layout grids) для предсказуемого поведения
Как только вы настроите основной дизайн для компонента, потратьте немного времени, чтобы установить ограничения и сетку макета (при необходимости). Задав эти свойства с самого начала, вы облегчите другим членам команды понимание предполагаемого адаптивного поведения компонента при изменении его размера. Это сэкономит ваше время, пока вы будете работать над поддержкой адаптивного поведения во всем продукте.
Одно примечание по сетке макетов. Использование сетки макета в компоненте необходимо только в том случае, если ваш компонент более сложен и требует детального контроля над распределением его элементов по мере изменения его размера.
5) Сохраняйте переопределения текста при замене экземпляров
Одна из замечательных особенностей Figma – вы можете сохранить переопределения текста, когда вам нужно поменять местами экземпляры. Для этого убедитесь, что текстовый слой внутри каждого компонента имеет одинаковое имя (например, «Button Text»). Если вы этого не сделаете, ваши переопределения текста не сохраняться, и вам придется вручную обновлять текст после замены экземпляров.
6) Используйте функцию Clip content, чтобы уменьшить количество повторяющихся экземпляров
Поскольку компоненты действуют как фреймы для всех намерений и целей, мы можем использовать функцию Clip content, (обрезать содержимое), чтобы обрезать или скрыть элементы, которые выходят за пределы компонента. Хотя вы не будете использовать Clip content для каждого компонента, это очень полезная функция для компонентов с повторяющимися элементами, такими как таблицы данных и списки. Например, у вас есть компонент списка с различным количеством строк в зависимости от сценария. Использование функции Clip content позволяет изменять размер списка и отображать больше или меньше строк, используя только один главный компонент. Помните, что для этого нужно правильно настроить ограничения. Если вы этого не сделаете, расширение или уменьшение границ компонента нарушит его.
7) Добавьте описание к компоненту
Главные компоненты содержат поле описания, в котором вы можете добавить информацию об использовании компонента, его поведении и другой соответствующий контекст. Описание компонента появляется, когда вы наводите на него курсор на панели ресурсов.
Целью описания компонентов является предоставление необходимой информации, чтобы дать членам команды достаточно контекста для понимания работы компонента и его места в продукте. Не переусердствуйте и не документируйте каждый главный компонент. Наиболее распространенные причины для добавления описания к компоненту – обеспечить ясность вложенного компонента или предоставить сопутствующий контекст о состоянии / варианте конкретного компонента. Гораздо лучше создать систему самодокументирования, чем поддерживать сотни описаний компонентов.
Когда вы добавляете к компоненту описание, наведите на него курсор на панели ресурсов, и появится подсказка
8) Используйте переопределения экземпляров для адаптации компонентов к разным пользовательским контекстам
Иногда вам будет нужно обновить унаследованные свойства экземпляра. Возможно, вам придется внести изменения и адаптировать экземпляры в зависимости от вариантов использования и контекста. Помните, что экземпляр по умолчанию наследует все свойства от своего главного компонента. Вот где пригодятся переопределения. Переопределение позволяет вам изменять свойства экземпляра, не разрывая его связь с главным компонентом.
Переопределения дают вам правильный баланс между гибкостью и согласованностью. Они дают вам гибкость в создании отдельных локализованных экземпляров для соответствия различным контекстам и обеспечивают согласованность, продолжая наследовать обновления от главного компонента.
Вот все свойства, которые вы можете переопределить:
В следующих двух примерах показано, как устанавливать переопределения и как эти переопределения сохраняются даже при обновлении главного компонента.
Если вы делаете переопределения для экземпляра, но позже хотите вернуться к первоначально унаследованным свойствам, вы можете сбросить переопределенный экземпляр. У вас есть возможность сбросить все переопределения или сбросить конкретное переопределение.
9) Быстрая замена связанных компонентов
Поскольку число ваших компонентов растет, поиск нужного компонента на панели ресурсов и в меню экземпляра может быть утомительным. К счастью для нас, у Figma есть решение. Быстрый способ поменять связанные компоненты – использовать контекстное меню. Просто щелкните правой кнопкой мыши по экземпляру, который вы хотите переключить, и перейдите к пункту Swap instance. Появится подменю со списком связанных компонентов.
10) Отсоедините экземпляр, чтобы удалить связь с главным компонентом
Если вы хотите полностью удалить связь между экземпляром и его главным компонентом, вы можете отключить его. Когда вы делаете это, экземпляр становится независимым фреймом и больше не будет наследовать изменения от исходного главного компонента. Это полезно, когда вы хотите создать новый компонент в целом.
Вывод
Создание качественной системы компонентов не простая задача. Это требует времени, терпения и готовности искать способы работать лучше и эффективнее. Когда вы строите свою систему компонентов, просто помните, что нет единственно правильного способа сделать это. Возьмите 10 советов из этого руководства, попробуйте их и измените так, чтобы они лучше подходили к вашему рабочему процессу. Спасибо за прочтение!