Онлайн-сервис Figma: все, что нужно знать разработчику
Figma – онлайн-приложение для разработки пользовательского интерфейса. Данный сервис стремительно набирает популярность во всем мире. В отличие от большинства дизайнерских приложений, Figma – бесплатный онлайн-сервис, который предоставляет доступ к проекту с любого устройства и тем самым значительно упрощает процесс разработки. Эта статья предназначена для разработчиков, которые имеют базовое представление о дизайне и хотят узнать обо всех аспектах работы в сервисе Figma.
Даже если вам еще не приходилось работать на платформе Figma, название этого сервиса вы наверняка уже слышали. Figma – относительно новое онлайн-приложение. Это означает, что вам не нужно устанавливать его на свой компьютер, и не нужно оплачивать дорогостоящую лицензию за предоставление общего доступа к файлам проекта.
Поскольку большинство разработчиков не имеет серьезного опыта работы с дизайнерскими приложениями, мы рассмотрим все аспекты Figma, которые нужно знать программисту для уверенного использования данного сервиса и получения всех необходимых данных об элементах пользовательского интерфейса, над которыми работает дизайнер. Я также затрону те опции Figma, которые предоставляют разработчику нужную информацию о CSS стилях, использованных в дизайне интерфейса.
Примечание о сочетаниях «горячих» клавиш
Содержание статьи:
В большинстве случаев сочетания «горячих» клавиш будут указываться одновременно для операционных систем Windows и macOS. При этом клавиша Ctrl для Windows соответствует клавише Cmd в macOS, а клавиша Alt в Windows аналогична сочетанию клавиш Option/Alt в macOS. Например: Ctrl/Cmd + Alt + C соответствует Ctrl + Alt + C для Windows и Cmd + Alt/Option + C для macOS.
Совместная работа над дизайном
Чтобы понять, почему появление сервиса Figma было встречено с таким энтузиазмом, и почему всем разработчикам внезапно понадобилось понимание дизайнерского процесса, обратимся к тем временам, когда этой платформы еще не существовало.
В те времена дизайнеры обычно общались с командой разработчиков с помощью электронной почты. Программисты получали десятки сообщений с массой вложений, среди которых были элементы дизайна, экспортированные ресурсы, или даже Word-документы со скриншотами страниц будущего сайта.
Разработчики, как правило, не имели доступа к полноценным исходникам – поскольку лицензии на дизайнерские приложения стоили очень дорого, а непосредственное участие программистов в процессе создания интерфейса не считалось необходимым. Обсуждение дизайна происходило разрозненно – по электронной почте, в системе управления проектом, в заметках к совещаниям. Всем участникам было сложно отслеживать прогресс в создании дизайна. При внесении любых изменений нужно было поставить в известность всех участников – и так по кругу.
По мере совершенствования дизайнерских приложений подобный рабочий процесс начал упрощаться. Дизайнеры начали использовать Zeplin и Invision для вовлечения разработчиков в обсуждение создаваемого интерфейса. Разработчики наконец-то получили полноценный доступ к дизайнерским материалам для извлечения данных об использованных цветах, шрифтах и параметрах элементов. Однако, несмотря на то, что доступ к актуальной версии дизайна стал открытым, дизайнерам по-прежнему приходилось работать в нескольких отдельных приложениях и прилагать усилия для синхронизации конечного результата. Такая схема работы была все еще далека от идеала.
Дизайнерский сервис Figma произвел очередную революцию в совместной работе над дизайном. Figma работает в браузере, не зависит от типа операционной системы, не требует установки. Кроме того, это облачная платформа – благодаря этому совместная работа и обсуждения теперь выглядят проще, чем когда-либо прежде, и всем участникам рабочего процесса доступна самая последняя версия создаваемого дизайна.
При написании данной статьи я пользовался этим руководством, оно пригодится и вам для понимания всего, о чем пойдет речь далее.
Начало работы в Figma
Когда вас добавляют в участники проекта, реализуемого с помощью сервисе Figma, у вас будет выбор – открыть приложение в браузере или скачать его десктопный вариант для операционной системы macOS или Windows. Десктопное приложение является кроссплатформенным (как мессенджер Slack или среда разработки Visual Studio Code).
Функциональность браузерной и десктопной версии приложения Figma примерно одинакова. Десктопное приложение, к примеру, имеет встроенную поддержку для установленных шрифтов, а браузерный вариант для использования таких шрифтов потребует установки плагина Figma Font Helper.
Интерфейс Figma разделен на три основные части. Посередине располагается обширный холст со всеми элементами дизайна. Слева находится панель доступа к слоям, ресурсам, страницам файла. Правая панель демонстрирует всю информацию об элементах дизайна.
Файл может состоять из нескольких страниц; каждая страница включает в себя один холст. Дизайнеры часто используют страницы для группировки элементов проекта по типам, например, выделяют отдельные страницы для системных уведомлений, иконок и так далее.
Когда вы впервые открываете новый проект в Figma, внимательно изучите все страницы файла. Если дизайнер сгруппировал цвета, шрифты и иконки на отдельных страницах – это сэкономит вам массу времени при разработке.
Интерфейс Figma
Разделы сервиса Figma
Прежде, чем мы перейдем к изучению функциональности платформы Figma, важно уделить время изучению интерфейса – это сделает вашу работу в Figma более эффективной.
- Когда вы открываете файл, максимальный режим увеличения обеспечивает вывод всех разделов на видимую область экрана.
- Увеличить или уменьшить масштаб рабочей области можно одновременным удерживанием Cmd ⌘ и прокручиванием вверх / вниз, либо с помощью нажатия клавиш + и -.
- Для горизонтальной прокрутки холста нужно одновременно нажимать на пробел и «протаскивать» холст мышью.
- Быстро увеличить отдельную секцию или элемент можно путем выбора необходимого объекта и нажатия комбинации клавиш Shift — 2.
- Мгновенно вернуться в масштаб, при котором на холсте видны все элементы, можно с помощью комбинации клавиш Shift + 1.
Как проверить сайт на ошибки онлайн?
Не переживайте по поводу запоминания этих клавиатурных комбинаций – вы всегда сможете просмотреть эти и другие сочетания, нажав Cmd — Shift — ?
После использования комбинации «горячих» клавиш, соответствующее сочетание подсвечивается голубым цветом – так сразу же можно увидеть, какие еще команды стоит запомнить.
Стили в проектах
При открытии нового проекта в Figma полезно, прежде всего, определить основные стили. Figma показывает все стили проекта в правой панели. Здесь вы cможете сразу же найти все шрифты, цвета, размерные сетки и другие стили, использованные в дизайне.
Обратите внимание на то, что полный список стилей проекта выводится в том случае, если не выбран какой-то конкретный элемент. Если вы хотите отменить выбор элемента и вернуться к просмотру всех стилей проекта, достаточно кликнуть по любому участку холста или нажать клавишу Esc на клавиатуре.
Информацию о стилях можно использовать в процессе верстки, для создания CSS-кода. Для просмотра подробных сведений о стиле нужного элемента нажмите на иконку редактирования, расположенную рядом с ним.
Просмотр и редактирование стиля элемента
Выбор элементов
После определения основного стиля проекта пора переходить к более глубокому изучению дизайна. Самое главное при разборе дизайна – выбрать нужные элементы для получения информации об их размерах и стиле.
Выбор нужного слоя – не такое уж простое дело, поскольку в большинстве случаев дизайн состоит из множества вложенных слоев. Простое нажатие на элемент выделяет только самый верхний слой.
Для выбора нужного слоя следует кликнуть по слою, удерживая нажатой клавишу Command ⌘, или кликнуть по элементу правой кнопкой мыши и выбрать необходимый слой из контекстного меню.
Редактор кода онлайн – 7 лучших бесплатных инструментов
При последовательных двойных кликах по элементу каждый раз будет открываться уровень, расположенный под видимым. Таким образом тоже можно добраться до нужного слоя. Есть и другие способы просмотра и выбора уровней и объектов – они рассмотрены в официальной документации Figma.
Когда доберетесь до нужного элемента, кликните по вкладке Code («Код»), доступной в правой панели для просмотра подробной информации о CSS стилях.
Следует заметить, что CSS-стили создаются автоматически и могут содержать определенные погрешности – особенно это касается расположения элементов. Эти стили не стоит бездумно копировать, их используют в качестве черновика, источника направляющей информации.
Размеры элементов и расстояния между ними
Если вам нужно измерить расстояние между элементами, правильно расположить объекты, задать границы или отступы – достаточно выбрать нужный элемент, нажать Alt и провести мышью по направлению к объектам, расстояние до которых необходимо измерить.
Измерение расстояния между элементами
Figma отмечает расстояние между объектами красной линией и показывает значение в пикселях. Если вам нужно измерить расстояние до вложенного элемента, или другой группы, или раздела – нажмите Cmd ⌘, как и при выборе объекта.
Экспорт элементов дизайна
В прошлом за экспорт элементов отвечали дизайнеры – поскольку у большинства разработчиков не было доступа к графическим редакторам. В сервисе Figma у разработчиков есть полный доступ ко всем аспектам дизайна, в том числе к экспорту.
Подготовка к экспорту
Первое, что нужно сделать перед экспортом объектов – пометить элемент как экспортируемый. Для этого выделите нужный элемент и нажмите на «плюс», расположенный в правой панели, рядом с заголовком Export(«Экспорт»).
Как определить шрифт на сайте – 5 лучших онлайн сервисов
В зависимости от типа файла, который необходимо экспортировать, настройки будут отличаться. Для изображений, к примеру, предусмотрен только выбор масштаба и формата – PNG, JPG, SVG или PDF. В качестве имени файла Figma использует название слоя, при желании вы сможете добавить расширение. После этого элемент можно будет сохранить, нажав на кнопку экспорта.
Совет: элемент можно быстро экспортировать, если кликнуть по нему правой кнопкой мыши и выбрать из появившегося меню опцию «Копировать/вставить». Таким образом можно скопировать изображение или SVG-код. Подобный подход позволяет быстро сохранять элементы, не заходя в настройки экспорта.
Экспорт всех элементов
Элементы можно экспортировать не только по одному, но и все сразу. В последнем случае нужно перейти в главное меню и нажать «Экспорт» в меню «Файл». Также можно использовать комбинации клавиш Shift + Cmd + E в MacOS и Shift + Ctrl + E в Windows.
В результате этого действия вы получите список всех элементов, подлежащих экспорту. Вы сможете проверить размеры, форматы и снять отметки с файлов, которые вам не нужны. Если вы наведете курсор мыши на миниатюру экспортируемого элемента, то увидите имя, которое будет присвоено файлу в момент сохранения.
Если нужно внести изменения, нажмите на миниатюру – это приведет к выделению элемента на холсте, где вы с легкостью сможете настроить параметры экспорта.
Если количество экспортируемых элементов слишком велико для одного файла, можно использовать «/» в имени слоя для выделения объектов в отдельную группу. Figma автоматически создаст папку для этой группы и экспортирует элементы папки в качестве поддиректории.
Переходы и анимация
Figma предоставляет целый ряд анимационных эффектов для перехода между состояниями или страницами, для открытия разделов или меню, для жестов на мобильных устройствах и так далее. Вы можете просмотреть доступные эффекты в режиме «Презентация», нажав на кнопку воспроизведения, размещенную в левом верхнем углу.
Для просмотра информации о конкретном эффекте, выберите вкладку «Прототип» в правой панели и вы увидите схему работы, выделенную голубыми стрелками. Нажатие на стрелку выводит подробную информацию о каждом эффекте, состоящем из триггера, действия и перехода.
Анимация мобильного меню
Эта простая анимация сопровождает открытие гамбургер-меню. Как вы можете видеть, у иконки меню-гамбургера есть триггер On Tap («при нажатии»), событие запускается после «тапа» и приводит к экрану Navigate To («перейти к»), на котором меню находится в раскрытом состоянии. В качестве типа перехода используется Smart Animate – в режиме «умной анимации» Figma автоматически рассчитывает переход между двумя состояниями. Для расчета используется плавное разворачивание Ease Out продолжительностью в 300 мс.
Эта информации необходима для точного воспроизведения анимации в CSS, но в отличие от данных по другим элементам дизайна, вкладка «Код» не предоставляет расшифровки процесса.
Общение и обсуждение проекта
Если какие-то аспекты дизайна остаются неясными и нужно задать вопрос для прояснения ситуации, достаточно просто кликнуть по иконке беседы, доступной на верхней панели (или клавишу С).
После этого вы сможете нажать на любой элемент дизайна и написать свой вопрос или комментарий. После написания вопроса нажмите на клавишу V, чтобы вернуться к обычному курсору.
Обратите внимание на то, что не все участники проекта получают автоматические уведомления о новых вопросах и комментариях. Если вам необходимо убедиться в том, что комментарий увидят те участники, которым он предназначен, используйте символ @, точно так же, как это делается в Slack и социальных сетях.
Все опубликованные комментарии будут видны каждому, у кого есть доступ к проекту – личные беседы не предусмотрены. После того, как вопрос будет успешно решен, его можно будет отметить как решенный, после чего цвет ответов и комментариев станет серым.
Заключение
Мы рассмотрели все основные принципы работы в Figma – теперь вы знаете, как ориентироваться в файлах проекта; получать нужные данные о шрифтах, цветах, расстояниях между объектами; экспортировать элементы дизайна; общаться с коллегами.
Если вам нужны дополнительные сведения о функциональности рассмотренного нами сервиса – обратитесь к официальной документации Figma, в которой содержится максимально подробное описание всех возможностей платформы.
Источник: www.internet-technologies.ru