Бесплатно

Auto Layout в Figma: создание адаптивных карточек для интерфейсов

Вебинар

Бесплатно

Многие макеты в Figma выглядят аккуратно только до первого изменения текста или структуры — после этого карточки «ломаются», элементы съезжают, а редактирование превращается в ручную работу. Причина — отсутствие системного подхода и неправильное использование Auto Layout. На вебинаре вы разберёте, как создавать не статичные, а гибкие и адаптивные карточки, которые корректно реагируют на изменения контента. Вы научитесь работать с отступами, выравниванием, режимами Hug, Fill и Fixed, а также выстраивать логичную структуру элементов. В результате вы сможете ускорить работу в Figma и повысить качество своих интерфейсов.

Живое обучение начинается

с преподавателя

Мы показываем, как проходят занятия и как объясняют наши эксперты. Смотрите видео и убедитесь в качестве обучения заранее.

Создавай. Придумывай. Проектируй.

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

Реальные впечатления слушателей

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

Учеба без лишних забот

Хотите начать прямо сейчас? Мы предложим рассрочку и удобные варианты оплаты, чтобы вы учились спокойно

Настоящее общение

не записи

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

Auto Layout в Figma: как создавать гибкие и адаптивные элементы интерфейса

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

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

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

Что вы разберёте на вебинаре по Auto Layout в Figma

Принципы Auto Layout. Разберётесь, как работает автоматическое расположение элементов и какую роль оно играет при создании гибких интерфейсных блоков.
Отступы и выравнивание. Рассмотрите настройку внутренних отступов, расстояний между элементами и их положения внутри контейнера.
Режимы Hug, Fill и Fixed. Поймёте различия между основными вариантами изменения размеров и их применение при построении адаптивных элементов.
Вложенную структуру. Разберёте, как организовать несколько связанных элементов внутри одной карточки и сохранить понятную логику макета.
Создание адаптивной карточки. Проследите пошаговую сборку интерфейсного элемента с использованием Auto Layout.
Проверку адаптивности. Увидите, как карточка ведёт себя при изменении текста, состава элементов и размеров контейнера.
Компонентный подход. Познакомитесь с ролью компонентов при работе с повторяющимися элементами интерфейса.
Типичные ошибки Auto Layout. Разберёте распространённые проблемы, которые нарушают структуру и снижают гибкость макета.

Где пригодятся навыки работы с Auto Layout в Figma

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

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

При работе с текстом разного объёма. Режимы Hug, Fill и Fixed помогают определить, как должен изменяться размер элемента в зависимости от содержимого и доступного пространства. Это позволяет сохранить композицию карточки даже при изменении длины текста.

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

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

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

При дальнейшем редактировании интерфейса. Грамотно настроенный Auto Layout делает структуру элемента более понятной и позволяет вносить изменения без необходимости каждый раз перестраивать расположение объектов вручную.

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

Как проходит вебинар по Auto Layout в Figma

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

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

Онлайн-встречи проходят на платформе Pruffme и не требуют установки отдельной программы — для подключения достаточно открыть ссылку в браузере. После проведения вебинара запись становится доступна для последующего просмотра: запросить её можно через соответствующую кнопку в карточке мероприятия.

Участники, присутствовавшие на вебинаре в прямом эфире, могут получить сертификат участника. Для оформления сертификата после мероприятия необходимо обратиться к методисту учебного центра.

Кому подойдет вебинар по Auto Layout в Figma

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

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

Дизайнерам с базовым опытом работы в Figma материал поможет систематизировать понимание Auto Layout, режимов Hug, Fill и Fixed и логики построения вложенных элементов. Это особенно полезно тем, кто уже использует инструмент, но сталкивается с большим количеством ручных исправлений после изменения контента.

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

