Содержание
Но я вас уверяю, через 2-3 дня работы вы будете хорошо в ней ориентироваться и без русской версии, потому что фигма достаточно интуитивная и удобная программа. Иногда маркетологу нужно создать прототип страницы или сайта для дизайнера, и Figma подходит для этой задачи. Разберем, как сделать прототип в редакторе на конкретном примере. Figma работает по принципу Google Docs и других подобных сервисов. Над любым проектом можно работать совместно с другими участниками. Можно дать права на редактирование или просто на просмотр.
Но можно сделать работу в редакторе ещё быстрее, автоматизировав часть рутинных задач. Если над проектом работает ещё кто-то помимо вас и вы внезапно замечаете недочёты в файле, виновника будет достаточно просто найти в истории изменений. В 2010 году, за несколько лет до Figma, на рынке появился Sketch. Этот редактор создали специально для проектирования интерфейсов, и в нем не было лишних инструментов и перегруженности. Установить его могли только пользователи macOS, но, тем не менее, Sketch очень быстро стал отраслевым трендом. Редактор создан в первую очередь для веб-дизайна.
И тем более придется потратить время на обучение, если вы не работали с такими инструментами. Для полноценной работы нужен постоянный доступ в интернет. Разработчики вносят дополнения, улучшают функционал редактора, добавляют новые возможности. Откроется окно, в котором вам предложат войти с помощью вашего аккаунта Google или использовать логин и пароль заранее созданного профиля. Если вы ещё не зарегистрированы, надо создать аккаунт.
Совсем недавно в Figma появилась новая функция — Sections (или секции). Это небольшое, но важное дополнение, которое позволяет дизайнерам эффективнее организовать совместную работу и привести в порядок свои файлы. Для начала работы вам необходимо зарегистрироваться на сайте Figmaи создать там свой профиль. Для этого нужно нажать на кнопку «Sign up» в правом верхнем углу сайта или на кнопку «Try Figma for free» под заголовком. Некоторые дизайнеры до сих пор продолжают работать в фотошопе, аргументируя это тем, что там есть все возможности для создания дизайна. Это действительно так, но когда речь заходит об удобстве, то фотошоп проигрывает по всем фронтам.
Чтобы создать фрейм выберите нужный пункт в меню или нажмите F на клавиатуре. Чтобы не изобретать велосипед, я буду использовать первый попавшийся сайт hudozhnik-online.ru и соберу прототип нескольких экранов главной страницы. Для этого нажмите на соответствующую иконку в меню или на клавишу C. Работать в Figma можно с ПК, телефона и любого другого устройства.
В Figma нет CMYK палитры и переключения размерности сетки на см/мм. Чтобы подготовить макет для баннера, листовки или ролл-апа для печати, нужно созданный в Figma файл загрузить в другую программу, что предназначена для полиграфии. В работе над большими проектами очень полезна функция Figma «Компоненты». Компоненты — это повторяющиеся UI элементы в проектах. Вы можете создавать компоненты из кнопок, иконок, полей, меню, заголовков, форм и блоков. Для веб-дизайнеров есть похожий инструмент — Figma.
Начало работы
«Послайсить» изображение полезно, если у вас большое полотно. Разбивая его на части, вы добиваетесь того, что части изображения начнут загружаться первыми, давая пользователю знать, что дальше будет что-то еще. Библиотека — это специальный файл, в котором хранятся готовые элементы, созданные другими дизайнерами. Здесь можно подключить уже привычные для вас инструменты — чтобы создать максимально «бесшовный» процесс проектирования. Например, существуют интеграции с Principle, Zeplin, Dribble, Slack. Благодаря векторам можно создавать сложные объекты намного быстрее, чем при рисовании с помощью традиционных инструментов.
Вам не нужно переживать за их сохранность и необходимость искать в “Новая папка 39” макет “Финал 22”. Абсолютно все изменения Figma автоматически сохраняются. А чтобы начать работу в редакторе, достаточно просто зайти в свой аккаунт. Больше не нужно пересылать макеты между дизайнерами, отправлять заказчику на утверждения, хранить на компьютере десятки версий. Достаточно отправить ссылку на проект, открыв доступ для редактирования, и другой дизайнер сможет вносить в него свои изменения.
Для открытия настроек конкретного продукта нажмите на фрейм, который нужно превратить в прототип. Илья Горбачев – Сбор сезонности в последней версии находится на вкладке “Парсинг” и вызывается кликом по иконке с графиком на черном фоне. Только он собирает общую частоту, поэтому лучше собирать данные с фраз (маркеров), которые не пересекаются в реальных запросах. Они закладывают основу для будущих улучшений, которые сделают нашу совместную работу еще эффективнее. Обозначения рабочих областей разных членов команды. Если ваш прототип связан с секцией, а не с фреймом, то при выходе Figma будет помнить последний экран, на котором вы были в этой секции.
Если вы не хотите давать пользователю возможность выходить из режима оверлея подобным образом, есть смысл создать свой вариант навигации. Например, на фрейме оверлея есть иконка Close— она и должна закрывать окно. Разберем на примере одного проекта, как использовать параметр Overlay и какие преимущества он дает. Overlay— выводит новый элемент поверх всех остальных элементов интерфейса.
Если раньше для создания стильных презентаций лидером у недизайнеров была Canva (теперь недоступна в РФ), то сейчас самое время обратиться к Figma. В Figma есть раздел «Комьюнити», в котором пользователи со всего мира выкладывают готовые иллюстрации, иконки, плагины, текстуры, шаблоны и т.д. В случае с презентацией вводите в строку поиска «Presentation Template» и выбирайте подходящий шаблон. Третье отличие — удобная организация рабочего процесса и возможность вносить быстрые изменения в дизайн.
Как работать в Figma: создаем макет электронной книги
Благодаря своей простоте и удобству, большинство дизайнеров делают свой выбор в пользу Figma. Обычно, чтобы выровнять элементы в макете, дизайнеры создают сетку. Но нам в прототипе не нужны точные расстояния, поэтому не будем усложнять себе жизнь. Тем более, Figma автоматически подсказывает, когда элемент находится посередине, подсвечивает расстояния между объектами и показывает их изменения. Я бы отнесла сюда интерфейс на английском языке, который может отпугнуть начинающих дизайнеров, и то, что возможности редактора заточены под веб-дизайн. Figma — основной инструмент многих веб-дизайнеров, поэтому этот редактор изучают почти на всех курсах по UX-дизайну.
Все файлы хранятся в облаке, и над ними можно работать вместе с коллегами в режиме реального времени. Оно позволяет синхронизировать изменения на разных устройствах, но каждым файлом может одновременно пользоваться только один человек, а не команда. Академия дизайн-профессий Pentaschool совместно с Комьюнити подготовила для вас подробный гайд по Figma, который будет состоять из 6 статей. А сегодня мы предлагаем познакомиться с Figma, сравнить ее с другими редакторами и разобраться, какие проекты вы сможете здесь создавать. Figma — это онлайн-редактор, работающий без предварительной установки.
Облачное хранение файлов
Smm-специалисты могут использовать многочисленные шаблоны для постов в соцсетях, чтобы создавать баннеры и др. Перед началом использования сервиса, важно узнать о его сильных и слабых сторонах. В этом разделе мы публикуем часто Figma для дизайнера задаваемые вопросы новичков, которые у них возникают, когда они только начинают знакомиться с этим замечательным редактором. После перехода по ссылке, вам нужно будет подтвердить скачивание файла-установщика программы.
- Благодаря этому в редакторе можно коллективно работать над макетами и открывать их по ссылке, без скачивания.
- Можно выбрать столько кадров и слоев, сколько хотите.
- В Figma можно создавать прототипы сайтов, векторные иллюстрации, кнопки, плашки и другие элементы интерфейсов.
- В этой статье я подробно познакомлю вас с Figma — что это за программа, как в ней работать, чем отличается figma от photoshop и многое другое.
- В этом случае придется менять их на каждой странице, а это долго и утомительно.
Фигма практически не задействует мощности вашего компьютера ― вы можете работать с огромным количеством холстов без потери скорости. Облачные технологии дают возможность совместного доступа к проекту. Если вам нужны макеты на компьютере, вы можете их скачать в расширении fig. Photoshop и Figma предназначены для решения разных задач. Photoshop больше подходит для работы над дизайном, а Figma — для создания макетов и прототипов. Чтобы предоставить доступ на редактирование файла, перенесите его в папку команды, зайдите в него и нажмите кнопку Share в верхнем левом углу.
Онлайн-курсы
Использовать большинство инструментов и плагинов без ограничений. Программу для iOS/Windows или мобильное приложение Figma Mirror можно скачать здесь. Жестких системных требований нет, важна только видеокарта компьютера. Подойдут Intel HD Graphics 4000, Nvidia 330m, ATI Radeon HD 4850 и более поздние. Павел Ярец, дизайнер с опытом более 15 лет, продюсер Digital media OKTAEDER, преподаватель курса по Figma от академии Pentaschool.
Файлы хранятся в облаке
Figma разрабатывалась как программа для дизайна интерфейса, поэтому во всех ее версиях есть специальные плагины. Они автоматизируют рутинные задачи и ускоряют работу верстальщиков. https://deveducation.com/ Приложение работает в многопользовательском режиме на любом устройстве. Для полноценной работы дизайнеру нужно стабильное интернет-соединение и любой браузер.
Он позволяет масштабировать любой кадр, его содержимое и все эффекты до любой заданной ширины или высоты. Можно выбрать столько кадров и слоев, сколько хотите. Доступно масштабирование по ширине, высоте или процентам.
Настройки аккаунта пользователя Get desktop app. Скачайте десктоп-клиент графического редактора в один клик. Кнопка выбора пользователя Отсюда же можно быстро перейти в Community. Это огромное сообщество пользователей редактора и просто его фанатов по всему миру. Пропадают изображения шрифтов и других элементов, если долгое время работать сразу с несколькими макетами. Даже если вы уже работали с векторными редакторами и сейчас, к примеру, переезжаете со Sketch или Illustrator.
Все очень быстро и наглядно – вам (или клиенту) нужно только перейти по ссылке. На практике функционал сервиса выходит далеко за рамки веб-дизайна. В Figma можно создавать посты и сторис для соцсетей, макеты для таргетированной рекламы, презентации, мудборды, баннеры, открытки, листовки и так далее. А сейчас расскажем о некоторых форматах подробнее. Раньше, когда не было альтернатив, дизайнеры работали в фотошопе и создавали макеты там. Сейчас, фотошоп — это пережиток прошлого в плане разработки интерфейсов.
Можно ввести данные самостоятельно в поле Design либо выбрать размер из готовых шаблонов. Редакторы могут схематично отрисовывать иллюстрации к статьям и передавать их в работу дизайнерам, а также создавать диаграммы и блок-схемы для управления редакцией. Скачать его можно на официальном сайте, в разделе Downloads.