Как уменьшить компонент в фигме: Custom-size component Figma | Изменение размера элементов внутри копий компонента фигмы / Песочница / Хабр

10 советов по использованию компонентов в Figma

Использование компонентов в Figma выведет ваш рабочий процесс на новый уровень. В этой статье я объясню, что такое компоненты, как они работают, и дам ряд рекомендаций по их использованию. Приступим.

Лучшие практики Figma: компоненты, стили и общие библиотеки

Что такое компоненты?

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

Понимание поведения компонентов

Прежде чем перейти к рекомендациям и советам по компонентам, давайте рассмотрим одну важную концепцию: главные компоненты (master components) и экземпляры компонентов (component instances).

  • Главный компонент создается при первом превращении элемента интерфейса в компонент и определяет свойства компонента.
  • Экземпляр является копией главного компонента, который вы можете повторно использовать в разных проектах.

Экземпляры связаны с главными компонентами. Когда вы вносите изменения в главный компонент, он применяет изменения к экземпляру. На панели слоев вы можете определить по иконке, какие элементы являются главными компонентами, а какие – экземплярами. Для главных компонентов используется иконка с 4 ромбами, а для экземпляров – иконка с одним ромбом.

Демонстрация, как обновляется цвет фона кнопки и то, как это обновление распространяется на связанные экземпляры

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

Организация и структурирование компонентов

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

1) Используйте четкую систему наименований и фреймы для организации компонентов

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

Именование со слешем

Именование со слешем – это соглашение об именах компонентов, которое использует косую черту для создания организованной иерархии ваших компонентов. Например, если у вас есть первичная и вторичная кнопки с поддерживаемыми состояниями, вы можете использовать «/»:

  • button/primary/text — active
  • button/primary/text — default
  • button/primary/text — disabled
  • button/secondary/text — active
  • button/secondary/text — default
  • button/secondary/text — disabled

Пример, как использование слеша в имени хорошо организует компоненты на панели ресурсов

Для доступа к более широкой подкатегории «связанных компонентов» в меню экземпляра вы можете объединить две последние метки, т. е. текст кнопки (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 позволяет изменять размер списка и отображать больше или меньше строк, используя только один главный компонент. Помните, что для этого нужно правильно настроить ограничения. Если вы этого не сделаете, расширение или уменьшение границ компонента нарушит его.

Функция Clip content в действии

7) Добавьте описание к компоненту

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

Целью описания компонентов является предоставление необходимой информации, чтобы дать членам команды достаточно контекста для понимания работы компонента и его места в продукте. Не переусердствуйте и не документируйте каждый главный компонент. Наиболее распространенные причины для добавления описания к компоненту – обеспечить ясность вложенного компонента или предоставить сопутствующий контекст о состоянии / варианте конкретного компонента. Гораздо лучше создать систему самодокументирования, чем поддерживать сотни описаний компонентов.

Когда вы добавляете к компоненту описание, наведите на него курсор на панели ресурсов, и появится подсказка

8) Используйте переопределения экземпляров для адаптации компонентов к разным пользовательским контекстам

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

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

Вот все свойства, которые вы можете переопределить:

  • Текст: шрифт, вес, размер, высота строки, интервал между буквами, интервал абзаца, структурирование текста и текстовое содержимое.
  • Цвет: заливка, обводка, цвет фона, непрозрачность.
  • Эффекты: тени, внутренние тени, размытие.
  • Дополнительно: размер всего компонента, замена вложенных экземпляров, включение / выключение слоев.

В следующих двух примерах показано, как устанавливать переопределения и как эти переопределения сохраняются даже при обновлении главного компонента.

Переопределение в действии

Обновления главного компонента не отменяют переопределения, установленные в первом примере

Если вы делаете переопределения для экземпляра, но позже хотите вернуться к первоначально унаследованным свойствам, вы можете сбросить переопределенный экземпляр. У вас есть возможность сбросить все переопределения или сбросить конкретное переопределение.

Сброс всех переопределений из первого примера

9) Быстрая замена связанных компонентов

Поскольку число ваших компонентов растет, поиск нужного компонента на панели ресурсов и в меню экземпляра может быть утомительным. К счастью для нас, у Figma есть решение. Быстрый способ поменять связанные компоненты – использовать контекстное меню. Просто щелкните правой кнопкой мыши по экземпляру, который вы хотите переключить, и перейдите к пункту Swap instance. Появится подменю со списком связанных компонентов.