Введение в тему
- Краткое знакомство с Figma как инструментом интерфейсного дизайна, его возможностями и областью применения в современных проектах.
Постановка задачи
- Разбор проблемы статичных карточек, которые теряют структуру при изменении контента, и объяснение необходимости системного подхода.
Знакомство с Auto Layout
- Объяснение базовой логики Auto Layout: направление элементов, внутренние отступы, расстояния и выравнивание внутри блока.
Основные параметры Auto Layout
- Разбор режимов Hug, Fill и Fixed и их роли при создании адаптивных элементов интерфейса.
Структура карточки
- Формирование структуры карточки, логика расположения элементов и организация вложенности для удобной работы.
Практическая сборка карточки
- Пошаговое создание адаптивной карточки с демонстрацией настроек и принципов построения.
Проверка адаптивности
- Анализ поведения карточки при изменении текста, состава элементов и размеров контейнера.
Компонентный подход
- Введение в создание компонентов и объяснение их роли в работе с повторяющимися элементами.
Частые ошибки
- Разбор типичных проблем при работе с Auto Layout и их влияние на структуру и гибкость макета.
Итоги вебинара
- Подведение итогов и фиксация ключевых принципов работы с адаптивными интерфейсными элементами.

Почему вебинар бесплатный?

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

Дают ли сертификат после вебинара?

Да, слушатели могут получить сертификат участника. Он выдаётся только тем, кто был на вебинаре в прямом эфире. Чтобы получить документ, нужно обратиться к методисту учебного центра.

Будет ли запись вебинара?

Да, запись доступна после проведения. В карточке вебинара появляется кнопка «Запросить запись» — ею могут воспользоваться даже те, кто не участвовал онлайн.

Могу ли я задавать вопросы преподавателю?

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

Где проходят вебинары и нужно ли что-то устанавливать?

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

Задайте свой вопрос

Напишите всё, что вас интересует — специалисты ЦСИО ответят и помогут разобраться в любом вопросе.

Даю согласие на обработку персональных данных

Соглашаюсь с политикой конфиденциальности

Прикрепить файл

Задайте свой вопрос

Поделитесь своим впечатлением

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

Ваша оценка:

Даю согласие на обработку персональных данных

Соглашаюсь с политикой конфиденциальности

Прикрепить файл

Спасибо за ваш отзыв

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

Настоящая Политика регулирует порядок возврата оплаты за обучение по всем формам обучения (очная, очно-заочная, заочная с применением ДОТ) и разработана в соответствии с:
– Федеральным законом «Об образовании в Российской Федерации»;
– Законом РФ «О защите прав потребителей»;
– Постановлением Правительства РФ № 1441 «Об утверждении Правил оказания платных образовательных услуг»;
– условиями договора об оказании платных образовательных услуг между ЦСИО и Слушателем.

Политика направлена на то, чтобы правила возврата были прозрачными, понятными и одинаковыми для всех.

1. Возврат средств до начала обучения

Если Слушатель отказывается от обучения до даты начала программы, ЦСИО возвращает оплаченные средства за вычетом фактически понесённых расходов, предусмотренных Постановлением № 1441.

К таким расходам относятся:

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

Если фактические расходы отсутствуют или минимальны, возврат может быть произведён в полном объёме.

2. Если Слушатель не приступил к занятиям и не уведомил ЦСИО

Если Слушатель был зачислен на программу, но не приступил к занятиям и не сообщил об отказе заранее:

ЦСИО вправе удержать все фактически понесённые расходы, возникшие до момента начала обучения;
возврат возможен, но его размер зависит от объёма затрат, понесённых центром для подготовки программы и резервирования места.

Чем позже сообщён отказ — тем выше объём понесённых расходов и тем меньше сумма возврата.

3. Возврат средств во время обучения

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

Порядок расчёта:

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

Такой подход соответствует ст. 32 Закона РФ «О защите прав потребителей» и п. 32 Правил № 1441.

4. Какие расходы вправе удерживать ЦСИО

В соответствии с Постановлением Правительства РФ № 1441 Исполнитель вправе удержать только фактически понесённые и документально подтверждённые расходы, связанные с исполнением договора об оказании платных образовательных услуг.

К таким расходам относятся:

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

ЦСИО не удерживает штрафы, пени и иные не обоснованные суммы — только реальные, подтверждённые затраты, связанные с подготовкой и оказанием образовательных услуг.

5. Возврат после окончания обучения

