Figma с нуля - Слои и ограничения | Веб дизайн. Урок 3

• Слои находятся в панели слева и могут быть масштабированы.  

• Типы слоев: фреймы, группы, компоненты, текстовые объекты, шейпы, изображения и анимированные GIF-файлы.  

• Иерархия слоев: объекты видны в порядке их расположения в панели слоев.  

• Объекты видны в порядке их расположения в иерархии слоев.  

• Перемещение объектов в иерархии может изменить их видимость.  

• Режим "сквозь объект" помогает понять, где находятся скрытые объекты.  

• Группы также имеют иерархию, и их объекты могут перекрывать друг друга.  

• Переименование слоев помогает организовать дизайн.  

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

• Перемещение слоев вверх и вниз в иерархии с помощью горячих клавиш.  

• Использование горячих клавиш для быстрого перемещения слоев в иерархии.  

• Выравнивание объектов относительно их родителей.  

• Привязки позволяют объектам сохранять позицию при изменении размеров фрейма.  

• Примеры привязок: левый верхний край, центр, правый нижний край.  

• Привязка позволяет сохранять позицию и масштабировать объект вместе с родительским фреймом.  

• Опция "лефт райт" сохраняет отступы и масштабирует объект пропорционально.  

• Изменение размера фрейма без привязки приводит к изменению только размера фрейма.  

• Изменение размера фрейма сохраняет отступы.  

• Привязка по вертикали и горизонтали позволяет объекту масштабироваться вместе с фреймом.  

• Опция "скел" сохраняет пропорции объекта при масштабировании.  

• "Лефт топ" сохраняет пропорции объекта, но может привести к изменению размера при масштабировании.  

• "Скел" сохраняет пропорции, но может привести к исчезновению объекта при сильном масштабировании.  

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

• Создание карточки-профиля с использованием плагинов.  

• Установка плагинов для работы с иконками и изображениями.  

• Использование плагинов для быстрого создания и настройки элементов интерфейса.  

• Добавление имени пользователя и подписи "онлайн".  

• Выравнивание текста и добавление отступов.  

• Использование горячих клавиш для ускорения работы.  

• Добавление всех элементов в группу для корректного выравнивания.  

• Настройка отступов и выравнивание слоев с помощью горячих клавиш.  

• Финальная проверка и корректировка элементов интерфейса.  

• Нажимаем Ctrl+J для добавления в группу.  

• Называем слои: текст, онлайн кетчер.  

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

• Создаем заготовку для прогресс бара.  

• Устанавливаем скругление и ширину 8 пикселей.  

• Дублируем слой, уменьшаем ширину и меняем цвет.  

• Добавляем слои в группу "прогресс бар" и в группу "карточка".  

• Подписываем текущий уровень пользователя.  

• Копируем и вставляем количество опыта.  

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

• Поджимаем карточку снизу.  

• Настраиваем пропорции и отступы.  

• Создаем группу "бот" для нижней части.  

• Закрепляем знания о слоях и ограничениях.  

• Увеличиваем карточку в ширине, чтобы элементы оставались по центру.  

• Используем привязку для корректного масштабирования.  

• Устанавливаем привязку для иконки и фона.  

• Привязываем текст и прогресс бар.  

• Проверяем корректность работы привязок.  

• Настраиваем привязку для серого слоя прогресс бара.  

• Заменяем привязку на скел для корректного масштабирования.  

• Проверяем работу всех привязок.  

• Карточка становится гибким элементом.  

• Урок завершен, в следующем уроке будут рассмотрены маски.