Способ быстрого переключения экземпляров

10) Отсоедините экземпляр, чтобы удалить связь с главным компонентом

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

Вывод

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


Перевод статьи Jake Tsacudakis

Изменение размера элемента внутри инстанса. Приёмы и фишки | by Андрей Насонов | Дизайн-кабак

Изменение размера элемента внутри инстанса. Приёмы и фишки | by Андрей Насонов | Дизайн-кабак | MediumPublished in

·

4 min read

·

Oct 9, 2021

Что такое “Custom size component” или как изменить размер элемента в инстансе компонента?

Всем привет, меня зовут Андрей Насонов я работаю UI/UX дизайнером, это моя серия статей про фишки, трюки и прочие штуки в Figma 🙂

  1. Разметка элементов в Figma
  2. Компонент в Figma с нулевыми размерами
  3. Изменение размера элемента внутри инстанса (Эта статья)

Это компонент в котором размер изменяется за счёт отступов “spacing” между двумя элементами с шириной или высотой 0px.

Изменение ширины компонента с помощью “spacing”

Про элементы с нулевыми размерами я писал ранее в статье “Компонент в Figma с нулевыми размерами”

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

Задавать размер фреймов внутри инстансов можно благодаря “Custom size component”.

Стандартным способом невозможно задать размер элемента внутри инстанса

Важно! Речь идет именно о том, чтобы задавать элементу конкретный размер в пикселях, а не абстрактный размер с помощью настойки автолейаутов “Fill container” или настроек “Left and right” и “Scale”.

Заполняемый — Внутри такого компонента можно разместить другой фрейм или другой компонент который будет расширяться вместе с “Custom size component”.

Не заполняемый — Такой компонент является самостоятельным и внутри него ничего не размещается кроме нулевых компонентов. Чаще всего к такому компоненту применяют заливку, скругления углов и прочие стили.

Изображение внутри компонента

Используя “Сustom size component” можно изменять размер изображения внутри каждого инстанса. Это заполняемый компонент. Пример в Figma

Изменение размера изображения внутри компонент карточки

Линия прогрессбара

Пример в Figma

Изменение ширины прогрессбара

Хендлер скроллбара

Пример в Figma

Изменение размера хэндлера

В элементах “Линия прогрессбара”, “Хендлер скроллбара” — “Custom size component” является самостоятельным.

Ниже описан процесс создания заполняемого сustom size компонента. Либо просто используйте готовый компонент.

Создание структуры:

  1. Создайте Auto Layout и назовите его “Custom size component”.
  2. Внутри “Custom size component” создайте Auto Layout с вертикальным направлением и назовите его “1”.
  3. Внутри “1” создайте еще один Auto Layout но с горизонтальным направлением и назовите его “2”.
  4. Далее внутри “2” поместите элемент размер которого вы хотите изменять внутри инстансов.
  5. Отдельно создайте Auto Layout с горизонтальным направлением и назовите его “Horizontal size”.
  6. Внутри “Horizontal size” создайте два фрейма, выделите их и в полях ширины и высоты впишите значение “0.0001”.
  7. Так же отдельно создайте Auto Layout с вертикальным направлением и назовите его “Vertical size”.
  8. Внутри “Vertical size” создайте два фрейма, выделите их и в полях ширины и высоты впишите значение “0.0001”.
  9. Переместите “Horizontal size” в “1” а “Vertical size” в “2”.

После проделанных действий вы должны получить вот такую структуру слоев:

Структура слоев “Custom size component”

Настройка Auto Layout:

Примените к слоям такие же настройки как на скриншотах. Начнем настройку слоев снизу вверх.

Настройки “Element”Настройки “Vertical size”Настройки “2”Настройки “Horizontal size”Настройки “1”Настройки “Custom size component”

Теперь, вместо того чтобы создавать множество одинаковых компонентов с разным размером, вы можете создать один компонент с кастомным размером и вносить изменения уже в инстансы.

Если вы узнали что-то новое или статья была вам полезна — жмите клапс 👏 (можно несколько раз). А если хотите узнать больше фишек — подписывайтесь, чтобы не пропустить новые статьи.

