Что такое Figma и как ей пользоваться

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

Например, вы закончили разработку 50 макетов в Photoshop, заказчик попросил вас поменять пункт меню в шапке и прислать все макеты на утверждение. Раньше приходилось проделывать это вручную. В Figma проблема решена: изменяете что-то одно — меняются стили всех элементов с этим стилем.

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

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

Очень похожи на артборды в Photoshop, но имеют большую гибкость в работе: они хорошо масштабируются и их с лёгкостью можно использовать в других фреймах. Для фреймов есть предустановленные размеры устройств: Phones, Tablet, Desktop, Watch, Paper, Social Media. Поэтому нет надобности держать их в голове и путаться в размерах.

Фрейм iPhone X и iPhone 8

Панель Grid Layout позволяет быстро создать любую сетку.

• для одного макета неограниченное количество сеток;
• сетки быстро и гибко настраиваются, фиксируются и растягиваются;
• при необходимости цвет сетки легко поменять.

Figma — онлайн-сервис, но есть и десктопная версия. Для работы в ней нужно авторизоваться и иметь постоянное интернет-подключение. Файлы сохраняются локально и при необходимости импортируются в браузерную версию.

Figma можно пользоваться бесплатно, с такими основными ограничениями:

• Максимум два редактора.
• Максимум три проекта.
• История версий хранится 30 дней.

Если вам станет тесно на бесплатном тарифе, переходите на Professional стоимостью 12 долларов в месяц или Organization — 45 долларов в месяц.

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

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

8 причин, чтобы полюбить Figma так же сильно, как мы

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

«Мы помним те времена, когда дизайн разрабатывался исключительно в фотошопе. Но вместе с тем, мы помним и боль, с которой сталкивались в процессе разработки интерфейсов. Фотошоп в какой-то степени ограничивал нас, но как-никак был достаточно гибким, чтобы быстро к нему привыкнуть и воплощать в нем гениальные идеи. С 2016 года часть нашей команды использует скетч, другая — не так давно, плотно подсела на фигму. У обеих программ есть ряд преимуществ, во многом они схожи, но одно можно сказать точно — они обе предназначены для прототипирования, это прописано в их ДНК :)», — делится впечатлениями наш тим-лид дизайнеров.

Легко не будет!
Скучно тоже! Авторский ТГ канал Романа Катеринчика. Узнавай инсайты из первых рук. Подписаться на ТГ канал

Интерфейс

1

Экосистема

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

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

2

Совместное редактирование

Google Docs отлично показали, что групповая работа над документами облегчает коммуникацию и ускоряет результат. С помощью Figm’ы дизайнеры, проектные менеджеры и клиенты могут одновременно комментировать, задавать вопросы и править макеты. Кроме того, вы можете ограничить статус для каждого участника, например read-only, не переживая, что кто-то нарушит гармонию в дизайне. Для совместной работы нужен только интернет и браузер.

В Sketch же можно комментировать только с помощью специального плагина.

3

Актуальность версий

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

4

Удобные инструменты

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

Первым тенденцию революции задал Illustrator, в котором появился удобный Pen Tool. Figma же подхватила и улучшила такую практику:

• удобное соединение точек и работа с шейпами;
• создание эффектов, например, тени, занимает считанные секунды

• настройки сетки всегда находятся на главном экране
• удобный pen tool
• направляющие, которые упрощают работу дизайнера

5

Шрифты

В Photoshop и Sketch при редактировании файлов шрифты «слетают», если на компьютере не установлены необходимые гарнитуры.

Figma решила и эту проблему — шрифты тянутся из Google Fonts либо автоматически подгружаются в проект.

6

Многозадачность

Если вам нужно работать одновременно с несколькими рабочими областями, вы наверняка жаловались на производительность Sketch или Photoshop. Figma же позволяет работать с более, чем десятью файлами и прекрасно себя чувствовать, поскольку производительность продукта на высоте.

7

Прототипирование мобайл-проектов

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

Figma полезна и для программистов — прямо в программе можно посмотреть информацию об объектах, которая нужна для кода:

Отличная функция — play button. С ее помощью дизайнеры могут “проиграть” приложение, тестируя последовательность и логику переходов так, будто приложение готово и загружено на смартфон.

8

Интеграция

Вы можете перенести свои проекты из Sketch без потерь шрифтов, кривых и изображений, а также интегрировать с Zeplin.

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

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

Впечатления команды Artjoker

«Мы понимаем, что полностью отказываться от использования фотошопа будет ошибочно. В скетче и фигме все еще нет тех возможностей для обработки фотографий, к которым мы так привыкли. Порой, мы скучаем по использованию масок с плавным градиентом, возможности вырезания объектов из изображений и даже детализированной цветокоррекции. Но важно так же понимать, что инструментарий веб-дизайнера не должен ограничиваться только одной программой. Их должно быть несколько и каждая с первоклассным набором преимуществ, которые открывают новые возможности и позволяют работать быстрее», — делится тим-лид дизайнером Artjoker.

Легко не будет!
Скучно тоже! Авторский ТГ канал Романа Катеринчика. Узнавай инсайты из первых рук. Подписаться на ТГ канал

Что такое Figma и для чего она нужна | GeekBrains

Возможности, преимущества и недостатки популярного графического редактора

https://d2xzmw6cctk25h.cloudfront.net/post/2419/og_image/24ddafa5a7faab4385b30fde564dcd9e.png

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

Она поможет разобраться, что такое Figma, что она умеет, кому она нужна и с чего начать новичку.

Что такое эта ваша Figma?

Figma — кросс-платформенный графический онлайн-редактор для совместной работы. Программа позволяет создавать wireframe, UI, прототипы, презентации и с лёгкостью передавать материалы в разработку. В онлайн-режиме можно наблюдать рабочий процесс, оставлять комментарии и обсуждать макет.

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

Что можно делать в Figma: базовые фичи

Многопользовательский режим

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

Теперь менеджер проекта вместо того, чтобы отвлекать дизайнера вопросами из разряда «как там макет», может посмотреть на процесс в прямом эфире. Конечно, если вы дадите ему ссылку на файл 😉 Разработчики также могут подсмотреть за работой дизайнера, понять, что их ждёт в скором будущем, и прикинуть предстоящий объём работ.

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

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

Файлы в облаке

Хранить файлы на диске сейчас неактуально — балом правят облачные сервисы. Figma — онлайн-редактор, поэтому результат вашей работы будет автоматически сохранён в её собственном облаке. Но возможность скачать файлы тоже есть. Для этого нужно в главном меню программы выбрать «Файл» и пункт «Сохранить как .fig».

Кросс-платформенность

Доступ к макетам есть с любого устройства — даже с iPad. Достаточно запустить браузер и выйти в интернет. А это, в свою очередь, значит, что больше не нужно постоянно экспортировать макеты с результатом работы из редактора в PNG и JPG. Достаточно отправить ссылку на файл с настроенным доступом, а получателю не обязательно иметь аккаунт в Figma.

Десктопное приложение тоже есть. Оно предусмотрено для MacOS и Windows.

Компоненты

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

История версий

Ещё одна полезная функция — история версий. Если над проектом работает ещё кто-то помимо вас и вы внезапно замечаете недочёты в файле, виновника будет достаточно просто найти в истории изменений.

Figma автоматически сохранит версию, если вы не изменяли макет в течение 30 минут. Можно сохранять версии вручную, задавать им названия и описания. Для удобства вы можете указывать, какие изменения были внесены. Так будет проще контролировать процесс.

Бесплатная версия запоминает изменения за последние 30 дней. Полная история доступна на всех платных тарифах.

Фреймы

В Figma есть стандартный набор фреймов с размерами популярных мобильных (включая Apple Watch) и десктопных устройств, распространённых бумажных форматов и фото для соцсетей. В общем, заготовки на все случаи жизни — вопрос «что можно делать в Figma» отпадает сам собой. 

У фреймов Figma есть особенности, которые обязательно стоит иметь в виду:

1. Фрейм может содержать другой фрейм. Это бывает порой очень удобно.
2. Если нужно растянуть фрейм, обязательно удерживайте нажатой клавишу Сmd (MacOS) или Ctrl (Windows), тогда все детали макета останутся на своих местах. В противном случае изображение станет непропорциональным.

Сетки

Как мы знаем, сетка в проектировании — главный помощник. На мой взгляд, работа с сеткой в Figma реализована максимально удобно:

• добавить её для фрейма легко;
• настроить можно очень быстро и просто;
• количество сеток для фрейма не ограничено.

Плагины

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

Они все доступны на сайте Figma, где вы можете подобрать нужный, как в магазине приложений. Также плагин можно выбрать на главном экране Figma. Если у вас открыт рабочий файл, в панели вкладок нажмите на иконку Figma, слева в меню выберите раздел Community (Сообщество), нажмите Explore и далее Plugins.

Десктопное приложение и Figma Mirror для смартфонов

У Figma есть десктопное приложение для Mac OS и Windows, а вот любителям Linux придётся довольствоваться браузерной версией. Ещё есть приложение для мобильных устройств — Figma Mirror. С его помощью можно проверять результат работы на самом устройстве, что очень удобно. Главное, чтобы компьютер и мобильный находились в одной Wi-Fi-сети. Скачать нужные приложения можно в разделе Downloads на сайте Figma.

Импорт Sketch-файлов

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

Стоимость

Для личного пользования вполне хватит бесплатных возможностей Figma. Можно спокойно делать проекты на фрилансе. Бесплатный аккаунт Figma называется Starter, и возможности у него такие:

• история изменений хранится 30 дней;
• можно завести и поддерживать не более трёх проектов;
• только два пользователя могут иметь права на редактирование.

Платный тариф называется Professional, в нём нет описанных выше ограничений. Вдобавок вы сможете делиться с пользователями библиотеками компонентов ваших проектов. При единовременной оплате годовой подписки каждый месяц вам обойдётся в 12 $. Если этот вариант вам неудобен, можете оплачивать сервис помесячно — по 15 $ за каждый месяц.