После завершения программы возврат возможен только в случаях, предусмотренных законодательством Российской Федерации и договором, в том числе:

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

Если обучение полностью оказано и Слушатель получил доступ ко всем материалам, посещал занятия или не заявил претензий в установленный договором срок (например, 14 календарных дней после окончания обучения), возврат не производится.

6. Порядок оформления возврата

Для оформления возврата Слушателю необходимо направить заявление на электронный адрес ЦСИО: info@csio-dpo.ru

В заявлении указываются:

ФИО Слушателя;
название программы обучения;
дата и способ оплаты;
причина отказа (для корректного расчёта суммы возврата);
банковские реквизиты или данные карты для перечисления средств (если возможно по правилам платёжной системы).

ЦСИО рассматривает заявление в срок до 10 рабочих дней, рассчитывает сумму возврата с учётом фактически оказанных услуг и понесённых расходов и уведомляет Слушателя о результате.

Возврат осуществляется только плательщику и только безналичным способом.

7. Возврат по способам оплаты

7.1. Банковские карты, переводы, оплата по счёту, QR-код

При оплате банковской картой, банковским переводом, по счёту или через QR-код возврат осуществляется на ту же карту или счёт, с которых была произведена оплата. Срок зачисления средств зависит от банка и обычно составляет от 5 до 30 календарных дней после проведения операции возврата.

7.2. Яндекс Pay, Сплит/долями, рассрочки банков

Если оплата была произведена через платёжные сервисы (Яндекс Pay, сервисы Сплит/долями, рассрочки банков и другие платформы), возврат осуществляется в соответствии с правилами соответствующей платёжной системы:

сервисы Сплит/долями, как правило, отменяют будущие списания и возвращают уже уплаченные доли согласно своим условиям;
банки по программам рассрочки уменьшают задолженность Слушателя или пересматривают график платежей;
сроки и порядок возврата определяются правилами платёжной системы или банка.

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

8. Когда возврат не производится

Возврат денежных средств, как правило, не осуществляется, если:

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

Учебные аудитории

Стоимость обучения

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

Формат обучения

Дистанционно

Количество ак. часов 2

Продолжительность 1 занятие

Стоимость (руб.) Бесплатно

Формат обучения Группа от 5 чел

Количество ак. часов

Продолжительность

1 занятие

Стоимость (руб.) Бесплатно

Верните 13% за обучение

Часть стоимости курса можно вернуть через налоговый вычет — разберём, как это работает и кто может получить

Учитесь на лучших условиях

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

Карта москвича —

ваш ключ к выгоде

С картой москвича учиться в ЦСИО ещё удобнее: скидки и льготы действуют на многие программы. Развивайтесь и экономьте одновременно

Получить запись вебинара

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

Даю согласие на обработку персональных данных

Соглашаюсь с политикой конфиденциальности

Ваша заявка принята

Запись направлена вам на почту

Преподаватели

Мельников Матвей
Александрович

Должность: Преподаватель цифрового дизайна и UX/UI

Квалификация: Высшее образование — Цифровой дизайн

О преподавателе: Работает в сфере цифрового дизайна, помогая превращать идеи в понятные и удобные интерфейсы. Специализируется на UX/UI и веб-дизайне, проектировании пользовательских сценариев и создании визуальных решений для цифровых продуктов. Участвует в полном цикле разработки — от анализа задачи и прототипирования до подготовки макетов для передачи в разработку. В работе сочетает системный подход, понимание бизнес-целей и внимание к визуальной логике интерфейсов. На занятиях делает акцент на практической работе, современных инструментах и формировании навыков, которые позволяют создавать востребованные цифровые решения и уверенно развиваться в профессии.

Получить консультацию

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

Есть промокод?

Даю согласие на обработку персональных данных

Соглашаюсь с политикой конфиденциальности

Ваша заявка принята

Наш методист скоро с вами свяжется!

Советуем пройти с этим курсом

Midjourney, Runway и Co: создаём визуал без дизайнера

Общеобразовательный курс

Продолжительность:3 недели

Количество часов:42