Design

Web Design

Written by Андрей Насонов

226 Followers

·Writer for

Пишу буквы, показываю картинки 🙂 Ui/Ux/Graphic Designer

More from Андрей Насонов and Дизайн-кабак

Андрей Насонов

in

Design System: Icons

Preparing icons for use in the design system

7 min read·Dec 22, 2020

Елизавета Черникова

in

Архетипы: Маг и польза архетипов

Помните как в детстве мы представляли себя героями своего любимого фильма? А как играли с друзьями в казаки-разбойники, в море волнуется…

5 min read·Oct 30, 2020

Илья Сидоренко

in

Как ChatGPT за 5 минут помог мне получить предложения о работе

В начале года я использовал ChatGPT для составления резюме на LinkedIn.

На скриншотах вы видите результаты. Несколько предложений пришли ко…

1 min read·May 5

Андрей Насонов

in

Дизайн система: Иконки

Подготовка иконок к работе в дизайн системе

6 min read·Dec 24, 2020

See all from Андрей Насонов

Recommended from Medium

The PyCoach

in

You’re Using ChatGPT Wrong! Here’s How to Be Ahead of 99% of ChatGPT Users

Master ChatGPT by learning prompt engineering.

·7 min read·Mar 17

Michal Malewicz

There are FIVE levels of UI skill.

Only level 4+ gets you hired.

·6 min read·Apr 25

Lists

Stories to Help You Grow as a Designer

11 stories·44 saves

Good Product Thinking

11 stories·73 saves

A Guide to OKRs – Objectives and Key Results

10 stories·32 saves

Company Offsite Reading List

8 stories·10 saves

Christina Sa

in

The UX Design Case Study That Got Me Hired

Getting a job in UX design is tough, but one particular case study helped me stand out from the crowd.

I designed a non-traditional…

·8 min read·Mar 16

Unbecoming

10 Seconds That Ended My 20 Year Marriage

It’s August in Northern Virginia, hot and humid. I still haven’t showered from my morning trail run. I’m wearing my stay-at-home mom…

·4 min read·Feb 16, 2022

Zulie Rane

in

If You Want to Be a Creator, Delete All (But Two) Social Media Platforms

In October 2022, during the whole Elon Musk debacle, I finally deleted Twitter from my phone. Around the same time, I also logged out of…

·8 min read·Apr 19

Aleid ter Weel

in

10 Things To Do In The Evening Instead Of Watching Netflix

Device-free habits to increase your productivity and happiness.

·5 min read·Feb 15, 2022

See more recommendations

Status

Careers

Text to speech

Изменение размера слоев — Руководство Figma

Добавить в избранное

Изменение размера слоев с помощью инструмента масштабирования

Руководство Figma

1

Инструмент проектирования Figma

0:54

9 0002 2

Редактор в Figma

1: 17

3

Основные инструменты

2:14

4

Свойства положения, размера, поворота и углового радиуса

1:27

5 900 03

Цветовые стили

1:13

7

Темный режим с выбранными цветами

1:17

8

Градиенты

1:36

9

Создание фона 9000 3

2:37

10

Режимы наложения

2:02

11

Свойства выравнивания, распределения и уборки

1:24

12

Объединение и угловой радиус

2:53

13

Эффекты тени и размытия

1:48

14

Использование изображений

2:00

15

Заливка, обводка и расширенная обводка

3:21

16

Свойства текста и Стили

1:37

17

Шрифты Google и Пользовательские шрифты

1:13

18

Специальные возможности

19

Адаптивный дизайн

3:07

20

9 0002 Ограничения

1:11

21

Сетка макета

2:00

22

Автоматическая компоновка в Figma

8:17

23

Векторный режим

0:55

24

Векторная сеть

1:19

25

Мокапы в перспективе

2:00

26

3D макеты

1:20

27

Использование иллюстраций в дизайне

2:03

9000 2 28

Логические значения

2:24

29

Дизайн иконок

1:48

30

Компоненты

1:50

31

Коллективная библиотека

2:14

32 900 03

Создание конфетти

1:59

33

Дублирование формы петлителя

1 :41

34

Apple Watch Ring

2:23

35

Экспорт активов в Figma

1:39