Третий тариф — Organization — предназначен для больших команд. Стоит он 45 $ в месяц, оплатить нужно сразу год.

Минусы Figma

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

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

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

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

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

Что можно делать в Figma?

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

Прототипирование

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

Чтобы создать прототип, вам необходимо:

1. Подготовить карту экранов в нужной вам последовательности.
2. В верхней части правого блока переключиться на вкладку Prototype.
3. Выбрать элемент интерфейса, для которого хотите настроить интерактивность.
4. Справа добавить и настроить действие.

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

Usability-тестирование

Когда прототип готов, вы можете протестировать решение на пользователях. Для этого нужно встретиться или связаться с респондентом и поделиться с ним ссылкой на интерактивный прототип.

Передача макетов разработчикам

Чтобы передать макеты разработчику, вам необходимо открыть ему доступ к файлу с правами на просмотр. В таком режиме программисту будут доступны CSS-стили элементов интерфейса. Если он делает мобильное приложение, то сможет посмотреть код для iOS или Android. Для определения размеров элементов и расстояний между ними есть направляющие.

Презентация

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

Кому нужна Figma

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

Figma Templates

Как мы видим, возможности Figma очень широки. Но мы осветили в этой статье далеко не всё. Есть очень полезный раздел, Figma Templates, где собраны шаблоны на разные случаи жизни — от карты пути пользователя до диаграммы Ганта. Для каждого предусмотрено описание и инструкция по применению.

С чего начать?

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

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

Тем не менее, в процессе работы могут возникать вопросы и сложности. Большинство ответов поможет найти официальный канал Figma на YouTube. Там собраны пошаговые уроки и другие полезные материалы по инструменту. Обязательно обращайтесь к нему во время работы.

Выводы

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

всё, что вам нужно знать — Дизайн на vc.ru

Это руководство предназначено для тех, кто только начинает работать с Figma.

12 292 просмотров

В последние годы мы много пользовались Sketch и до сих пор остаемся его большим поклонником. Однако когда дело доходит до совместной работы, появлялись мучительные трудности и приходилось искать альтернативы. Что бы мы ни использовали, они казалась намного менее удобными и вызвали дополнительные трудности, с прототипированием дела обстояли аналогично. Figma пообещала облегчить нам жизнь и сдержала свое обещание.

Преимущества:

• Она бесплатна (до двух пользователей и трёх проектов на аккаунт)
• Работает как на Mac, так и на ПК (Sketch же только на Mac)
  
• Командная работа в режиме реального времени
  
• Вы можете импортировать файлы Sketch (но будьте осторожны, вы не сможете экспортировать в Sketch!)
  
• Интегрированная передача проектов разработчикам🥳
  
• Библиотека Fantastic Team/Дизайн-системы
  
• Комплексное качественное прототипирование
  

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

1. Начало пути

1.1 Заполучите Figma

Зайдите на figma.com, зарегистрируйтесь и следуйте инструкциям. Через пару минут все будет готово!

Вы могли заметить, что Figma позволяет создавать команды и проекты, о которых я расскажу позже, а пока просто создайте новый файл (из меню или с помощью cmd + N).

В отличие от Sketch, файлы Figma хранятся не на Вашем компьютере, а в облаке. Вы можете получить доступ ко всем проектам через браузер в любое время и в любом месте. Существует и отдельное приложение для Mac и PC. Я рекомендую использовать именно их, но это вовсе не обязательно.

Недостатки: вам все так же нужен Интернет. Однако вы можете заранее загрузить файл в приложение, чтобы работать в автономном режиме.

1.2 Импорт старых файлов из Sketch

Figma позволяет быстро и точно импортировать файлы Sketch. Просто перетащите файл Sketch на холст Figma!

Также вы можете копировать отдельные элементы из Sketch, щелкнув по ним правой кнопкой мыши и скопировав их как SVG!

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

2. Разработка в Figma

2.1 Настройка новых фреймов (артбордов)

Если раньше вы использовали Sketch, вам будет гораздо легче освоиться. Нажмите A или F, чтобы увидеть все параметры фрейма на панели свойств справа и выберите размер или же просто нарисуйте свой собственный фрейм. Как и в Sketch, вы можете работать с 1x (что означает фактический размер пикселя, поскольку при изменении размера нет потери качества). Вы по-прежнему можете экспортировать ассеты любого размера, которые могут вам понадобиться.

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

2.2 Сетки и макеты

Для мобильных устройств можно использовать стандартную сетку из 8 пунктов. Для веба это не столько интервалы, сколько сетки макета. Вы можете начать с популярной 12-колоночной сетки, так будет легче. Есть и более сложный и современный вариант — настраиваемая CSS сетка. Лучше всего заранее обговорить все со своим разработчиком и договориться о том, какую из сеток вы будете использовать.

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

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

☝Совет: вы можете переключать видимость с помощью комбинации ctrl + G.

2.3 Слои и группы

Как и в Sketch, в левой части экрана вы найдете панель слоев.

• Layers → каждый новый элемент, который вы добавляете, автоматически создает слой. Вы можете перемещать слои просто перетаскивая их.
• Group layers → Обязательно сгруппируйте слои (выберите слои и нажмите cmd + G ), чтобы ваш файл был организован и чист. Это также поможет быстро перемещать и копировать группы между фреймами. Чтобы выбрать элемент, нажмите cmd и щелкните этот элемент. Никогда не забывайте группировать слои!
• Pages → Вы можете настроить различные разделы или области вашего дизайна. Нет никаких правил касаемо их использования. Можно создать отдельные страницы для беспорядочного мозгового штурма(какого-нибудь черновика), макетов и финальной версии.
• Assets → Здесь хранятся ваши компоненты, также в этом разделе вы найдете библиотеку.
• Nested Frames → Это пригодится для структурирования и создания прототипов. 2.4 Векторные фигуры Figma использует так называемые векторные сети, позволяющие создавать сложные формы!

2.4 Векторные фигуры

Figma использует так называемые векторные сети, позволяющие создавать сложные формы!

Вы можете создавать фигуры с помощью хоткеев R (прямоугольник), L (линия) или O (эллипс). Удерживайте shift, чтобы сохранить пропорции. Каждая такая фигура автоматически создаёт свой собственный слой.

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

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

2.5 Изображения

Перетащите изображение в рабочую область. В Figma изображения всегда помещаются внутри фигуры (сродни, маски). Чтобы изменить свойства изображения, нажмите на “Fill” в окне свойств справа и меняйте их на свое усмотрение.

В раскрывающемся списке вы можете выбрать:

• Fill → Изображение заполнит контейнер.
• Fit → При изменении размера изображение никогда не будет обрезано или скрыто.
  
• Crop → Позволяет обрезать изображение до нужного размера и выделения. Обратите внимание, вы не потеряете остальную часть изображения.
  
• Tile → При необходимости повторяет исходные изображения.
  

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

☝Примечание: также можно заполнить уже существующую фигуру изображением. Нажмите на фигуру и перейдите к «Fill» и в раскрывающемся списке выберите «image».

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

2.6 Типографика

В Фигме уже есть предустановленные шрифты от Google! Но если вы предпочитаете использовать локальные шрифты, вам необходимо установить Font Helper или приложение для Фигмы. Кроме того, убедитесь, что у всех, кто взаимодействует с файлом, есть необходимые шрифты.

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

☝Совет: если вы новенький в веб-дизайне и дизайне приложений, убедитесь, что размер вашего текста не меньше 16 пикселей, стремитесь к 18 пикселям. В зависимости от вашего шрифта я также рекомендую немного увеличить высоту строки для лучшей читаемости.

3. Стили

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

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

3.1 Создание цветовых стилей

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

Создайте и используйте свой цветовой стиль:

1. Создайте объект

2. Измените заливку на желаемое значение цвета

3. Нажмите на квадратный символ, содержащий цветовые стили

4. Щелкните «+», для добавления класса. Готово!

☝Совет: когда вы даёте название стилю, укажите наименование его области применения, а не просто впишите название самого цвета («цвет выделения», а не «оранжевый»).

3.2 Создание стилей для текста

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

Настройка стиля текста схожа с настройкой цветовых стилей:

1. Выделите текст

2. В правом меню свойств щелкните по квадратному значку стилей.

3. Нажмите на «+» и дайте вашему ему имя

4. Чтобы добавить стиль к существующему тексту — щелкните по тексту, а затем выберите нужный стиль в меню справа.

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

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

3.3. Больше стилей

Сетки также можно сохранять и повторно использовать в качестве стилей.

А еще такие эффекты как тень, внутренняя тень, размытие слоя и размытие фона:

4. Компоненты

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

4.1 Создание повторно используемых компонентов

1. Выберите объект и нажмите на кнопку создания компонента вверху экрана или cmd + alt + K.

2. На панели слоёв вы увидите фиолетовый значок компонента. Это значит, что вы создали главный компонент.

Если теперь мы сделаем копию главного компонента, автоматически будет создана идентичная копия, она называется экземпляром. Любые изменения в главном компоненте приведут к таким же изменениям во всех экземплярах. Проще говоря, все изменения родительского компонента, будут унаследованы всеми дочерними.

Вы найдете все свои компоненты на вкладке Assets рядом со слоями слева, также можно перетащить их на свое рабочее пространство.

☝Совет: в долгосрочной перспективе вы должны стремиться согласовать ваши компоненты Figma с интерфейсными (например, компонентами в ReactJS). Лучше обсудить это со своей командой программистов, чтобы согласовать общие действия.

4.2 Замена мест и вложение

Экземпляры компонентов могут быть вложены в главные компоненты. Это означает, что у вас могут быть компоненты внутри компонентов, внутри компонентов (если вы смотрели Inception, вы понимаете, что я имею в виду).

Вы можете поменять местами вложенные экземпляры, используя меню замены экземпляров справа или просто удерживая cmd + alt + option и перетаскивая их из библиотеки.