Курс «Midjourney, Runway и Co: создаём визуал без дизайнера» показывает, как с помощью ИИ создавать яркие и профессиональные визуалы без сложных программ. Вы научитесь формулировать точные промты, управлять стилем, цветом и композицией, генерировать изображения, анимации и видео, а затем дорабатывать их в популярных сервисах. Обучение основано на практике: вы создаёте визуалы прямо на занятиях, пробуете разные инструменты и видите, как меняется результат от ваших решений. Курс помогает быстро освоить современные нейросети, повысить качество контента и научиться создавать визуалы для проектов, маркетинга и социальных сетей в разы быстрее.

Веб-разработка с использованием HTML, CSS, JavaScript

Повышение квалификации

Продолжительность:10 недель

Количество часов:160

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

Бесплатно

Введение в дизайн: графический и веб-дизайн, различия направлений и первые шаги в профессии

Вебинар

Продолжительность:1 день

Количество часов:2

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

Популярно

Твой первый шаг в мир дизайна

Интенсив

Продолжительность:1 неделя

Количество часов:8

Этот интенсив помогает подросткам сделать первый уверенный шаг в мир дизайна: попробовать современные графические инструменты, научиться создавать визуальный контент и понять, как рождаются креативные идеи. За три насыщенных дня школьники работают как настоящие дизайнеры — создают посты, иллюстрации, обложки, мемы, пробуют ИИ-инструменты и собирают своё первое портфолио. Занятия проходят в формате живой практики с наставниками студии Digitum, поэтому участники сразу видят результат и понимают, что дизайн — это не про «красиво», а про смысл, вкус и творческую свободу.

Основы веб-дизайна

Общеобразовательный курс

Продолжительность:4 недели

Количество часов:72

Курс по основам веб-дизайна помогает понять, как создаются современные интерфейсы, и научиться превращать идеи в понятные, аккуратные и эстетичные веб-страницы. Вы освоите базовые принципы композиции, цвета и типографики, разберётесь в логике UX/UI, научитесь работать в Figma и создавать прототипы, а также поймёте, как устроена простая адаптивная верстка. Обучение построено на практике: анализ сайтов, создание макетов, работа с графикой и последовательное проектирование интерфейсов. Курс формирует уверенность в работе с визуалом и помогает развить креативность, внимание к деталям и умение создавать удобные цифровые решения.

Графический дизайн: создание профессиональных макетов

Повышение квалификации

Продолжительность:5 недель

Количество часов:81

Курс помогает быстро войти в профессию графического дизайнера и научиться создавать визуальные решения, соответствующие требованиям индустрии. Слушатели осваивают композицию, цвет, типографику, работу в Photoshop и Illustrator, учатся разрабатывать макеты для полиграфии и digital-среды и готовить их к печати. Обучение построено на практике: каждый модуль даёт конкретный навык, который сразу применяется в собственных проектах. Программа подойдёт тем, кто хочет уверенно работать с графикой, формировать фирменный стиль, развить художественное мышление и выйти на профессиональный уровень в сфере дизайна.

Auto Layout в Figma: создание адаптивных карточек для интерфейсов

Auto Layout в Figma: как создавать гибкие и адаптивные элементы интерфейса

Что вы разберёте на вебинаре по Auto Layout в Figma

Где пригодятся навыки работы с Auto Layout в Figma

Как проходит вебинар по Auto Layout в Figma

Кому подойдет вебинар по Auto Layout в Figma

Рассрочка от Т-Банка

Оплата обучения через Яндекс Pay

Оплата обучения через сервис «Долями»

Оплата обучения через сервис «Подели»

Оплата обучения по QR-коду (СБП)

Банковской картой

Оплата обучения через сервис «Сплит»

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

1. Возврат средств до начала обучения

2. Если Слушатель не приступил к занятиям и не уведомил ЦСИО

3. Возврат средств во время обучения

4. Какие расходы вправе удерживать ЦСИО

5. Возврат после окончания обучения

6. Порядок оформления возврата

7. Возврат по способам оплаты

7.1. Банковские карты, переводы, оплата по счёту, QR-код

7.2. Яндекс Pay, Сплит/долями, рассрочки банков

8. Когда возврат не производится

Получить запись вебинара