36 9000 3

Экспорт кода CSS

1:04

37

Проектирование с использованием данных

1:57

38

Прототипирование

2:25

39

История версий

1:25

40

Мультиплеер, комментарии и превью

1:36

41

Варианты

5:39

42

Интерактивные компоненты

43

UIKits

4:47

44

9000 2 Плагины

5:47

45

Blob Background

4:45

46

Волнистый фон

6:46

47

3D-фигуры

12:27

48

Параллаксное прототипирование в Figma

7:52

49

Перспективный дизайн пользовательского интерфейса 3D

7 :16

50

Стеклянная иконка

9:16

51

Хрустальный шар с анимационным эффектом воды

12:54

52 900 03

Дизайн и программирование линейной анимации с буквами

29:38

53

Футуристическая линейная анимация

19:30

54

Импорт из Adobe Illustrator в Figma

3:16

55

Создать иллюстрацию в Figma

4:07

56

Удалить плагин BG

2:27

57

Круговые линии Advanced Stroke

3:27

58

Опубликовать дизайн в сообществе

9000 2 4:49

59

Превратить изображение в вектор

3:11

60

Прототип с прокручиваемым содержимым

3:42

61

Обнять содержимое и изменить его размер

62

Advanced Auto Layout

4:13

63

Круговой текст на пути

5:57

64

Зеркальный прототип

2:39

65

Прототип липкой панели навигации и вкладок

4:37 9 0003

66

Видео в Figma Prototype

67

Градиенты сетки

3:03

68

Figma Sections

69

Unsplash Stock Photos

2:07

90 002 70

Угловой градиент

4:17

71

Радиальный градиент

5:11

72

Анимация после задержки Прототипирование

73

Каркас пользовательского интерфейса

2:53

74

Анимация Лотти

3:55

75

Дизайн Экран регистрации

6:42

76

Генератор контента

2:53

77

Дизайн Отсутствует стиль

2:36

90 002 78

Инструмент «Срез»

79

Адаптивный макет с точками останова

80

Дизайн диаграмм

81

Модальные окна дизайна

82

Пакетное переименование

83

Вводный экран дизайна

84

Прототип анимированной кнопки

85

Smart Selection

86

Свойства компонента

87

RedLines

88

Интерактивный календарь

900 02 89

Измерение расстояния

90

Переменные шрифты

91

Плагины AI

92

Текстовая анимация

93

Изменение размера слоев

94

Просмотр контуров слоя

95

Соединения прототипа

96

Экспорт SVG-файлов и кода

97

3D-иллюстрации

98

Заполнитель пользовательского интерфейса

99

Переключатель темного режима

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

Покупка включает доступ к более чем 50 курсам, более чем 320 обучающим материалам премиум-класса, более 300 часам видео, исходным файлам и сертификатам.

Учитесь с видео и исходными файлами. Доступно только подписчикам Pro.

Покупка включает доступ к более чем 50 курсам, более чем 320 обучающим материалам премиум-класса, более 300 часам видео, исходным файлам и сертификатам.

Шаблоны и исходный код

Загрузить исходные файлы

Загрузить видео и ресурсы, чтобы обращаться к ним и учиться в автономном режиме без перерыва.

Шаблон дизайна

Исходный код для всех разделов

Видеофайлы, ePub и субтитры

Просмотреть все загрузки

1

Инструмент дизайна Figma

Начало работы с Figma в качестве инструмента дизайна

0:54

2

Редактор в Figma

Знакомство с интерфейсом Figma

1:17

3

Основные инструменты

Знакомство с панелью инструментов в Figma

2:14

4

Свойства позиции, размера, поворота и углового радиуса , поворот и угловой радиус свойства

1:27

5

Цветовые стили

Работа с цветовыми стилями в Figma

1:13

6

Маски

Использование маски для обрезки контента и составления дизайна в Figma

1:47

7

Темный режим с выбранными цветами

Научитесь проектировать и адаптировать проекты для темного режима с выбранными цветами

1:17

8

Градиенты

Мы рассмотрим все различные способы использования градиента с в свои работы, а также приемы при их создании

1:36

9

Создание фона

Дизайн фона в Figma

2:37

10

Режимы наложения

9000 2 Изучите интересные приемы с помощью режимов наложения

