Figma 101 – Руководство для начинающих

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

Графический дизайн-это прекрасная смесь создания искусства и создания коммерчески применимого визуального контента, который создает посыл или рассказывает историю. Профессия дизайнера требует комфорта работы с инструментами и знали все «за» и «против».

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

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

О фигме

Этот инструмент проектирования используется для редактирования векторной графики и создания прототипов. Хотя у него есть автономные функции на базе macOS и Windows, инструмент в основном находится в сети. Он также имеет сопутствующие приложения (называемые Figma Mirror) для iOS и Android соответственно для просмотра прототипов Figma на мобильных устройствах.

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

Первая итерация инструмента дебютировала 3 декабря 2015 года в качестве программы предварительного просмотра только по приглашению, а первый публичный релиз вышел годом позже, 27 сентября 2016 года.

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

Начало работы – Все просто

Прежде чем мы начнем, вы должны знать, что цель этой статьи-упростить весь процесс проектирования, чей текущий опыт проектирования не велик.

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

Краткое введение – основы Figma

Как уже говорилось ранее, Figma-это инструмент векторного проектирования, позволяющий дизайнерам разрабатывать проекты в режиме реального времени. Его цены основаны на подписке с бесплатным планом с ограниченными функциями, что означает, что вам в конечном итоге потребуется обновить, если вы ищете полный опыт.

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

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

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

В качестве бонуса те, кто предпочитает Linux, также могут воспользоваться преимуществами Figma в системах на базе Unix.

Основные характеристики

Что выделяет Figma среди своих многочисленных признанных конкурентов? Давайте выясним.

Рамки и сетки компоновки

(Frames & Layout Grids)

Выбор предпочтительного размера фрэйма (Frame) должен быть первым шагом в каждом проекте. Он определяет, как элемент пользовательского интерфейса будет масштабироваться во всем дизайне. Вы можете получить доступ к кадрам либо с верхней панели, либо просто нажав “F” на клавиатуре в качестве ярлыка.

Можете просто пропустить и начать проектирование, но при этом вы упускаете такие тонкости, как привязка пикселей и пиксельная сетка (Layout grid). Попробуйте разные компоновки сеток, они сильно облегчат вашу работу в Figma.

Еще одна вещь, которую мы должны упомянуть, — используйте сетки в самих фрэймах, для ускорение процесса проектирования.

Библиотеки цвета

Можно с уверенностью сказать, что Figma, максимально упрощает весь процесс работы с цветом. Используете настройку цвета в дизайн-проекте, инструмент автоматически сохранит ее в библиотеку, доступ к которой вы можете получить в опции “Цвет документа” (Fill) в меню, где все цветовые профили сохранены и готовы к повторному использованию.

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

Ограничения

Выше мы уже коснулись функций мобильного просмотра Figma (Figma Mirror), стоит отметить, что функция ограничений также позволяет переключаться между веб-и мобильным просмотром. Это может помочь добиться лучшей адаптивности дизайна, позволяя настраивать свой проект для каждого соответствующего разрешения экрана и достижения наилучшего результата в обоих случаях.

Работа команде в режиме реального времени

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

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

Уведомления и комментарии

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

Создание прототипов

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

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

Плюсы и минусы

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

Плюсы

• Экономит место – поскольку в основном разработка происходит онлайн, не нужно беспокоиться о месте для хранения на вашем компьютере. Figma хранит все работы в облаке, что означает, что вы можете получить к ним доступ в любом месте и в любое время, пока есть подключение к Интернету. Это также означает, что вам не нужно удалять или копировать старые проекты на другие носители. Легко можно получить доступ к старым файлам и при необходимости внести изменения за считанные минуты.
• Упрощенный и быстрый рабочий процесс – Благодаря многочисленным шаблонам, которые Figma предлагает (такие как диаграммы, story maps, блок-схемы, шаблоны и готовые wireframes), ускорят рабочий процесс. Просто нужно выбрать один из готовых шаблонов, и можно начинать разрабатывать в соответствии с вашими потребностями.
• Качество в реальном времени — Без сомнения, это одна из лучших функций Figma, особенно для тех, кто привык работать с инструментами, которые не предлагают эту опцию. С Figma вам не нужно возиться с отправкой каждой небольшой настройки своим клиентам или коллегам. Вы можете легко работать над одним и тем же проектом одновременно и вносить изменения по ходу работы. Как и в случае с документами Google, вы можете оставлять комментарии и сообщать своим коллегам, нужно ли им что-то изменить или просто отлично справляются с работой. Вы можете редактировать все одновременно, но также можете отключить множественное редактирование. Кроме того, вы можете попросить своего копирайтера создавать контент для проекта во время работы над ним, благодаря функциям копирайтинга. Функция реального времени совместима в браузерах с Mac, Linux и Windows, поэтому, если вы и ваши коллеги предпочитаете разные операционные системы, вы можете работать вместе без проблем.

Минусы

• Работа в режиме онлайн — могут возникнуть неудобства так как нужно быть всегда быть подключенным к Интернету. При возникновении проблем с подключением, вся работа над проектом может быстро превратиться в хаос.
• Проблемы с обменом файлами – Всегда важно знать, кто последним редактировал и какие последние изменения были внесены. Да, в инструменте есть функция контроля версий, однако она в основном изменит всю версию, в то время как вы хотели вернуть только несколько небольших элементов.
• Подключение к облаку– Когда ваши проекты хранятся в облаке, а у вас нет подключения к Интернету… Ну, вы поняли…

Подведем итоги

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

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

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

Figma 101 – Руководство для начинающих «2»