урок 5 фигма

1.

2.

Сегодня вы познакомитесь с одним из самых интересных инструментов
в Figma, который называется Auto Layout («Авто макет»).
Представьте себе конструктор Lego. У вас есть основание (платформа) и
много разных деталей: кирпичики, окошки, колёсики. Когда вы соединяете
детали на основании, они становятся одной цельной конструкцией. Если
вы возьмёте это основание и переместите его, все детали послушно
поедут вместе с ним. Если вы решите добавить между двумя деталями
ещё одну, вам не придётся вручную раздвигать всю конструкцию – вы
просто вставите новую деталь

3.

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

4.

C Auto Layout элементы становятся частью умной, связанной системы. Они
автоматически выстраиваются в ряд (горизонтально или вертикально), между
ними сохраняется заданное вами расстояние. Если вы добавляете новый
элемент или меняете размер одного из них, вся остальная конструкция
автоматически подстраивается. Зачем это нужно?

5.

1 Экономия времени: Макеты собираются быстрее.
2 Аккуратность: Элементы всегда идеально выровнены.
3 Гибкость: Легко вносить изменения, не ломая всю композицию.
4 Основа для адаптивных сайтов. Адаптивный сайт — это сайт,
который «умеет подстраиваться» под разный размер экрана. Он
одинаково удобно и красиво выглядит на большом мониторе компьютера,
на планшете и на маленьком экране смартфона. Элементы на таком
сайте не разъезжаются, а меняют своё положение и размер так, чтобы их
Auto
Это читать
главный инструмент
для создания таких гибких, адаптивных конструкций в
былоLayout
удобно
и использовать.
Figma. С его помощью дизайнеры создают прототипы, которые могут растягиваться и
сжиматься, имитируя поведение реального сайта на разных устройствах.

6.

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

7.

Практика
https://top-academy.site/ua23g2ctlbumokovnhvbntivborm9j1h/

8.

Домашнее
задание

9.

Тема: Auto layout
Задание №1: Цель задания:
Создать красивый и аккуратный
список своих любимых фильмов
или книг, который автоматически
упорядочивается и меняет
размер благодаря инструменту
Auto Layout. Поделитесь
открытой ссылкой на ваш проект
и прикрепите ее в электронный
дневник Journal.