2:02

11

Выравнивание Свойства распределения, распределения и очистки

Изучение выравнивания и очистки в Figma

1:24

12

Объединение и угловой радиус

Работа с объединением и угловым радиусом

2:53

13

Эффекты тени и размытия

Изучение способов включения теней и размытия в дизайн

1:48

14

Использование изображений 9 0003

Шаги по использованию изображений в Figma

2:00

15

Заливка, обводка и расширенная обводка

Узнайте больше о заливке и различных параметрах обводки в Figma

3:21

16

Свойства и стили текста 9000 3

Узнайте больше о Типовые свойства Figma

1:37

17

Шрифты Google и пользовательские шрифты

Узнайте о различиях между шрифтами Google и пользовательскими шрифтами для вашего веб-сайта

1:13

18

Специальные возможности

Изучение а11у в дизайне

19

Адаптивный дизайн

Разработка адаптивных макетов в Figma с использованием ограничений и автоматического макета

3:07

20

Ограничения

Работа с ограничениями в Figma

1:11

21

Сетка макета

Научитесь проектировать с использованием сеток, столбцов, строк и полей.

2:00

22

Auto Layout in Figma

Работа с Auto Layout для адаптивного дизайна

8:17

23

Векторный режим 9000 3

Изучение векторного режима для редактирования и настройки векторных фигур

0: 55

24

Векторная сеть

Научитесь использовать векторные сети и создавать иконки

1:19

25

Перспективные макеты

Используйте реалистичные макеты для презентации своих проектов

2:00

26

3D-макеты

Добавление 3D-макетов в дизайн

1:20

27

Использование иллюстраций в дизайне

Включение иллюстраций в ваш дизайн

2:03

28

Логические значения

Использование логических выражений для создания значков

2:24

29

Дизайн иконок

Узнайте, как создавать значки с помощью инструментов, предоставляемых Figma

1:48

30

Компоненты

Сделайте свой дизайн более пригодным для повторного использования с помощью компонентов.

1:50

31

Коллективная библиотека

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

2:14

32

Создание конфетти

9 0002 Работа с плагином Confetti

1:59

33

Форма петлителя Дублирование

Работа с плагином Looper Figma

1:41

34

Кольцо Apple Watch

Создание кольца Apple Watch в Figma

2:23

35

Экспорт ресурсов в Figma

Узнайте об экспорте ресурсов в Figma для реализации

1:39

36

Экспорт CSS-кода

Работа с CSS-кодом в Figma

1:04

37

Проектирование с использованием данных

Плагины, помогающие создавать дизайн с реальным содержанием 90 003

1:57

38

Прототипирование

Быстрое создание полного цикла разработки вашего приложения в Figma

2:25

39

История версий

Работа с историей версий в Figma 9 0003

1:25

40

Мультиплеер , Комментирование и Предварительный просмотр

Узнайте о совместной работе и совместном использовании с Figma

1:36

41

Варианты

Объединение похожих компонентов в варианты

5:39

42

Интерактивные компоненты

Создание повторно используемых взаимодействий с использованием интерактивных компонентов

43

UIKits

Проектирование с использованием UIKits в Figma

4:47

44

Плагины

Изучение и проектирование с использованием плагинов в Figma

5:47

45

Фон-клякса

Создать простой фон-клякса в Figma

4:45

46

Фон с волной

Создайте волновой дизайн в Figma с помощью инструмента «Изгиб» и плагина «Волна»

6:46

47

3D-фигуры

Создайте трехмерные фигуры с помощью векторных инструментов в Figma

12:27 90 003

48

Параллаксное прототипирование в Figma

Узнайте, как создать технику анимации с прокруткой параллакса, при которой фоновый и передний слои движутся с разной скоростью

7:52

49

Перспективный дизайн 3D-интерфейса

Преобразование пользовательского интерфейса с помощью трехмерной перспективы

7:16

50

Стеклянная иконка

Узнайте, как создать креативную иконку с помощью размытия фона

9:16

51

Хрустальный шар с анимацией с эффектом воды

Анимация волн в хрустальном шаре с помощью инструмента прототипирования

12:54

52

Разработка и код линейной анимации с буквами

Узнайте, как анимировать линии с помощью CSS в CodeSandbox

29:38

53

