Как работать в Figma: базовый гайд для новичка

Figma давно стала стандартом в дизайне интерфейсов, и осваивать её проще, чем кажется на старте. Я собрал понятный маршрут для новичка: от первого входа в аккаунт до готового кликабельного прототипа. Без воды, по шагам, с разбором мест, где обычно застревают.

Что умеет Figma и почему с неё удобно начинать

Figma работает прямо в браузере. Вам не нужно ничего скачивать и настраивать: открыли ссылку, вошли в аккаунт и уже рисуете макет. Тот же файл откроется на Windows, на Mac и даже на слабом ноутбуке, потому что вся тяжёлая работа идёт на серверах, а не на вашем железе.

Вторая причина любить Figma, это совместная работа. Над одним макетом одновременно сидят дизайнер, редактор и заказчик, каждый видит курсоры остальных, а правки появляются мгновенно. Знакомая боль с папкой «Финал_финал_2» уходит: версия всегда одна, живая, актуальная.

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

Регистрация и первый вход

Зайдите на сайт Figma и заведите аккаунт через почту или через Google. После входа вы попадёте в рабочее пространство, где хранятся все ваши файлы и проекты. Нажмите кнопку создания нового дизайн файла, и перед вами откроется чистый холст.

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

Разбираемся в интерфейсе

Первый экран пугает только на вид. Разложу его на три зоны, и дальше всё встанет на места.

Панель слоёв слева

Слева живёт список всех объектов на странице. Каждый прямоугольник, текст и картинка попадают сюда отдельной строкой. Приучите себя переименовывать слои сразу: через неделю «Rectangle 47» станет для вас загадкой, тогда как «Кнопка оплаты» сразу всё объяснит. Тут же переключаются страницы внутри файла. Удобно держать логотипы на одной, экраны приложения на другой.

Холст по центру

Центральная область бесконечная. Масштаб крутится колесом мыши с зажатым Ctrl, а пробел с зажатой кнопкой таскает холст. Работа почти всегда идёт внутри фрейма. Фрейм, это рамка будущего экрана: телефон, страница сайта, карточка товара. Нажали клавишу F, выбрали справа нужный размер устройства и получили аккуратную заготовку с правильными пропорциями.

Правая панель свойств

Справа собраны все параметры выделенного объекта: размеры, цвет заливки, обводка, тени, скругления углов, прозрачность. Выделили кнопку, поменяли радиус, задали цвет из палитры. Тут же настраивается автоматическая раскладка Auto Layout. Про неё скажу отдельно, потому что она меняет скорость работы в разы.

Собираем первый макет

Возьмём простую задачу: экран входа в приложение. По шагам это выглядит так.

1. Создайте фрейм размером с телефон. Клавиша F, справа выбираете модель устройства.
2. Залейте фон. Выделите фрейм и задайте цвет заливки в правой панели.
3. Добавьте поля ввода. Рисуете прямоугольник клавишей R, скругляете углы, дублируете сочетанием Ctrl плюс D для второго поля.
4. Впишите текст. Клавиша T, кликнули по холсту, набрали «Логин» и «Пароль», подобрали шрифт и размер справа.
5. Нарисуйте кнопку. Прямоугольник, скругление, текст поверх, цвет поярче.
6. Выровняйте всё. Выделите объекты и прижмите их по центру кнопками выравнивания вверху правой панели.

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

Компоненты и стили экономят часы

Компонент, это элемент, который вы рисуете один раз и переиспользуете по всему макету. Сделали кнопку, щёлкнули правой кнопкой мыши, выбрали «Create component». Теперь у вас мастер копия. Каждая вставленная копия называется экземпляром и наследует вид оригинала.

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

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

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

Auto Layout: макет, который сам подстраивается

Auto Layout, самая недооценённая функция у новичков. Выделяете группу объектов, жмёте Shift плюс A, и Figma начинает держать между ними ровные отступы автоматически. Добавили пункт в меню, остальные раздвинулись сами. Удлинили надпись на кнопке, кнопка растянулась под неё.

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

Сетки и отступы держат макет в порядке

Аккуратный макет отличается от любительского ровными отступами и выравниванием. Figma помогает держать порядок сетками. Выделите фрейм, в правой панели найдите блок Layout Grid и включите колоночную сетку. Появятся направляющие, по которым удобно раскладывать блоки.

Заведите привычку работать с шагом в восемь пикселей: отступы, высота кнопок и полей кратны восьми. Глаз цепляется за такую ритмичность, интерфейс сразу смотрится собранным. Этим негласным стандартом пользуются дизайнеры по всему миру.

Прототип: оживляем макет

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

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

Совместная работа без хаоса

Кнопка «Share» в правом верхнем углу открывает доступ к файлу. Даёте ссылку коллеге, выбираете уровень прав: только смотреть или ещё и редактировать. Заказчик оставляет комментарии прямо на макете, тыкает в кнопку и пишет «сделайте её крупнее». Разработчик открывает вкладку с параметрами и забирает готовые размеры, цвета и отступы, ничего не переспрашивая.

Для распределённой команды это спасение. Люди из разных городов работают над одним файлом так, будто сидят за соседними столами.

История версий и автосохранение

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

Плагины, которые ставят почти все

Плагины расширяют Figma под конкретные задачи. Ставятся они из встроенного каталога за пару секунд. Вот с чего обычно начинают:

• Unsplash подтягивает бесплатные фотографии прямо в макет, не выходя из редактора.
• Iconify даёт доступ к огромной библиотеке иконок в один клик.
• Content Reel заполняет макет реалистичными именами, аватарами и текстом вместо унылого «Lorem ipsum».
• Autoflow рисует стрелки между экранами, когда нужно показать логику переходов.

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

Ошибки, на которых спотыкаются новички

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

Вторая, бардак в слоях. Безымянные «Frame 12» и «Group 8» вперемешку, ничего не найти. Наведите порядок сразу: понятные имена, группировка по смыслу, отдельные страницы под разные части проекта.

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

Четвёртая, привычка двигать всё пикселями вручную вместо Auto Layout и сеток. Так медленно, и макет разваливается при первом же изменении.

Как быстрее выйти на уверенный уровень

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

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

Если хочется системы и обратной связи от практикующих дизайнеров, а разрозненные уроки уже надоели, есть смысл пойти на структурный курс. Там дают порядок действий, живые проекты в портфолио и разбор ваших работ. Как вариант, курс по Figma в OnSkills: там всё разложено по шагам, с практикой и обратной связью.

Частые вопросы

Figma правда бесплатная?

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

Нужен ли мощный компьютер?

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

Обязательно знать английский?

Интерфейс на английском, но слов там немного и они простые: move, text, frame, share. За неделю практики вы запомните их не задумываясь. При желании язык интерфейса переключается через плагины локализации.

Чем Figma отличается от Photoshop?

Photoshop заточен под обработку фотографий и растровую графику, Figma под интерфейсы и векторные макеты. Для дизайна сайтов и приложений Figma удобнее: живые компоненты, прототипы, работа в команде. Фотографию в ней не отретушируешь, зато экран приложения соберёте в разы быстрее.

Можно ли работать офлайн?

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