4.3 Перезапись

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

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

4.5 Наименование компонентов

Используйте «/» для того, чтобы переименовать компонент, например можно переименовать “share-icon” в icon/share. Тогда Figma автоматически создаст родительскую категорию под названием icon, которая воплотит в жизнь все ваши мечты об обмене экземплярами и экспорте!

Кстати, если у вас есть главные компоненты на нескольких страницах, они будут организованы по страницам.

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

5. Auto Layout

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

5.1 Изменение слоев в auto-layout

• Добавьте свой контент
• Shift + A будет автоматически создавать новый компонент вокруг текстового слоя с вертикальными и горизонтальными отступами.
• Теперь измените содержимое и вы увидите, что размер кнопки автоматически изменяется
  

5.2 Вложенный Auto Layout

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

Выберите объекты, снова нажмите Shift + A, фрейм автоматической компоновки теперь является дочерним фреймом внутри родительского. Чтобы текстовые фреймы не увеличивались лишь в одном направлении, убедитесь, что вы выбрали фиксированную высоту.

☝Совет: вы можете поменять местами дочерние фреймы внутри родительских перемещая слои. Довольно приятная фича.

☝Примечание: любые фреймы с auto-layout можно сохранить как компоненты. Однако overflow прокрутка не будет работать при автоматической компоновке. Это становится актуально для прототипирования. Вы можете использовать одну хитрость, поместив фрейм с auto-layout внутрь обычного фрейма.

6. Прототипирование в Figma

В Figma есть фантастическое прототипирование для вашего веб-дизайна и дизайна приложений. Никакой другой инструмент вам не понадобится.

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

Выберите фрейм и в правой части меню свойств щелкните «Prototype», далее по «Prototype Settings» и выберите устройство, под которое будете разрабатывать. Дальше нажмите кнопку воспроизведения в правом верхнем углу, чтобы увидеть ваш дизайн в действии. Вы также можете загрузить приложение Figma Mirror на свой телефон для предварительного просмотра дизайна на вашем устройстве.

6.2 Подключение экранов

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

На панели свойств с правой стороны вы можете выбрать действие (смахивание, щелчок, наведение мыши и т.д.) и анимации (сдвинуть, нажать, свайпнуть и т.д.)

6.3. Поведение при переполнении

Помимо вертикальной прокрутки, Figma предлагает другое очень реалистичное поведение в случае переполнения.

• Горизонтальная прокрутка → Выберите все элементы и сгруппируйте их. Теперь нарисуйте фрейм нужного размера, переместите или скопируйте группу внутрь, оставив переполнение скрытым. В раскрывающемся списке выберите горизонтальную прокрутку.
• Панорамная (как в Google maps) → Нарисуйте фрейм и добавьте изображение. В меню переполнения выберите горизонтальную и вертикальную прокрутку одновременно.
• Fix elements → Чтобы сделать заголовок или кнопки липкими, убедитесь, что выбрано «fix position» («Design»> « Constraints» в меню свойств свойств)

6.4 Smart Animate

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

7. Совместное использование и работа с другими

7.1 Режим презентации

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

7.2 Создание команды и проекта

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

Чтобы создать команду, просто нажмите кнопку «Сreate new team» и следуйте инструкциям.

• Team → команда людей, например, дизайнер, разработчик, копирайтер и т.д.
• Projects → Храните связанные файлы в одном месте.
• Files → отдельные файлы дизайна, вот тут и создается реальный дизайн

☝Примечание: вы можете перемещать файлы между проектами и командами в любое время.

7.3 Библиотека

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

☝Примечание: системы дизайна являются важной частью UX / UI в настоящее время и стоит потратить некоторое время на ознакомление с концепцией и различными подходами.

Плохие новости: в бесплатной версии вы можете публиковать цветовые стили только в библиотеке команды. Для сохранения компонентов вам понадобится Pro-статус.

Создание командной библиотеки:

1. В меню слева перейдите в Assets и щелкните на значок книги.

2. Нажмите publish

3. Дайте вашей публикации имя

4. Откройте новый чистый файл в рамках команды

5. Перейдите на вкладку Assets, щелкните на значок библиотеки и активируйте только что созданную библиотеку.

Обновление командной библиотеки:

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

☝Примечание: Общие библиотеки очень эффективны и могут стать основой вашего процесса проектирования.

7.4 Совместная работа с другими дизайнерами и разработчиками

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

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

Разработчики → установите VIEW MODE. Пользователь сможет видеть все спецификации (переключение кода CSS, iOS и Android). Также они могут получить доступ к вашему прототипу в действии и могут скачать любые ассеты нужного размера.

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

7.5 Экспорт ассетов

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

1. Выберите объект.

2. Нажмите на экспорт в меню свойств справа.

3. Определите, как экспортировать и готово!

☝Примечание: Не забудьте указать имя с помощью «/», например image/home/imagename , icon/iconname, которые автоматически сортируют экспорт в файлы.

Шпаргалка, когда что экспортировать:

• SVG → используйте для векторных файлов, таких как логотипы и значки. SVG можно масштабировать до любого размера без потери качества. Обязательно экспортируйте резервную копию png.
• Jpg → используйте для всех видов прямоугольных изображений и фотографий. Обязательно укажите фактический размер (1x), а также (2x).
  
• Png → Используйте, если для изображения или фотографии требуется прозрачный фон. Также потребуется (1x) и как минимум (2x) экспорт.
• 1x, 2x → 1x — это фактический размер. 2x — в два раза больший размер. 2x требуется для получения четких изображений. Обратите внимание, что 2x, 3x и т.д. Идут с суффиксом @ 2x, @ 3x, который будет иметь значение для идентификации и вызова правильного изображения при кодировании.
  
• w & h → Вы также можете установить ширину, например 300w = изображение шириной 300 пикселей. То же самое для высоты = h.
  
• pdf → используется если вы хотите экспортировать всю страницу, например, для отправки по почте или добавления в презентацию и вам необходимо высокое качество.
  

Figma что это? Как работать с Фигма? Обзор программы Figma.

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

Платная или нет?

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

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

Существует ли Figma на русском языке?

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

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

Системные требования Figma

Для работы вам всего нужна свежая версия браузера:

• Chrome 49+
• Firefox 51+
• Safari 10.1+ (Apple — macOS)
• Edge 14+ (Windows)

Если же вы используете desktop версию, то авторы пишут только о требованиях к видеокарте:

• Intel HD Graphics 4000 (or later).
• Nvidia 330m (or later).
• ATI Radeon HD 4850 (or later).

Данные видеокарты являются относительно устаревшими поэтому в абсолютном большинстве случаев вы сможете установить Figma на свой компьютер.

Работа с Figma offline

Скажу сразу, что figma без интернета не работает, так как программе при запуске нужно синхронизация с облаком. НО! Можно обойти это требование: для этого запустите программу с включеным интернетом, дайте программе все загрузить, а затем отключите интернет. Готово! Теперь вы можете спокойно работать в программе. (Данные актуальны на август 2019 года).

Как работать с Фигма?

Есть два варианта работы с Figma — онлайн и десктопная версии. По своему опыту работать лучше в десктопной версии. Подробнее о преимуществах читайте в статьях на сайте.

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

Как пользоваться figma

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

Регистрация в Фигма

Для того чтобы зарегистрироваться в программе Figma:

1. Перейти на сайт https://www.figma.com/
2. Выбрать Sign up
3. Войти через Google или использовать свои данные
4. Подтвердите свой почтовый ящик
5. Интерфейс Figma станет доступен по адресу из первого пункта

Обзор программы Figma

Figma это программа нового поколения для разработки интерфейсов программ, веб-сайтов и мобильных приложений.

Не совсем разумно сравнивать Figma с другими программами для разработки интерфейсов. Прежде всего потому, что Figma является облачным веб-сервисом предоставляющим нативные программы для установки на Mac и Windows. Т.е. вы можете даже ничего не устанавливать, а работать через браузер. Если кратко, то Figma это как Sketch, только без плагинов и с немного другой системой реализации Символов и некоторых других функций в лучшую сторону.

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

Давайте перечислим все особенности.

Условная бесплатность

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

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

Многопользовательский режим редактирования

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

Теперь редактировать один Исходный файл может любое количество пользователей одновременно.

Хранение файлов

Забудьте про Dropbox, Google Drive и другие сервисы, в которых раньше вы хранили файлы проекта. Все ваши файлы хранятся в облаке Figma. Пора забыть про сочетание клавиш CTRL + S (CMD + S для Mac), чтобы сохранить измения, потому что в Figma это происходит автоматически.

Сохранение превью изображений

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

Комментирование макетов

Раньше это был затруднительный процесс. Давайте вспомним как это было:

• Получали текстовый список комментариев из которого было не всегда понятно о каком месте идет речь.
• Делали скриншот через сервис и сверху писали комментарий.
• Оборачивали макеты в PDF и там писали комментарии.
• Использовали Dropbox или Invision в качестве сервиса комментирования.

Теперь в Figma любой пользователь, которому вы предоставили доступ может оставить комментарий к нужному месту.

Прототипирование

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

Режим презентации

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

Символы

Гораздо более удобная система работы Символов по сравнению со Sketch. Позволяет в очень наглядной форме на панели слоев наследовать символы. А также изменять любые свойства экземпляра: текст, включать и отключать видимость слоев, изменять размер и главное стили.

Панель символов

Теперь нет необходимости в странице Symbols как в Sketch. В Figma есть панель, находящаяся в одном ряду с панелью слоев, которая отображает все символы проекта и предоставляет удобный поиск по имени символа.

Библиотека компонентов

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

Производительность

Заявляю, как человек, который проработал 7 лет в Photoshop, 3 года в Fireworks и 3 года в Sketch, что Figma работает гораздо быстрее Sketch, который как известно в плане производительности оставляет далеко позади Photoshop.

Режим просмотра

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

Панель Сode