Футуристическая линейная анимация

Узнайте, как создать футуристический фон с линиями с помощью инструмента «Перо» в Figma

19:30

54

90 002 Импорт из Adobe Illustrator в Figma

Лучшие практики для импорта файла Illustrator в Figma

3:16

55

Создание иллюстрации в Figma

Использование векторного инструмента в Figma для создания иллюстрации с нуля

4:07

56

Удалить плагин BG

Удаление фона изображения с помощью плагина RemoveBG в Figma контроллер с тактовыми линиями в Figma

3:27

58

Публикация дизайна в сообществе

Публикация файлов дизайна в сообществе Figma

4:49

59

Преобразование изображения в вектор

Преобразование изображения в вектор в Figma

3:11

60

Прототип с прокручиваемым контентом

Добавьте вертикальную и горизонтальную прокрутку в прототип Figma

3:42

61

Hug Content и изменение размера

Узнайте, как выбрать правильные параметры изменения размера, включая объемный контент, фиксированная ширина или высота, контейнер заполнения и усечение текста

62

Advanced Auto Layout

Узнайте, как использовать режим интервалов, наложение холста, выравнивание текста по базовой линии, значения обводки в расширенном макете

4:13

63

Круговой текст на пути

Сделать круговой текст на пути с помощью плагина ARC в Figma

5:57

64

Зеркальный прототип

Просматривайте свои прототипы на мобильном устройстве с помощью Мобильное приложение Figma. 3

Видео в Figma Prototype

Применение видео в качестве заливки с помощью любой векторной сети к вашему прототипу 03

Фигма Разделы

Используйте разделы в Figma для лучшей организации проектов и облегчения совместной работы

69

Unsplash Стоковые Фото

Вставляйте красивые изображения из Unsplash прямо в свои проекты

2:07

70

Угловой градиент

Пошаговое руководство по созданию и настройке углового градиента в Figma

4:17

71

Радиальный градиент

Создание ярких радиальных градиентов в Figma для профессиональный дизайн

5:11

72

Анимация после задержки Прототипирование

Самый простой способ анимировать что-либо в Интернете, используя простое взаимодействие после задержки в Figma

73

UI-каркас

Используйте различные инструменты и плагины для создания каркаса, которая помогает легко планировать и разработать ваш пользовательский интерфейс

2:53

74

Lottie Animation Figma для улучшения совместной работы и улучшения ваших проектов

3:55

75

Дизайн экрана регистрации

Простой дизайн экрана регистрации в Figma для вашего приложения или веб-сайта

6:42

76

Content Generator

Полезные плагины, которые могут помочь дизайнерам создавать с использованием реального контента и сэкономить время мой дизайн с Design Lint

2:36

78

Инструмент срезов

Экспортируйте свои дизайны с помощью инструмента срезов в Figma

79

Адаптивный макет с точками останова адаптивный веб-дизайн с адаптивным макетом и точками останова

80

Дизайн диаграмм

Изучение бесконечных возможностей дизайна диаграмм для визуализации данных

81

Дизайн модальных окон

Как создавать модальные окна, улучшающие пользовательский интерфейс

82

Пакетное переименование

Быстрое и простое переименование нескольких файлы в Figma с помощью подключаемого модуля Batch Rename

83

Экран адаптации дизайна

Создание привлекательного опыта для удержания пользователей с помощью дизайна адаптации

84

Прототип анимированной кнопки

Как создать динамическую интерактивную кнопку

85

Интеллектуальное выделение

Более эффективное расположение слоев с помощью интеллектуального выделения

86

Свойства компонента

Уменьшите количество вариантов в вашем проекте систему, используя свойства компонентов и редактируя их непосредственно на панели свойств

87

RedLines

Измеряйте расстояния и комментируйте свои проекты Figma перед передачей с помощью плагина Redlines Figma

88

Интерактивный календарь

Узнайте, как использовать интерактивные компоненты в Figma для создания интерактивного календаря с состояниями наведения и нажатия

89

Измерение расстояния Figma

90

Variable Fonts

Узнайте, как заменить статические шрифты версией Variable Font

91

Плагины AI

Лучшие плагины AI для Figma, которые помогут дизайнерам создавать лучшую графику

92

Текстовая анимация

