Scott
Начать работу в Figma проще с небольшого задания: собрать карточку, сделать кнопку компонентом и связать два экрана. Так вы познакомитесь с основными инструментами и сразу увидите, как они работают вместе.
В этом руководстве создадим экран списка и экран деталей. Сначала разберём фреймы и слои, затем добавим Auto Layout, компонент и переход.
1. Холст, фреймы и слои
Создайте аккаунт на figma.com и откройте новый файл дизайна. Назовите его по задаче, например «Список заказов», чтобы позже легко найти учебный проект.
Как устроен файл
В центре редактора расположен холст. Нажмите F, чтобы создать фрейм, затем выберите готовый размер на правой панели или задайте свой. Фрейм служит областью для экрана приложения, страницы сайта или другого макета.
Панель слоёв показывает структуру файла: фреймы, группы, текст и другие объекты. Называйте важные слои по назначению и проверяйте вложенность после перетаскивания.
Через раздел ресурсов можно добавлять доступные компоненты. Страницы внутри файла помогают разделять задачи, например рабочие экраны и библиотеку элементов.
Основные свойства объектов
Добавьте прямоугольник для карточки, текст для названия и ещё один прямоугольник для кнопки. Выделяйте объект, чтобы менять его свойства на панели Design.
Настройте размеры, положение и скругления. Для согласованного расположения используйте направляющие и сетки; число колонок выбирайте по содержанию экрана, а не по универсальному шаблону.
Изображение можно поместить в заливку объекта. Выберите подходящий режим отображения и проверьте кадрирование: важная часть фотографии должна оставаться видимой.
Обводка задаёт контур, а эффекты — например, тень или размытие. Добавляйте их по задаче: граница может отделять поле ввода, а тень — показывать слой поверх содержимого.
2. Компоненты и прототип
Когда основные объекты готовы, задайте правила для повторяющихся элементов и покажите переход к следующему экрану.
Автолейаут (Auto Layout)
Автолейаут управляет расположением элементов внутри фрейма. Для кнопки он помогает сохранить внутренние отступы, когда меняется длина надписи.
Выделите текст кнопки и нажмите Shift + A. Задайте внутренние отступы и размер по содержимому, затем замените надпись более длинной. Если нужен значок, добавьте его в тот же контейнер.
Компоненты и экземпляры
Превратите готовую кнопку в компонент через команду создания компонента. Размещайте его экземпляры на других экранах, чтобы повторять общую структуру.
Изменения основного компонента отражаются в связанных экземплярах с учётом локальных переопределений. Для разных размеров и состояний подготовьте варианты, а не независимые копии кнопки.
Переходы между экранами
Создайте второй фрейм с деталями заказа. Во вкладке Prototype свяжите действие на карточке с этим экраном и выберите нужный переход.
Добавьте возврат к списку и откройте предпросмотр. Нажмите на элементы самостоятельно: так проще заметить пропущенную связь или неверную цель перехода.
Предпросмотр
Запустите прототип через кнопку воспроизведения. Проверьте начало сценария, переход к деталям и возврат. Для мобильного проекта посмотрите результат на целевом устройстве.
Импорт и экспорт
Импортируйте поддерживаемые изображения и файлы через доступные команды редактора. Для экспорта выбранного объекта задайте формат, например PNG, JPG или SVG, и проверьте итоговый файл.
Доступ и комментарии
Через Share пригласите коллегу или скопируйте ссылку. Выберите права просмотра или редактирования. Замечания оставляйте рядом с нужным элементом, чтобы сохранялся контекст.
Ресурсы сообщества
В сообществе можно найти шаблоны и компоненты для изучения структуры макета. Перед использованием в рабочем проекте проверьте лицензию, шрифты и соответствие своей задаче.
3. Частые вопросы о начале работы
Нужно ли сначала изучить все инструменты?
Нет. Для первого экрана достаточно фреймов, фигур, текста и основных свойств. Компоненты и прототип добавляйте, когда они помогают решить текущую задачу.
Как проверить, что я понял настройки?
Измените текст, ширину карточки и количество элементов. Если макет ведёт себя неожиданно, проверьте размер контейнера, настройки дочерних слоёв и вложенность.
Что показать разработчику?
Передайте выбранную версию макета, состояния, переходы и пояснения к правилам. Список размеров и цветов не заменяет описание поведения формы или ошибки.
4. Как продолжить проект в Pixso
Сохраните копию исходного файла, импортируйте её в Pixso и сравните шрифты, компоненты и переходы. Для командного проекта заранее обсудите роли и выберите подходящие тарифы Pixso.
Закрепите навык на своём экране
Повторите тот же процесс для небольшой задачи из работы: карточки товара, профиля или списка заявок. Сохраните исходный вариант, добавьте одно состояние ошибки и попросите коллегу пройти прототип.