Для верстальщиков и программистов в Figma есть специальная панель Code, на которой можно скопировать CSS-стили для Web, а также код-разметки расположения и стилей для Android и iOS.

Интеграция

Figma интегрируется с Zeplin. А также файлы Figma можно встраивать в файлы Dropbox Paper.

Сетки

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

Вы можете:

• Создать неограниченое количество сеток на одном макете.
• Cделать сетки резиновыми или статичными.
• Раскрасить каждую сетку в отдельным цвет.

Фреймы

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

Это не законченая статья. Продолжение следует.

Советы по работе с Figma, что такое Figma

Для дизайнеров существует великое множество программ, и каждая из них по-своему уникальна. Одним из самых популярных продуктов для UX/UI-дизайна является Figma.

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

Что такое Figma

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

Возможности и особенности Figma

Хотелось бы сначала отметить ключевые моменты, благодаря которым Фигма набрала столь огромную популярность.

• Бесплатные функции. Можно свободно пользоваться данным графическим редактором, но только с некоторыми ограничениями. В их число входит число редакторов и проектов, время хранения истории версий и другие важные мелочи. 
• Встроенные компоненты. Если вы создаете сразу несколько элементов с одинаковым стилем, можно менять их во всем макете. В других графических редакторах вам пришлось бы работать с каждым элементом по отдельности.
• Интеграция с различными сервисами. Можно перенести все свои проекты из Sketch или Zeplin без потери шрифтов, изображений или кривых. Еще доступно подключение к корпоративному мессенджеру Slack, пространству Confluence и так далее.
• Использование через браузер или приложение. Программа работает в вебе и на десктопе. Все, что необходимо для работы с ней – авторизация в уже существующем профиле и наличие стабильного интернет-соединения. Скачать редактор можно с соответствующего раздела официального сайта.
• Многопользовательский режим. Одна из главных особенностей графического онлайн-редактора Фигма. Есть возможность создания собственной команды для дальнейшего сотрудничества в рамках сервиса.
• Наличие фреймов. Причем с предустановленными размерами для разных устройств – телефонов, планшетов, компьютеров, смарт-часов и так далее. Плюс в том, что не придется запоминать какие-либо размеры. Просто выбираете подходящий вариант девайса и начинаете работать с ним.
• Просмотр истории версий. Сервис сохраняет ранние версии файла на 30 дней, при необходимости можно возвращаться к ним и дублировать любую из них. Сохранение происходит автоматически после внесения последнего изменения в файл. Кстати, можно добавлять всем версиям названия и описания.
• Хранение файлов в облаке. Нет необходимости скачивать проект каждый раз после внесения изменений – все сохраняется на диске автоматически.

Если тех возможностей, что даются бесплатно, для вас недостаточно, то можно купить подписку. Описание тарифов ниже. 

Минусы Figma

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

Как пользоваться Figma

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

Регистрация или авторизация

Если вы не зарегистрированы в данном сервисе, сперва нажмите на крайнюю кнопку «Sign up», введите электронную почту, придумайте пароль и жмите на кнопку «Create account». Можно также войти через сервисы Google.

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

Уже зарегистрированным пользователям необходимо кликнуть по ссылке «Log in». В результате откроется немного другое поле, где вы сможете ввести данные и авторизоваться. 

Следом откроется рабочее пространство с ранее созданными проектами (если они, конечно, у вас были). Новички пройдут краткий ознакомительный курс по основным функциям. Теперь можно приступать к работе!

Создание нового файла

Чтобы создать новый файл, жму на плюс в правом верхнем углу интерфейса. Выбираю подходящий формат для будущего дизайна и жму по кнопке «Create file» для старта. Если выбрать пункт «Blank canvas», откроется пустое рабочее пространство.

Импорт файлов

Если вы ранее использовали приложение Sketch, можете импортировать из него проекты в Figma. Как уже говорилось ранее, ни один элемент при этом не пострадает – шрифты, кривые и изображения никуда не денутся и не сместятся. Срабатывает даже простое перетаскивание файла из первого приложения во второй сервис. Доступно копирование отдельных элементов в формате SVG.

Разработка прототипов в Figma

Перейдем к элементам разработки интерфейсов. Рассмотрим настройку фреймов, слоев, макетов и сеток, типографики и многого другого.

Макеты и сетки

Для создания макета необходимо выделить нужный слой, перейти в раздел «Design» в правой панели, а там уже найти пункт «Layout grid». Там выбираете размер, цвет и прозрачность. Можете поменять форму с сетки на столбцы или строчные ряды. Доступно применение сразу нескольких макетов, а для переключения между ними используется комбинация Ctrl + G.

Просмотр прототипов

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

При необходимости можно изменить цвет модели и расположение на горизонтальное или вертикальное. После того как настройка завершится, жмем на кнопку «Present», расположенную справа от «Share», для просмотра прототипа на выбранном девайсе.

Работа с изображениями

В Figma можно перемещать изображения из разных источников – перемещать из памяти компьютера, а также копировать и вставлять из интернета. При этом не стоит забывать об авторских правах на картинки (об этом я, кстати, рассказывала ранее). 

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

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

Любой созданный вами элемент можно добавить в раздел «Компоненты» для повторного использования в других проектах. Чтобы пополнить библиотеку, следует выделить нужный объект и нажать на комбинацию Ctrl + Alt + K. В результате значок элемента в панели слоев поменяется.

Внесение изменений в таких компонентах согласовано – если поменять какие-либо детали в основном экземпляре, изменения будут внесены во все остальные копии. Добавленные в коллекцию объекты доступны во вкладке «Assets» в левой панели.

Работа со стилями и цветами

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

Слои и группы

Работа со слоями здесь похожа на таковую в Photoshop. Можно создавать отдельные группы, перетаскивать на верхний и задний план определенные элементы. И все это доступно в разделе «Layers» в левой части экрана.

Совместное использование

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

Когда вы регистрируетесь в сервисе, персональная команда создается сразу же. При необходимости ее название можно легко поменять, кликнув по нужному элементу правой кнопкой мыши и выбрав пункт «Rename». Оттуда же можно удалить команду. Чтобы создать новую команду, необходимо нажать на пункт «Create new team» в самом низу левой панели.

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

Но есть и другой способ совместной работы над проектом без приглашения кого-либо в команду. В рабочем пространстве нужного проекта жмем по кнопке «Share», далее настраиваем права и отправляем приглашение. Можно также скопировать ссылку и отправить ее любому человеку.

Типографика

По умолчанию в Фигма установлены шрифты Google. Для десктопной версии вы сможете установить специальный плагин Font Helper для использования локальных шрифтов с вашего компьютера. 

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

Установка плагинов

Фигма поддерживает установку плагинов для оптимизации работы. Полную коллекцию можно посмотреть в разделе «Community» на главной странице, перейдя в раздел «Explore».

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

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

Фреймы

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

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

Заключение

Figma – действительно крутая программа. Даже у меня появилось желание заняться разработкой дизайна интерфейсов, настолько все просто и удобно. Начинающие пользователи легко разберутся с тем, как работать в ней.

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

Процесс группы продуктового дизайна

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

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

1. Речь идет о процессе «группы разработчиков», а не о процессе «группы разработчиков». Если вы работаете в компании с более чем одним дизайнером, вы неизбежно понимаете, что на самом деле являетесь частью как минимум двух культур одновременно. Вы оба являетесь членом «команды дизайнеров» (по горизонтали) и «команды по продукту» (по вертикали), у каждой из которых своя собственная версия стендапов, выездных мероприятий и мероприятий, направленных на сближение команды и достижение их цели.Горизонтальная команда помогает поддерживать единообразие продукта и высокую планку качества, повышая мастерство дизайна в компании; Вертикальная команда — это, в конечном счете, то, что доставляет и предлагает улучшения продукта и накапливает опыт в определенных областях. Важно инвестировать и в то, и другое.

Баланс этих идентичностей часто меняется в зависимости от размера и статуса компании. Когда компания небольшая, команда разработчиков тесно объединяется для распределения рабочих нагрузок. По мере его расширения дизайнеры часто объединяются в рабочие группы, ориентированные на конкретные области продукта.Как компания среднего звена с 10 дизайнерами продуктов, мы начинаем замечать естественные противоречия между этими идентичностями. Наши дизайнеры в основном связаны с областями продуктов, но иногда и с несколькими, а иногда и без них. Некоторые дизайнеры (до Covid) сидят с другими дизайнерами, а некоторые — со своими инженерами. Учитывая наш размер, мы поощряем команду уделять больше внимания взаимоотношениям со своими продуктовыми командами, а остальное полагаемся на процесс нашей команды дизайнеров.

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

1. Да, у нас пандемия, и это довольно странно. Невозможно игнорировать эффект, который Covid-19 оказал на команды по всему миру. В такие тяжелые времена важно давать друг другу пространство, когда личная жизнь сказывается. Например, во время нашей последней встречи команды я поделился, что ожидаю значительного сбоя в производстве (если мы обычно работаем на 100%, может быть, это примерно 60%), и призвал всех брать выходные для психического здоровья. .Это время изоляции и одиночества. Но именно поэтому я считаю сотрудничество с нашими коллегами привилегией, которой стоит воспользоваться; здоровый командный процесс может помочь сохранить чувство общности при отсутствии более органических социальных связей.

Тем не менее, только вы можете определить, готова ли ваша команда к встряске вашего процесса, когда есть так много других вещей, к которым нужно приспособиться. Поэтому, пожалуйста, не читайте эту статью и сразу переходите к «мы должны это сделать!» Мы просто пытаемся открыто говорить о том, как мы работаем, для всех, кому интересно.И хотя я пишу это в уникальный момент времени — мы не можем выходить из дома, чтобы поработать из офиса или даже выпить кофе, оказывается, что только несколько мелких вещей в этой статье относятся исключительно к этому конкретному случаю. момент или в отдаленный пейзаж в целом. Большинство процессов здесь должны иметь отношение как к удаленным, так и к не удаленным командам, независимо от того, пандемия или нет.