Создайте впечатляющую анимацию движущегося текста с использованием интерактивного компонента и после задержки

93

Изменение размера слоев

Изменение размера слоев с помощью инструмента масштабирования

94 90 003

Просмотр контуров слоев

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

95

Подключения прототипов

Настройте свои прототипы так, чтобы любой, у кого есть доступ к просмотру, мог видеть взаимодействия

96

Экспорт файлов и кода SVG

Экспорт изображения в виде файла SVG позволяет легко встроить его в код HTML и CSS

97

3D-иллюстрации

Дизайн проекта

98

Заполнитель пользовательского интерфейса

Вставка временного элемента для визуализации дизайна

99

Переключатель темного режима

Превратите свой дизайн в темный режим одним щелчком мыши

Познакомьтесь с инструктором

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

Sourasith Phomhome

Дизайнер пользовательского интерфейса

Дизайнер в Design+Code

10 курсов — 30 часов прототипы с использованием основных методов проектирования и инструментов искусственного интеллекта

4 часа

Дизайн iOS с помощью Midjourney и Figma

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

1 час

Дизайн пользовательского интерфейса для iOS, Android и Интернета в Sketch

Создайте дизайн пользовательского интерфейса с нуля с помощью Smart Layout, Components, Prototyping в приложении Sketch

1 час

Дизайн пользовательского интерфейса приложения камеры в Figma

Создайте темный, яркий и изогнутый дизайн приложения с нуля в Figma. Создавайте стеклянные значки, мазки линз и реалистичные кнопки.

1 час

Дизайн интерфейса для iOS 16 в Sketch

Полное руководство по дизайну для iOS 16 с видео, примерами и файлами дизайна

3 часа

Прототипирование в Figma

Изучите основы про типирование в Figma путем создания интерактивные потоки из пользовательских дизайнов

1 час

Быстрый дизайн пользовательского интерфейса в Figma

Узнайте, как с нуля создать веб-интерфейс для портфолио в Figma

1 час

Дизайн пользовательского интерфейса Android-приложений в Figma

Разработка пользовательского интерфейса приложений для Android с нуля с использованием различных приемов и методов в Figma

2 часа

Быстрый дизайн пользовательского интерфейса в Figma

Разработка пользовательского интерфейса приложений с нуля с использованием различных приемов и методов в Figma

12 часов

900 02 Справочник Figma

Полное руководство с лучшими советами и рекомендациями по Figma

4 часа

Руководство Figma по автоматической компоновке и ограничениям | от Thalion

UI DesignTutorial

Узнайте, как с легкостью создавать адаптивные компоненты в Figma.

Опубликовано в

·

Чтение: 7 мин.

·

4 октября 2021 г.

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

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

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

Благодаря ограничениям Figma знает, как изменить размер и положение определенного элемента при изменении размера его рамки.

При работе с ограничениями можно выбрать несколько параметров. Объект может придерживаться слева, справа, слева и справа, сверху, снизу, сверху и снизу. Он может располагаться по центру или даже масштабироваться пропорционально изменению размера кадра.

Теперь давайте рассмотрим несколько примеров реальных компонентов, созданных с различными свойствами ограничений.

Кнопки внутри группы должны растягиваться до нужного размера с помощью, но текст или значки внутри должны оставаться по центру. Благодаря ограничениям этого легко достичь.

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

Карты могут выглядеть по-разному, но их содержание должно соответствовать определенным областям. В этом случае содержимое карты выравнивается по левым и нижним ограничениям.

Адаптивные таблицы — основа современных веб-решений. Позвольте ячейкам масштабироваться, чтобы соответствовать необходимому пространству. Однако содержимое внутри должно быть выровнено по определенным краям (в большинстве случаев слева).

Этот компонент популярен в современном веб-дизайне. Создать его в Figma легко благодаря ограничениям. Кнопки «Далее» и «Назад» прилипают к левому и правому краям. Они также центрированы по вертикали. Индикатор страницы расположен по центру горизонтально и прикреплен к нижней части карусели.

Auto Layout — это функция Figma , предназначенная для создания компонентов и фреймов, которые адаптируют свой размер к содержимому внутри них (в отличие от ограничений, которые адаптируются к изменениям их среды).

