Видеоурок

Софья Филиппова

Время чтения 6 минут

1. Старт работы в Figma

Figma работает прямо в браузере.
После регистрации на figma.com вы создаёте новый дизайн-файл и попадаете в рабочее пространство.

С этого момента важно понимать: весь дизайн будет строиться внутри фреймов — это основа любого экрана.

2. Базовые горячие клавиши

Несколько простых сочетаний сильно ускоряют работу:

• Alt — показывает отступы между элементами
• Shift — перемещение по 10 px
• Ctrl + колесо — масштабирование

На практике именно скорость навигации делает работу комфортной, а не “сложные функции”.

3. Как устроен интерфейс

Figma состоит из трёх ключевых зон:

• слева — слои (структура проекта);
• по центру — рабочее поле;
• справа — настройки выбранного элемента.

Порядок слоёв влияет на то, что видно на экране, поэтому организация здесь критична с самого начала.

4. Фрейм и сетка

Любой сайт начинается с фрейма (F).

Дальше добавляется сетка:

• 12 колонок;
• боковые отступы около 100 px;
• промежутки между колонками около 20 px.

Сетка — это не формальность, а способ не «развалить» композицию и сохранить структуру.

5. Автолейауты: основа современного дизайна

Автолейаут (Shift + A) — ключевой инструмент.

Он позволяет:

• автоматически выравнивать элементы;
• подстраивать блок под контент;
• избегать ручной корректировки размеров.

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

6. Работа с изображениями

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

Чтобы текст был читаемым, используется затемнение:

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

Это простой, но важный приём для любого сайта.

7. Блоки: слайдеры и адаптив

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

Адаптивные блоки (например, преимущества):

• строятся на автолейаутах;
• легко расширяются;
• сохраняют единые отступы.

Это помогает не «ломать» дизайн при изменении контента.

8. Плагины и нейросети

Современный процесс дизайна почти всегда включает инструменты:

• Midjourney — генерация изображений;
• Lucide — иконки;
• Flex — дополнительные элементы (например, флаги).

Важно учитывать: некоторые ресурсы требуют указания авторства.

9. Формы и UI-элементы

Формы заявки строятся так же, как и остальные блоки — через автолейауты.

Это позволяет:

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

Для тех, кто хочет участвовать в создании дизайн-библиотеки лично!