Во время Covid-19 и после Covid-19

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

Разминка

Кто : Дизайнеры продукта, возможно Cristen (Research) и Tori (Brand) What : Начинаем неделю вместе Когда : Каждый понедельник с 9:30 до 10:00 по тихоокеанскому времени Почему : Чтобы облегчить рабочую неделю чем-нибудь легким и веселым

Каждый понедельник мы начинаем неделю вместе. 30-минутное совещание состоит из четырех частей:

Новости выходных дней (5-10 минут) : каждый из нас ходит по комнате и кратко рассказывает о том, что мы сделали за выходные (если мы используем Zoom, один человек начинает, затем назначает следующего человека).Даже если в наши дни это какой-то вариант «я остался дома», «приготовил хлеб», «поиграл в Animal Crossing», «развлекал моего ребенка» или «выпил за мир Дикого Запада», это все еще важная традиция. Больше всего это напоминает нам, что мы все вместе. Это также начало недели на позитивной ноте и позволяет нам расслабиться в рабочей неделе.

Основные моменты (5 минут) : Затем мы на пару минут опускаемся, чтобы поразмыслить о предыдущей неделе, оглядываясь на наши календари, чтобы напомнить нам, как мы проводили свое время.Мы собираем основные моменты в документ Notion, чтобы отпраздновать маленькие победы. Для реализации крупных проектов требуется время, поэтому полезно найти способы признать заметный прогресс, независимо от того, добились ли вы успеха в дизайне или получили отличные отзывы во время изучения пользователей. Однажды мы подумали о том, чтобы провести своего рода «MVP» недели для людей, у которых были особенно сильные недели, но это не прижилось, и не всегда есть очевидный кандидат.

График критики / встреч (5-10 минут) : Мы заранее планируем нашу критику и командные встречи, чтобы все знали, чего ожидать, и поэтому мы не теряем время во время этих встреч, выясняя повестку дня.Мы снова обходим комнату (на этот раз в порядке, обратном тому, кто делал новости на выходных), и каждый человек решает, есть ли у него тема, которую он хотел бы критиковать в течение недели, и в какой день. Обычно есть два слота для критики: среда в 9:30 и пятница в 14:00 (подробнее об этом позже), но если есть переполнение тем, мы добавляем слот в понедельник в 16:00 или предлагаем им получать критику асинхронно. через Slack. Если у кого-то нет темы, мы все равно просим его поделиться своим фокусом на неделю, чтобы все были осведомлены о том, что происходит.

Объявления (5-10 минут) : Наконец, я делюсь общекорпоративными объявлениями и обновлениями, относящимися к команде разработчиков. Это включает в себя такие темы, как информация о нашей конференции пользователей, новые политики компании, планы найма и прогресс кандидата, или даже более тактические вещи, такие как Расмус, сообщающий о последних изменениях в нашей системе дизайна. Это скорее информационная справка, чем обсуждение, и, если есть какие-то дальнейшие действия, мы добавляем это в повестку дня наших групповых встреч в понедельник в 16:00. Говоря о…

Совещание команды

Кто : Дизайнеры продукта Что : Обсуждение и мозговой штурм ответственности всей команды (отменяется, если нет тем) Когда : Каждый понедельник с 16:00 до 17:00 PT Почему : Для создания регулярного пространства для обсуждения в команде

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

Темы назначаются на время разминки, и если повестки дня нет, мы отменяем встречу. В итоге мы отменяем по крайней мере 1 раз в месяц или заменяем временной интервал на критику (если было переполнение тем).

Руководство проектной группы не должно быть исключительной обязанностью продвигать все это вперед. В вашей команде, несомненно, есть вдумчивые, талантливые люди, которые могут помочь в решении этих проблем. Я считаю, что самые продуктивные и здоровые команды несут общую ответственность за улучшение работы команды. Большинство лучших идей нашей команды исходили НЕ от меня. Первоначально Нико предложил нам пересмотреть наши методы найма, Дженни придумала более совершенные шаблоны с меньшими предвзятостями, а Марчин и Шана начали больше думать о наших методах адаптации новых сотрудников.Командные собрания — прекрасное время для совместного обсуждения таких улучшений.

Предупреждение: Управление беседами с большой группой может быть сложной задачей. Вы как фасилитатор обязаны избегать группового мышления и поощрять всех высказывать свое мнение. Прежде всего, подумайте о том, как вести дискуссию так, чтобы было безопасно. Рассмотрите возможность ограничения сложных тем и слушания обратной связи «по комнате» по очереди, чтобы у тех, кто чувствует себя менее комфортно в групповой обстановке, было определенное время для выступления.Вы также можете выполнять письменные упражнения с помощью стикеров (физически или в цифровом формате в Figma) и разбиваться на более мелкие группы, что для некоторых может показаться более привлекательным.

Critique

Who : Дизайнеры продукта, вице-президент по продукту и все гости, которых докладчик решит пригласить (например, их менеджер по маркетингу, ведущий инженер, исследователь) What : Рассмотрите две темы (по 30 минут каждая) за сеанс критики Когда : каждую среду с 9:30 до 10:30 по тихоокеанскому времени и пятницу с 14:00 до 15:00 по тихоокеанскому времени Почему : чтобы продвигать проекты, помогать всем, кто застрял, и делиться контекстом с команда

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

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

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

Восстановление

Кто : Дизайнеры продукта Что : Завершить неделю Когда : Каждую вторую пятницу с 15:00 до 16:00 по тихоокеанскому времени Почему : Чтобы расслабиться и расслабиться

Как сказал Исаак Ньютон , «То, что [согревает], должно [остывать].«Или, может быть, он этого не говорил. Но, наверное, кто-то это сделал.

Наряду с разминкой, кулдауны сокращают наше время, давая нам возможность расслабиться в работе и вне ее. Помимо завершения недели, мы можем объединиться и повеселиться как одна команда. Я бы сказал, что они в основном делятся на следующие три категории:

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

Chat : Мы уделяем время размышлениям о наших неделях и спрашиваем друг друга: «Как вы себя чувствуете?» Этот вопрос редко задают в группах, и при правильной организации он может дать командам безопасное пространство, чтобы понять, что нормально быть усталым, растерянным или грустным. Особенно в это время полезно подумать о том, как все приспосабливаются к нашим новым реалиям, работая и живя в одном и том же пространстве.

Learn : Намерение здесь научить друг друга чему-то новому, критиковать или исследовать конкурентоспособный продукт (когда мы проводили время вместе, играя с Drama), или приглашать приглашенных докладчиков.По общему признанию, мы не так много занимались этим, возможно, потому, что более широкая компания «обедает и учится» по четвергам по всем вопросам, от «как разгадывать кроссворды» до «основ анимации». Тем не менее, мы хотели бы и дальше думать об уникальных возможностях обучения для нашей команды, которых не было бы в нашей повседневной жизни.

Обед и кофе

Наконец, нам нравится проводить вместе совершенно неструктурированное время. Когда вы находитесь в офисе, многое из этого происходит естественным образом.В наши дни мы планируем дополнительный «утренний кофе» каждый день в 9:00, чтобы люди могли настроиться, послушать музыку и подключиться. Это помогает поддерживать некоторое подобие нормальности, когда можно просто тусоваться без каких-либо планов. Темы разговоров варьировались от помощи Марчину в выборе новых очков до восхищения обширной коллекцией чашек Хизер и совместного прослушивания утреннего джазового плейлиста Spotify.

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

Дизайн — все в руках

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

Дизайнеров много вне команды дизайнеров продуктов в Figma. Например, у нас есть три дизайнера брендов, три исследователя, два дизайнера движения и четыре защитника дизайна — и практически все наши команды растут.Во время выездного мероприятия в прошлом году мы поняли, что нам нужно больше возможностей для кросс-функционального сотрудничества с этими разными ролями, поэтому мы с Тори (нашим креативным директором) и Микой (нашим бренд-продюсером) начали ежемесячно организовывать «все руки», чтобы команда могла получить вместе и поделитесь тем, над чем все работают.

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

Выездные

Кто : Команда разработчиков продукта Что : Полный день планирования и деятельности вне офиса Когда : Дважды в год, небольшой в мае и больше в сентябре Почему : Чтобы учиться, объединяться и проводить мозговой штурм

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

Меньший : это может выглядеть как полдня вне передышки, или, совсем недавно, мы только начали планировать удаленный в июне. (Нам определенно нужны советы о том, как управлять удаленным удаленным сайтом, поэтому, если у вас есть идеи, свяжитесь с нами.) Как правило, цели для этого схожи, поскольку они «более крупные», просто немного сжатые. Это что-то вроде расширенного «собрания команды» и «перезарядки», когда нам нужно время, чтобы помечтать, лучше узнать друг друга и проверить, как идут дела.

Более крупный : В первый раз в 2018 году мы на пароме поднялись до мыса Кавалло, к северу от Сан-Франциско. После завтрака у нас был целый день развлечений. Одна традиция, которую мы начали (и с тех пор продолжаем), — делиться смущающей работой, когда мы только начинали заниматься дизайном.Начало дня с чего-то уязвимого и унизительного, над чем мы все вместе можем посмеяться, задает правильный тон для дня: «Совершать ошибки — это нормально», и в то же время ценить достигнутый рост.

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

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

Обучение дизайну

Миссия Figma — сделать дизайн доступным для всех, и мы хотим видеть это как внутри компании, так и за ее пределами.Каждый новый сотрудник получает экземпляр The Design of Everyday Things и проходит «Мастерскую дизайна 101» под руководством Тори и меня.

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

Празднования