Auto Layout — это размещение элементов рядом друг с другом внутри фрейма. Они могут быть выровнены по вертикали или по горизонтали. Figma поддерживает только одно направление за раз, вертикальное или горизонтальное. Если вы хотите создать компоненты, использующие оба направления, вам нужно объединить или вложить внутрь несколько фреймов с автоматическим макетом.

Auto Layout позволяет установить расстояние между элементами внутри и добавить отступ к фрейму, который его использует.

У вас также есть несколько вариантов распространения. Объекты могут быть «упакованы» (размещены рядом) или распределены по всему кадру с помощью опции «Пробел между».

Что еще более важно, вы можете выравнивать, если объекты должны придерживаться определенных горизонтальных сторон (слева или справа) и вертикальных (сверху и снизу). Они также могут быть центрированы.

Элементы внутри Auto Layout могут устанавливать следующие параметры изменения размера:

  • Фиксированная ширина или высота — объект сохраняет свой размер.
  • Содержимое Hug — элемент адаптируется к содержимому внутри.
  • Заполнить контейнер — объекты заполняют пространство контейнера.

Вы можете добавить Auto layout к рамке или выбору объектов (которые будут превращены в рамку с Auto layout). Вы можете сделать это, нажав кнопку «плюс» в разделе «Автоматическая компоновка» на правой панели или нажав сочетание клавиш «Shift + A».

Стоит отметить, что Auto Layout имеет некоторые ограничения. Вы не можете делать следующие вещи с фреймами Auto Layout:

  • Добавление зависимостей к любым элементам в кадре Auto Layout
  • Использование интеллектуального выбора любых объектов в пределах этого кадра
  • Добавление сетки макета к кадру с помощью AutoLayout

Редактирование порядка объектов в кадре Auto Layout выполняется сверхбыстро. Все, что вам нужно сделать, это выбрать компонент, который вы хотите переместить, и перетащить его внутрь рамки контейнера. Вы заметите умные направляющие, которые подчеркнут область перетаскивания.

Теперь давайте посмотрим, как настоящие компоненты системы дизайна используют Auto Layout для адаптации размера к своему содержимому.

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

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

Очевидно, что эти крошечные элементы должны расширять и сворачивать свою рамку в зависимости от текстового содержимого внутри.

Всплывающие окна и модальные окна также являются хорошими примерами компонентов, использующих Auto Layout. Они должны подстраиваться под количество текстового контента внутри.

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

Более подробное описание Auto Layout можно найти в официальной документации Figma.

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

Некоторым компонентам или экранам это может не понадобиться. Вот почему ограничения по-прежнему играют огромную роль в Figma. Посмотрите на примеры сверху; есть много компонентов, которые не имеют Auto Layout, но очень полезны.

Когда вы создаете набор основных компонентов с помощью AutoLayout, таких как общие кнопки, чтобы использовать их позже внутри компонентов определенного элемента (основная кнопка, дополнительная кнопка и т. д.), вы можете увидеть, что Auto Layout будет работать идеально при изменении содержимого.

Однако что делать, если вы хотите отрегулировать ширину вручную? Ваш экземпляр Button не растягивается. Итак… вам нужно подготовить альтернативные компоненты без Autolayout? №

Если вы хотите иметь растянутый вручную компонент — Figma позволяет переопределить настройки изменения размера. Все, что вам нужно сделать, это выбрать экземпляр основной кнопки и найти экземпляр основной кнопки внутри. Затем измените параметр изменения размера с «Обнять содержимое» на «Заполнить контейнер». Вуаля! Теперь ширину или высоту вашей кнопки можно настроить вручную, не создавая еще один компонент!

Группы не имеют возможности управлять размером, как фреймы. К счастью, если вы хотите превратить группу во фрейм для использования автоматического макета, достаточно выбрать его и нажать кнопку Auto Layout plus на панели справа. Группа станет рамкой с автоматическим расположением.

Иногда может потребоваться изменить размер фрейма без использования примененных к нему ограничений (это может привести к изменению размера и положения объектов внутри фрейма).

Вы можете игнорировать ограничения, применяемые к вложенным объектам, удерживая клавишу CMD (Windows — CRTL) при изменении размера фрейма.

Auto Layout and Constraints — это функции, которыми должен овладеть каждый дизайнер, использующий Figma.