Scott
Освоение нового инструмента проектирования никогда не бывает легким для восприятия. Независимо от того, используете ли вы другой инструмент проектирования или, возможно, собираетесь использовать свой первый инструмент в жизни, вам понадобится подробное руководство. Figma - потрясающий инструмент, и его несложно использовать. Программа бесплатна для начала, работает как на Windows, так и на Mac и обладает потрясающей функцией совместной работы в режиме реального времени.
В этом руководстве вы соберете первый макет, познакомитесь с компонентами и свяжете экраны в прототип. Иллюстрации относятся к прежним версиям интерфейса; расположение команд сверяйте в своем аккаунте.
Часть 1. Начало работы и ознакомление с интерфейсом
Прежде всего, перейдите на страницу figma.com и зарегистрируйтесь — это бесплатно! Затем перейдите в раздел черновики и нажмите на новый файл, чтобы мы могли ознакомиться с панелью мониторинга
Привыкание к пользовательскому интерфейсу
В центре экрана вы найдете чистый холст для работы. Здесь вы можете вставлять рамки, поскольку они являются наиболее важной особенностью Figma. Вы можете создать новый кадр, нажав клавишу F и выбрав все варианты кадра на правой боковой панели - от экрана iPhone до макета публикации в социальной сети.
С левой стороны вы можете найти вкладку "Слои". Там, когда вы работаете с файлом Figma, вы можете просматривать различные слои, рамки и элементы, которые являются частью вашего холста. Вы можете изменять порядок каждого слоя, просто перетаскивая его. Каждая рамка, компонент и другие элементы пользовательского интерфейса, помимо текста, обозначены мини-пиктограммами.
Помимо слоев, вы можете найти вкладку "Ресурсы", на которой хранятся все ваши компоненты и к которым предоставляется легкий доступ, а также страницы, на которых вы можете настроить различные разделы вашего файла дизайна.
Оперирование основами
Используйте инструменты фигур для прямоугольников, линий и других элементов. Для импорта и экспорта откройте меню файла и проверьте поддерживаемый формат; редактор не поддерживает произвольный тип файла.
На правой боковой панели на вкладке "Дизайн" вы можете просмотреть другие детали, такие как координаты и размер вашего кадра. Вы даже можете задать радиус для независимых кадров и объектов. Вы найдете таблицу разметки, в которой можно использовать стандартную 8-точечную сетку или наиболее часто используемую 12-столбцовую сетку. Вы можете перейти к свойствам таблицы и настроить их в соответствии с вашими потребностями.
Вы также можете добавлять изображения и помещать их в рамку или объект. Чтобы оптимизировать их, перейдите в раздел "Заливка" на правой боковой панели и отрегулируйте видимость изображения. Кроме того, вы можете установить ограничения на то, где вы хотите закрепить свои изображения в определенной рамке или объекте
Кроме того, вы можете добавлять толстые или тонкие штрихи к своим изображениям или фигурам. Кроме того, вы можете добавлять такие эффекты, как отбрасываемая тень, внутренняя тень, размытие фона и т.д. Самое приятное в использовании этих функций то, что вы можете легко отключить их, нажав на значок глаза сбоку от каждого элемента, чтобы скрыть их видимость.
Часть 2. Изучение дополнительных функций на Figma
Теперь давайте рассмотрим другие функции, которые очень помогают оптимизировать рабочий процесс вашего дизайна:
Автоматическая компоновка
Это принципиально новая функция, позволяющая создавать рамки, содержимое которых увеличивается или уменьшается при изменении размера рамки. В результате это позволяет создавать адаптивный дизайн и значительно экономит ваше время.
Просто нажмите Shift + A, чтобы создать рамку автоматической компоновки вокруг нужного слоя. Вы можете использовать свойства автоматической компоновки Figma на правой боковой панели для оптимизации рамки автоматической компоновки.
Компоненты
Это элементы пользовательского интерфейса, которые можно повторно использовать в вашем файле дизайна, это еще одна полезная функция Figma, которая может сэкономить ваше время. Вы можете создать компонент, нажав Ctrl/Cmd + Alt + K. После этого вы заметите, что рамка или форма компонента преобразуется в фиолетовый значок компонента. В результате вы можете создавать экземпляры или копии вашего основного компонента в вашем файле разработки.
И хотите знать, что самое интересное? Все, что вам нужно сделать, это внести изменения в ваш основной компонент, и он автоматически перенесет эти изменения в ваши экземпляры. Как это удивительно!
Создание прототипов
На правой боковой панели вы можете просмотреть вкладку Прототип. Здесь вы можете добавлять и оптимизировать взаимодействие экранов пользовательского интерфейса, чтобы создать историю.
Свяжите экраны и настройте переходы в свойствах прототипа. Откройте прототип по ссылке в браузере или используйте актуальное мобильное приложение Figma и его возможности просмотра. Проверьте поведение на целевом устройстве.
Презентация
Вы можете нажать на значок воспроизведения в правом верхнем углу экрана, чтобы открыть экран презентации на новой вкладке. После того, как вы поработаете над прототипом, на нем будут отображены экраны пользовательского интерфейса и их взаимодействие.
Импорт и экспорт файлов
Вы можете импортировать различные файлы дизайна и изображения в свой файл дизайна Figma. Что касается экспорта ресурсов, вы можете экспортировать их в форматах SVG, JPG, ПНГ и т.д.
Совместное использование и совместная работа
Через кнопку «Поделиться» пригласите участников или скопируйте ссылку и проверьте права доступа. Замечания оставляйте в комментариях к элементам. Cursor chat — отдельная функция общения; предоставление доступа к файлу само по себе не создает чат.
Сообщество
Наконец, у нас есть сообщество Figma, где вы можете найти других дизайнеров и создателей, которые делятся своими работами и фреймворками, которые приносят пользу другим дизайнерам. Вы можете с удобством скопировать или импортировать их шаблоны дизайна в свой файл Figma. Кроме того, вы можете приобрести плагины для Figma, чтобы оптимизировать рабочий процесс и более эффективно использовать свое время.
Часть 3. Часто задаваемые вопросы по Figma
Вопрос 1. Легко ли освоить Figma?
Освоение зависит от опыта и задачи. Начните с одного экрана, повторите действия самостоятельно и проверьте, можете ли изменить текст, компоненты и переход без подсказок.
Вопрос 2. С чего начать изучение Figma?
Выберите короткое руководство и повторите пример самостоятельно. Затем измените содержимое и размер экрана, чтобы проверить понимание настроек. Справку и видео используйте для конкретного вопроса, который возник при работе.
Вопрос 3. Как сравнить Figma с инструментом Adobe?
Сначала назовите конкретный продукт Adobe и нужную задачу. Например, Photoshop используется для растровых материалов, а XD находится в режиме сопровождения. Совместное редактирование, форматы и доступ к лицензии сравнивают отдельно.
Часть 4. Альтернатива Figma: доступны бесплатные шаблоны!
Повторите учебный пример на одной странице: создайте компонент кнопки, свяжите два экрана и откройте прототип по ссылке. Для переноса в Pixso используйте копию исходного файла. Бесплатный тариф включает личные черновики и просмотр без ограничения числа зрителей, а также до 3 дизайн-файлов и 3 онлайн-досок для совместной работы. Для дополнительных файлов и функций сравните тарифы Pixso.
Вывод: Создавайте свои работы с легкостью…
Для проверки результата измените текст кнопки, добавьте состояние ошибки и попросите коллегу пройти прототип. Сохраните исходный файл и список вопросов, которые потребуется изучить дальше.