Нам нравится отмечать дни рождения и рабочие юбилеи уникальными способами вместе, как одна команда.Однажды мы сделали нестандартную клавиатуру на день рождения Марцина, сделали неожиданный флешмоб к двухлетнему юбилею Нико, изготовили на заказ кофейные кружки Хизер и цифровую анимированную открытку на ее день рождения, а я получил открытки Magic: The Gathering ручной работы. Эти вехи важно осознавать, чтобы все знали, что мы здесь, чтобы поддерживать друг друга. Кроме того, это весело и запоминается. Я всегда чувствовал, что, когда вы впервые присоединяетесь к компании, люди, как правило, неплохо справляются с вашей работой, отмечая и поздравляя вас, но по какой-то причине это, кажется, останавливается на достигнутом (если не считать периодических вечеринок по поводу запуска).Эти празднования существуют во всей корпоративной культуре Figma — многие команды даже создают цифровые карты в Figma. Я рекомендую вкладывать средства в регулярные празднования, чтобы помочь построить сообщество и бороться с предвзятостью к негативу.

Все перечисленные выше процессы — это процессы, которые мы создали с учетом нынешнего размера, организации и культуры нашей команды дизайнеров и компании в целом. Вместо того, чтобы просто «копировать + вставлять» эти советы в качестве основы, я призываю вас учитывать уникальные потребности вашей команды и придумать набор норм и процессов, основанных на этих требованиях.

Имея это в виду, если вы хотите обновить, как ваша команда дизайнеров работает вместе, вот как начать:

1. Определите существующие пробелы : подумайте о том, что в настоящее время нуждается в улучшении, и решите одну проблему. Качество не совсем на должном уровне? Рассматривайте критику как способ последовательно укреплять здоровые паттерны в команде. Команда не совсем ладит? Старайтесь чаще встречаться с людьми или старайтесь наладить связи. Отсутствие мотивации? Запланируйте выездной офис, чтобы усилить волнение по поводу будущего видения компании.
2. Размышляйте о культуре : Есть так много вещей, которые делают вашу команду уникальной, и важно четко сформулировать, что именно. Определите эти особенности, подумайте о культуре, которую вы хотите создать, и отметьте, на что люди положительно реагировали в прошлом. Один из способов начать — спросить свою команду, как они описывают компанию или команду другим. Определив, что делает вашу команду уникальной, вы сможете найти способы воплотить это в жизнь в своих процессах.Взгляните на эту серию фотографий Линды и ее времени в Lyft. Или еще одно сообщение талантливой Линды, написанное командой дизайнеров в HelpScout. Даже не зная об этих командах, можно сказать, что они полны юмора и жизни. Не знаете, что находится в культурном центре вашей команды? Попробуйте культурные комплекты Dropbox как отправную точку и прочтите их руководство по формированию творческой культуры. Или просто спросите друг друга.
3. Используйте команду : У некоторых команд может быть специальный продюсер или технический специалист, который может помочь.Поскольку мы этого не делаем, я полагаюсь на нашу команду, которая вместе со мной определяет и внедряет процессы. В любом случае это часто приводит к лучшим результатам, поскольку люди чувствуют себя лично заинтересованными. Если кто-то из вашей команды искал больше возможностей для лидерства, дайте ему более явную ответственность за что-то вроде критики. Или подумайте о смене владельцев собрания каждый квартал, чтобы не терять актуальности. Старайтесь не цепляться за собственные идеи слишком сильно; большинство этих встреч служат команде, поэтому важно, чтобы они в них покупались.
4. Постройте рутину : Если вы обнаружите, что вам нужно запланировать несколько специальных встреч, возможно, есть способ упорядочить и централизовать обсуждение в еженедельных схемах. Людям утомительно быть не в состоянии предугадать, куда пойти для определенных типов разговоров; предоставление им постоянной и регулярной каденции каждую неделю выстраивает распорядок дня и позволяет избежать траты лишней умственной энергии на координацию. Вы также можете подумать о том, чтобы их немного обозначить (например, с «разминкой» и «восстановлением»), чтобы цель была более ясной и запоминающейся.
5. Не забывайте о времени : подумайте о том, где находятся люди в данный день или неделю. Криты — это слишком сложно в конце рабочего дня в пятницу, потому что люди устали и готовы к выходным. Их также сложно выполнить в понедельник в начале дня, потому что контент не такой свежий; им может потребоваться время, чтобы освоиться с работой после выходных. Также могут быть принудительные ограничения, например, если вы управляете командой в разных часовых поясах или балансируете время с другими обязательствами вашей команды.В некоторых случаях, особенно при первой установке сроков, нам приходилось просить людей сдвинуть противоречивые обязательства, чтобы освободить место для этих встреч.
6. Относитесь к изменениям как к эксперименту : Новые процессы и изменения поначалу могут пугать. Чтобы сделать команду более комфортной, представьте новые процессы как «эксперименты» и намеренно проверяйте их вместе, чтобы увидеть, работают ли предложенные изменения или нет. Одним из примеров этого является (до COVID) у нас были некоторые дебаты о том, должны ли мы сидеть вместе как команда или ближе к нашим разработчикам.Это была сложная тема с множеством зависимостей, но позволив команде поэкспериментировать с тем или другим, это дало нам разрешение и уверенность в том, что мы можем идти на риск.
7. Управление «очередью» : мы поддерживаем очередь в Notion, которую мы используем для ряда вещей, таких как поддержание командных собраний и идеи охлаждения для будущих встреч, отслеживание гостей с критикой и ротация составителей заметок. Люди могут открывать очередь в любой момент в течение данной недели, и мы справляемся с этим с помощью наших утренних разминок в понедельник при планировании еженедельных встреч.Сохранение одного места снижает вероятность того, что мы забудем о каком-либо задании.
8. Пригласите остальных сотрудников вашей компании (при необходимости) : Для нас это более ярко выражено, поскольку мы работаем над инструментом дизайна, ориентированным на сотрудничество — обучение большего числа людей дизайну напрямую связано с нашим бизнесом. Тем не менее, приглашение других к вашей критике в качестве гостей может вызвать сочувствие к сложности, связанной с разработкой продуктов. Это также может помочь избежать изолирования вашей команды дизайнеров от остальной компании и найти баланс между культурой команды дизайнеров и культурой продуктовой группы, упомянутой в начале этой статьи.

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

Тем не менее, я хотел поделиться тем, как мы работаем более открыто, на случай, если это поможет другим командам, независимо от того, хочет ли ваша команда повторить устаревший процесс или вы только начинаете вводить какую-то структуру.Имея это в виду, мы хотели бы услышать, что делает и ВАША команда дизайнеров! Свяжитесь с нами или поделитесь в Твиттере с помощью #designteamprocess, чтобы начать разговор.

Представляем FigJam

Сегодня на Config 2021, нашей виртуальной конференции по дизайну, генеральный директор Figma Дилан Филд объявил о запуске FigJam, нового пространства для белых досок Figma. Доступный сейчас в бета-версии, FigJam будет бесплатным для всех до конца 2021 года. Ниже вице-президент Figma по продукту Юки Ямасита немного расскажет, почему мы решили создать FigJam.

Многое изменилось за пять или около того лет с тех пор, как Figma была запущена в закрытой бета-версии, или, как выразился Дилан в то время: когда дизайн встретился с Интернетом.

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

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

В каждом из этих вариантов использования пиксели не выталкиваются. Продукты не разрабатываются. Люди просто ищут место для обмена идеями и общения.

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

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

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

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

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

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

FigJam также разработан, чтобы быть универсальным магазином для удобного сотрудничества. Встроенные звуковые функции позволяют командам легко «поговорить», не поднимая телефонную трубку или не начиная видеозвонок. И в отличие от других вариантов, FigJam без проблем работает с Figma, поэтому команды могут хранить всю свою проектную работу — от первоначальной концепции до окончательного прототипа — в одном и том же месте.Команды

могут использовать стикеры, смайлики и инструменты для рисования для мозгового штурма в FigJam. А встроенная звуковая функция позволяет легко «выговориться» вживую.

Мы также хотели привнести в FigJam ту же теплоту и интуицию, которые нравятся людям в Figma, независимо от того, придумываете ли вы, ломаете голову или просто «тусуетесь». Чаты курсора, смайлики, штампы и другие тщательно разработанные функции позволяют вам полностью выразить себя.

Другими словами, в FigJam веселье встречается с функциональностью.

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

Вот как это описал руководитель отдела дизайна Discord Кевин Уилсон:

«FigJam был прекрасен для команды разработчиков продукта Discord, потому что он очень похож на сам Figma — но сфокусированная, несложная версия, которая отлично подходит для мозгового штурма. или ретроспектива, или что-нибудь на самом деле «.

В 2022 году у FigJam будут как бесплатные, так и платные планы (8 и 15 долларов за редактора в месяц), но до тех пор — до конца 2021 года — любой и где угодно может использовать FigJam бесплатно.

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

Сила Figma как инструмента дизайна

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

Рассмотрим подробнее.

Figma имеет знакомый интерфейс, который упрощает внедрение.

Figma работает на любой платформе

Figma работает в любой операционной системе, в которой работает веб-браузер. С Figma можно использовать Mac, ПК с Windows, Linux и даже Chromebook.Это единственный в своем роде инструмент проектирования, который делает это, и в магазинах, использующих оборудование с разными операционными системами, каждый может по-прежнему обмениваться, открывать и редактировать файлы Figma.

Во многих организациях дизайнеры используют Mac, а разработчики — ПК с Windows. Фигма помогает объединить эти группы. Универсальный характер Figma также предотвращает раздражение, связанное с PNG-понгом (где обновленные изображения передаются туда и обратно между дисциплинами команды дизайнеров). В Figma нет необходимости в посредническом механизме, чтобы сделать проектную работу доступной для всех.

Сотрудничество в Figma — это просто и знакомо

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

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

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

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

Примечание. Некоторые дизайнеры не любят, когда за ними «шпионят» во время работы, поэтому объяснение преимуществ остается на усмотрение дизайнера. В целом, большинство дизайнеров быстро видят ценность в такой функции и легко адаптируются к работе в общей среде.

Figma использует Slack для общения в команде

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

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

Обмен Figma несложный и гибкий

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

Figma делится проектами, файлами, страницами и фреймами со всеми, у кого есть разрешение.

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

Встроенные файлы Figma обеспечивают обновление в реальном времени

Figma также предоставляет живые фрагменты кода для вставки iFrame в сторонние инструменты.Например, если Confluence используется для отображения встроенных файлов макетов, эти файлы не «обновляются» путем сохранения файла Figma — эти встроенные файлы ЯВЛЯЮТСЯ файлом Figma.

Если кто-либо в Figma внесет изменение в макет, это изменение можно будет увидеть вживую во встроенном макете Confluence. (Вы можете узнать больше об интеграции Figma и Confluence здесь.)

Влияние этой функции на процесс UX показано на следующей диаграмме:

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

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

После Figma сторонних инструментов больше не нужны (но могут быть использованы при желании). Поскольку Figma обрабатывает функциональность сторонних инструментов, описанных ранее, есть только один шаг в этом процессе — переход от эскизов к Figma, и все группы имеют последние макеты.Никакой «передачи» в самом строгом смысле этого слова нет.

Figma отлично подходит для отзыва о дизайне

Figma поддерживает комментирование в приложении как в режиме проектирования, так и в режиме прототипирования, а цепочка комментариев отслеживается в Slack и / или по электронной почте. Нет необходимости публиковать файлы PNG или выполнять постоянные обновления, чтобы получать отзывы от команды с помощью сторонних инструментов, таких как InVision или Marvel.

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

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

Передача разработчикам упрощена с помощью Figma

Figma отображает фрагменты кода на любом выбранном кадре или объекте в форматах CSS, iOS или Android, которые разработчики могут использовать при просмотре файла дизайна. Компоненты дизайна могут быть проверены любым разработчиком в любом файле, который они могут просматривать. Для получения информации нет необходимости использовать сторонний инструмент.Даже в этом случае Figma имеет полную интеграцию с Zeplin, если команды хотят делать больше, чем просто измерение и отображение CSS.

Разработчики могут получить доступ к коду из файла дизайна или запустив прототип Figma.

Файлы проекта Figma находятся в одном месте — онлайн

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

• Создайте проект для темы функции .
• Создайте файл для эпического объекта или большого объекта.
• Создание страниц в этом файле для каждого пользователя История .

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

Файлы проекта можно легко организовать в специальном виде.

Figma теперь имеет API-интерфейсы для разработчиков, которые обеспечивают полную интеграцию с любым браузером. Компании используют это для интеграции отображения файлов дизайна в реальном времени в свои приложения.Например, у Uber есть большие экраны, на которых файлы дизайна отображаются «в прямом эфире» по всей компании. Проекты распространяются, и отзывы приветствуются от любого сотрудника компании.

В программном обеспечении

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

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

Управление версиями файлов автоматически или по запросу

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

Версии файлов сохраняются вручную для создания ветвей дизайна.

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

Создание прототипов в Figma просто и интуитивно понятно

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

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

Прототипы Figma могут распространяться так же, как файлы дизайна Figma; любой, у кого есть разрешение на ссылку, может просматривать и комментировать прототип, и, опять же, эта обратная связь фиксируется на панели комментариев инструмента и записывается в Slack. Разработчики могут видеть рабочий процесс проектирования, оставлять прямые @ сообщения для дизайнеров, а также получать измерения и атрибуты CSS внутри прототипа.

Командные библиотеки Figma идеально подходят для систем проектирования

Дизайн-системы стали необходимостью для многих компаний, и существует потребность в компонентах (символы в Sketch и Illustrator), которые можно многократно использовать, масштабировать и «токенизировать» для использования в библиотеках шаблонов, доступных дизайнерам UX и внешним пользователям. конечные разработчики.

Немодальный диалог командной библиотеки

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

Часто используемая фраза «единый источник истины» здесь подходит — после создания командной библиотеки Figma любой, у кого есть доступ к проекту, может использовать экземпляры компонентов в своих проектах и ​​быть уверенным, что они работают с последними версиями.

Организация компонентов проста и гибка с помощью файлов и фреймов.

Подход

Figma к библиотекам компонентов прост и легок в управлении.Дизайнеры могут создавать файлы, полные компонентов, или использовать компоненты на странице для организации библиотеки шаблонов. Каждый фрейм на странице Figma становится организационным разделом в командной библиотеке (нет необходимости создавать иерархии \ подобные \ этой).

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

Figma создана для улучшения совместной работы дизайнеров

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

Эксперты по дизайну, которые используют Figma после перехода со Sketch (файлы Sketch можно импортировать с четностью в Figma), не разочарованы:

… он полностью меняет способ работы с коллегами и клиентами — Оптимизируйте совместный дизайн с Figma

Figma объединила в себе лучшее из всего в мире инструментов дизайна пользовательского интерфейса за последние несколько лет — Почему вашей команде дизайнеров следует подумать о переходе на Figma

В прошлом году я использовал Figma в процессе проектирования UI / UX, и это сэкономило мне часы работы.Это действительно изменило мой рабочий процесс проектирования — Как оптимизировать рабочий процесс UI / UX с Figma

Мое время, проведенное в Figma, обычно является самой приятной и самой продуктивной частью моего дня — Figma меняет весь мой рабочий процесс, и это потрясающе!

• • •

Дополнительная литература:

Почему вы должны изучать Фигму ?. Figma — лучшее программное обеспечение для… | дизайнеров | DETAUX (Designers Talk UX)

Является ли Figma лучшим UI UX-инструментом для дизайнеров?

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

Figma не только захватила долю Sketch и Adobe XD, но и является одним из самых многофункциональных инструментов. Споры о Sketch Vs Figma Vs Adobe XD продолжаются всегда, но Figma, без сомнения, зарекомендовала себя как одна из лучших. Вот несколько причин, по которым вы должны изучить Figma: —

Как UI / UX Designer, важно сотрудничать с командой дизайнеров и получать отзывы для улучшения вашего продукта.Figma делает это еще проще, поскольку можно получить обратную связь от их команды, просто поделившись файлом своего проекта.

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

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

Простой пользовательский интерфейс Figma позволяет легко применять эти классные функции прототипирования.

Все ведущие фирмы в области технологий и дизайна перешли на Figma. Это потому, что это делает рабочий процесс плавным и быстрым. Такие компании, как Microsoft, Zoom, Uber, Airbnb, являются основными примерами, которые доверяют Figma.

И последнее, но не менее важное: Figma, будучи веб-приложением, не требует большого количества высокопроизводительных ноутбуков или ПК.Он может работать на любой платформе от Windows до macOS.

Он даже поддерживает другие платформы, такие как Linux и ChromeOS, что делает его одним из фаворитов среди дизайнеров. Простота и минималистичный подход Figma выделяют его среди конкурентов.

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

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

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

Чтобы узнать больше о UX / UI-дизайне, дизайн-мышлении, разговорном UX-дизайне и UX-дизайне виртуальной реальности, вы можете ознакомиться с курсами и учебными материалами, доступными на сайте Designerrs Lab.

Чтобы освоить Figma и изучить рабочий процесс проектирования Figma с нуля, ознакомьтесь с курсом Mastering Figma UI UX Design Tool от Designerrs.

Чтобы узнать о силе использования Figma, также ознакомьтесь с этим сеансом сообщества DETAUX, проведенным Луисом, адвокатом дизайна в Figma.

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

Первая в мире рабочая тетрадь по системам дизайна для Figma | Автор: Матеуш Вежбицкий

Хотите ли вы или ваша команда научиться создавать дизайн-систему для Figma с нуля?

Я получаю много запросов от менеджеров команд и таких людей:

Привет, Мэтт, готовы ли вы для любой внештатной работы? Нам нужна помощь в проведении аудита теории цвета для нашей системы проектирования и программного обеспечения Figma.Существуют определенные проблемы, поскольку это делали разные дизайнеры, и несколько частей не работают вместе. Мы пытаемся найти кого-то, кто хорошо разбирается в Figma, Design Systems и Color Theory.

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

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

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

figmaster.co — это рабочая тетрадь для Figma, которая содержит большой набор упражнений о том, как построить вашу современную систему дизайна с нуля .

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

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

В Figmaster вы узнаете, как создать дизайн-систему с нуля в Figma. Figmaster — это просто практика, поэтому вы можете сразу же начать использовать приобретенные знания.

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

В командной версии вы узнаете, как работать над дизайн-системой в команде и как подключить новых дизайнеров с помощью Figmaster. Я также поделюсь ресурсами, чтобы вы могли больше узнать о теории систем проектирования и почерпнуть вдохновение из существующих систем.

Мы будем использовать весь потенциал Figma, создав нашу Дизайн-систему с вариантами автоматической компоновки и .

Итак, если вы хотите научиться создавать дизайн-систему с нуля в Figma, это для вас.

Меня зовут Матеуш Вежбицкий , я дизайнер продуктов, специализирующийся на создании комплексных систем дизайна для Figma. К настоящему моменту я построил десятки систем, включая работу с клиентами и сторонние проекты. Я создатель Ant Design System для Figma, Product Design Kit для Figma и соучредитель SystemFlow.

Ознакомьтесь с тем, что мы будем строить здесь: https://figmaster.co

Мои продукты облегчают работу тысячам дизайнеров, разработчиков и предпринимателей. Как создатель многих систем дизайна и библиотек компонентов — , я хочу поделиться знаниями, которые я приобрел за четыре года использования Figma . В Figmaster вы узнаете, как создать систему, аналогичную упомянутой выше.

Видеокурсы — это нормально, и я использую их постоянно. Однако, когда я смотрю урок, я часто забываю большую часть того, что автор упомянул в длинном видео.Еще одна проблема — переключение между видеопроигрывателем и программным обеспечением, которое я изучаю. Меня это сильно отвлекает.
‍
Вот почему в Figmaster все делается в Figma — без перехода между сторонними приложениями / веб-сайтами, без приостановки видео и т. Д.

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

Инвестиции в Figma: Десятилетие дизайна

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

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

Это было десятилетие кода. Теперь мы переходим в десятилетие дизайна: в это десятилетие дизайн, а не только код, находится в центре разработки продуктов и успешных организаций. Такие компании, как Superhuman, Zoom и многие другие, меняют не только то, кто покупает и развертывает программное обеспечение и то, как мы работаем, но и наши фундаментальные ожидания относительно того, что такое отличный продукт.Помните QuickBooks 2010 года? Десять лет назад функция важнее презентации была правилом, поэтому вам нужно было руководство по рабочему процессу, чтобы просто следовать пользовательскому интерфейсу! Но теперь — в десятилетие дизайна — интерфейс больше не отражает код; скорее, код отражает дизайн . Мы ожидаем лучшего, мы заслуживаем лучшего, мы требуем лучшего … хороший дизайн больше не является обязательным.

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

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

Figma дает людям возможность участвовать в процессе проектирования и демократизирует дизайн, а также делает работу элитных дизайнеров более ценной. Я считаю, что он делает для дизайна и дизайнеров то же самое, что GitHub сделал для кода и разработчиков — не только делая дизайн более доступным, но и создавая открытое сообщество дизайнеров, в котором люди могут найти нужные им инструменты вместо того, чтобы изобретать колесо с нуля каждый раз. время. В прошлом предпринимались различные попытки (от Dribbble до Creative Market) объединить дизайнеров и их портфолио в сообщество; однако ресурсы дизайна находились на жестком диске дизайнера, что ограничивало возможность людей расширять творения друг друга открытым (и лицензируемым) способом.Когда система обладает такого рода «компонуемостью», она создает новые строительные блоки, новые комбинации и новые типы творцов, которые теперь могут визуально общаться друг с другом как внутри, так и между организациями.

Когда я впервые услышал о Figma пять лет назад, я был впечатлен четким видением основателей Дилана Филда и Эвана Уоллеса и их стремлением создать платформу веб-дизайна (которую тогда другие окрестили «Документами Google»). дизайн »), чтобы добавить в дизайн функции общения и совместной работы в реальном времени.Генеральный директор Дилан и технический директор Эван проработали пару лет в Brown в отделе информатики, прежде чем Дилан бросил учебу, чтобы получить стипендию Тиля (а затем потратил время на разработку продукта в Flipboard). Затем они вместе исследовали различные возможности, прежде чем поняли, что интерфейс — это все и где он находится.

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

Почему это произошло в кажущейся зрелой, уже обслуживаемой категории? Потому что другие инструменты (такие как InVision, Sketch, Illustrator и другие) предоставляли только отдельные части всей головоломки продукта. Там, где в других инструментах было одно целое, они упустили возможность совместной работы; или у них была замкнутая экосистема. Кроме того, есть проблемы, связанные с совместным использованием файлов, управлением версиями, цепочками утверждений, конфликтами синхронизации и т. Д. — как можно сотрудничать, не говоря уже о создании новых компонентов и ресурсов, с помощью всего этого ручного подключения? Я не понаслышке знаю силу того, что происходит, когда вы делаете такие рабочие процессы намного проще для совместной работы.

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

С момента запуска в декабре 2015 года на Figma зарегистрировалось более 4 миллионов пользователей. И вскоре после того, как они запустили свою платформу плагинов прошлым летом, для этой платформы было создано более 700+ сторонних плагинов с более чем 3M установками плагинов. Мы слышим о Figma, которым пользуются все из таких дизайнерских компаний, как Airbnb, Spotify, Twitter и других; устоявшимся технологическим компаниям, новым и старым, таким как Dropbox, Google, Microsoft и Uber; и другими игроками отрасли, такими как British Telecom и Goldman Sachs.Город Чикаго тоже использует Figma для открытого проектирования и расширения своей команды из-за нехватки ресурсов. И все это не включает в себя бесчисленное количество людей, делающих необходимые и творческие вещи с помощью Figma. Ранее в этом году Figma провела свою первую пользовательскую конференцию Config, цель которой заключалась в содержательном обсуждении дизайна, личном общении сообщества и многом другом. Речь шла не только о том, чтобы слушать доклады и презентации, но и об участии в коллективном обсуждении и участии в нем, сосредоточенном вокруг темы «открытого дизайна» — давно используемой в инженерии, но новой для дизайна.

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

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

Мнения, выраженные здесь, принадлежат отдельному лицу AH Capital Management, L.L.C. («A16z») цитируется и не является точкой зрения a16z или его аффилированных лиц. Определенная информация, содержащаяся здесь, была получена из сторонних источников, в том числе от портфельных компаний фондов, находящихся под управлением a16z.Хотя a16z взят из источников, которые считаются надежными, он не проверял такую ​​информацию независимо и не делает никаких заявлений о неизменной точности информации или ее пригодности для данной ситуации. Кроме того, это содержимое может включать стороннюю рекламу; a16z не просматривал такие рекламные объявления и не одобряет какой-либо рекламный контент, содержащийся в них.

Этот контент предоставляется только в информационных целях, и его не следует рассматривать как юридический, деловой, инвестиционный или налоговый совет.По этим вопросам вам следует проконсультироваться со своими советниками. Ссылки на любые ценные бумаги или цифровые активы предназначены только для иллюстративных целей и не представляют собой инвестиционную рекомендацию или предложение об оказании инвестиционных консультационных услуг. Кроме того, этот контент не предназначен и не предназначен для использования какими-либо инвесторами или потенциальными инвесторами, и ни при каких обстоятельствах на него нельзя полагаться при принятии решения об инвестировании в какой-либо фонд, управляемый a16z. (Предложение инвестировать в фонд a16z будет сделано только на основании меморандума о частном размещении, соглашения о подписке и другой соответствующей документации любого такого фонда и должно быть прочитано полностью.) Любые инвестиции или портфельные компании, упомянутые, упомянутые или описанные, не являются репрезентативными для всех инвестиций в автомобили, управляемые a16z, и не может быть никаких гарантий, что инвестиции будут прибыльными или что другие инвестиции, сделанные в будущем, будут иметь аналогичные характеристики или полученные результаты. Список инвестиций, сделанных фондами, управляемыми Andreessen Horowitz (за исключением инвестиций, для которых эмитент не предоставил разрешение на публичное раскрытие a16z, а также необъявленных инвестиций в публично торгуемые цифровые активы) доступен по адресу https: // a16z.com / investments /.

Представленные здесь диаграммы и графики предназначены исключительно для информационных целей и не должны использоваться при принятии каких-либо инвестиционных решений. Прошлые показатели не свидетельствуют о будущих результатах. Содержание актуально только на указанную дату. Любые прогнозы, оценки, прогнозы, цели, перспективы и / или мнения, выраженные в этих материалах, могут быть изменены без предварительного уведомления и могут отличаться или противоречить мнениям, выраженным другими. См. Https: // a16z.com / disclosures для получения дополнительной важной информации.

Как пользоваться Figma: основное руководство | by Ran (Reine)

Включает 4 быстрых совета, о которых вы могли не знать.

Фотография Меда Бадра Чеммауи на Unsplash

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

Войти -> Войти / зайти -> Начать проектирование

Это так просто.

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

После входа в систему вы должны увидеть эту страницу на своей домашней странице с этим боковым меню слева:

Снимок экрана, сделанный из личной учетной записи автора в Figma

Нажмите на знак «+» для опции «Черновики», и вы будут перенаправлены на:

Автор — это место для вашего прототипа Нажмите эту кнопку, чтобы выбрать кадр

В правой части экрана вы увидите следующее меню:

Итак, в зависимости от того, какой пользовательский интерфейс вы для создания прототипа выберите подходящий

Как только это будет сделано, рамка будет выглядеть следующим образом:

Снимок экрана, сделанный автором Вы можете перейти к изменению цвета фона на любые цвета, которые вы хотите

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

Добавьте различные формы и прочее в дизайн своей веб-страницы

Скажем, у нас есть что-то вроде этого (два кадра, один с кнопкой «Щелкните меня», а другой — пустая страница):

Скриншот автора

What если мы хотим перейти на fr ame 2 (Рабочий стол — 2) после нажатия кнопки?

Щелкните опцию «Прототип» прямо под кнопкой «Поделиться».Затем, когда ваша мышь наведется рядом с кнопкой «Щелкните меня», сбоку от кнопки появится небольшая круглая деталь. Просто щелкните этот маленький кружок и перетащите его в желаемый кадр (Рабочий стол — 2), например:

Снимок экрана, автор

Не стесняйтесь поэкспериментировать с «Подробностями взаимодействия», если хотите.

Самое замечательное в Figma то, что другие пользователи могут просматривать ваш прототип и редактировать его (для бесплатного уровня только два человека могут редактировать этот прототип). Просто нажмите «Поделиться» в правой части страницы, и появится следующее:

Снимок экрана автора

Наконец, вы также можете переименовать кадры в более подходящие имена, например:

Перед редактированием имен фреймов После редактирования имен фреймов

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

Итак, этот раздел состоит в основном из моментов, о которых я раньше не знал и узнал только после просмотра некоторых видеоуроков на YouTube.

1. Вы можете добавить градиент (или несколько цветовых наложений) к кадру или компоненту, добавив новую заливку.

Скриншот автора

2. Возможно, вы захотите добавить изображение (png / svg / и т. Д.), Которое вы скачали откуда-то в своем прототипе.Когда у вас есть изображение в папке, просто нажмите на изображение и перетащите его в желаемый кадр.

Скриншот автора Скриншот автора — Изображение баннера Разработано kjpargeter / Freepik

После небольшой настройки вы сможете правильно отображать изображение в кадре.

3. Использование точек останова — в демонстрационных целях я наложу простой прямоугольник на мою домашнюю страницу фрейма.

Снимок экрана автора

Если дважды щелкнуть синий прямоугольник и затем навести указатель мыши на край, мы увидим появление точек останова:

Снимок экрана автора

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

Снимок экрана автора

4.

No related posts.