Как и все большее число дизайнеров, я недавно начал использовать Figma для проектирования статического дизайна приложений. После нескольких часов работы в программе, я пришел к выводу, что она великолепна, но десктопный опыт на Mac можно было бы улучшить.
За последние 5 лет я спроектировал и разработал два собственных Mac-приложения: Blocs – визуальный конструктор веб-сайтов и Solis – браузер для дизайнеров и разработчиков. Мне нравится заводить небольшой сторонний проект на лето. С ним я могу возиться в промежутках между работой над Blocs и Solis. Короче говоря, я решил написать свое собственное десктопное приложение Figma, которое бы ощущалось на Mac, как родное.
Я собирался создать нативный Mac-браузер, исключительно для Figma. Я избегал делать что-либо, что потенциально могло навредить пользовательскому опыту Figma. Поэтому подключение к API Figma через JS или изменение интерфейса Figma с помощью встроенного CSS не рассматривалось мной с самого начала.
Название
Ранее я тратил месяцы, пытаясь придумать названия для приложений, обычно по дороге домой из офиса. Мне нравится, что я всего лишь добавил букву к концу и без того крутого названия продукта, но это сработало. Figmac – название, идеально подходящее для моего маленького проекта.
От веб-версии к декстопной
Figma, как мы все знаем, это веб-приложение. Это значит, что перенести его в собственное окно приложения было довольно просто, благодаря WKWebView (нативный компонент Mac Webkit, оптимизированный для производительности WebGL). Поскольку Blocs, и Solis используют WKWebView, я смог запустить основное приложение Figma в собственном окне менее чем за 30 минут. Все благодаря моему прошлому опыту работы с ним. Поскольку Figma также запускается в браузере (очень хорошо, надо отметить), при загрузке приложения в WKWebView, мы получили тот же пользовательский опыт, что и при использовании Figma в Safari.
MacOS Finder и файлы формата .fig
Когда я начал использовать Figma, первым делом я скачал из Интернета несколько примеров проектов, чтобы освоить приложение. Я сразу же заметил, что при двойном клике мышью по файлу .fig в Finder MacOS ничего не происходило. Официальное десктопное приложение Figma не распознавало свой собственный формат ?. Я понимаю, что Figma ориентирована на онлайн-управление файлами, но мне это показалось безумным. Итак, одной из первых функций, которые я добавил в Figmac, было распознавание формата файла Figma, а также возможность запускать и автоматически импортировать в MacOS Finder файлы с расширением .fig при двойном клике мышью.
Еще одна особенность файлов .fig, которую я заметил – отсутствие иконок файлов. Когда я сохранял проект Figma на Mac, у него не было легко идентифицируемой иконки файла. Добавление поддержки иконок в Figmac заняло всего несколько секунд. Поэтому теперь, когда я просматриваю файлы на моем MacBook, я могу с первого взгляда определить, какие из них являются файлами проекта Figma.
Нативные вкладки
Официальное декстопное приложение Figma поддерживает окна с вкладками, но на Mac они не очень удобны. Например, вы не можете просто перетащить вкладку из стека вкладок, чтобы создать новое окно. Со времени релиза MacOS Sierra добавление окон с вкладками в нативные приложения стало делом обыденным (при условии, что архитектура приложений предназначена для поддержки нескольких открытых проектов). Благодаря нескольким отмеченным флажкам, в конструкторе интерфейса Xcode, Figmac стал поддерживать окна с вкладками. Я подключил несколько методов Objective-C, чтобы поймать событие open project in new tab (WKWebview предлагает эту функцию). Так у Figmac появилась встроенная поддержка вкладок.
TouchBar
Официальное приложение Figma не поддерживает TouchBar. Нравится вам это или нет, но это одна из ключевых особенностей, выделяющая MacBook. Добавить его поддержку было сложно, так как я не мог вызывать функции в API Figma через JS, но, проявив немного творческой смекалки, я смог добавить в Figma поддержку TouchBar через Figmac.
Определение оффлайн-режима
Для Figma подключение к Интернету имеет решающее значение, поэтому я с удивлением обнаружил, что, когда сигнал Wi-Fi пропал, официальное десктопное приложение Figma не сразу сообщило мне об отсутствии подключения. Я получил уведомление примерно через 3-4 минуты. Лично я, хотел бы немедленно узнать, если мое соединение оборвется, когда я работаю в Figma. Поэтому я добавил в Figmac небольшой предупреждающий знак, который мгновенно отображается, если Интернет-соединение пропадает. Он довольно ненавязчив и появляется рядом с кнопкой справки.
Figmac в 88 раз меньше
Официальное приложение Figma использует Electron – кроссплатформенное решение для создания десктопных приложений с помощью веб-технологий. Среди пользователей Mac ведется небольшая дискуссия относительно Electron, причем некоторые считают, что оно разрушает Mac. Отчасти это связано с проблемами производительности и общим размером файлов приложений, созданных с его помощью.
Я не собирался использовать Electron и вместо этого написал Figmac с помощью Objective-C. Это дает много преимуществ, но, вероятно, наиболее привлекательным из них является размер файла приложения.
При установке на вашем Mac официальное приложение Figma занимает 132 МБ, в основном из-за того, что использует Electron. Figmac же полностью нативный, что значительно уменьшает размер файла приложения до 1,5 МБ. Это делает Figmac примерно в 88 раз меньше, чем официальное приложение Figma ?.
Но кого в 2019 году волнует размер файла приложения? Меня ?, потому что это меньше используемого дискового пространства на моих ноутбуках, и это потенциально меньше кода, нужного для запуска приложения. Если взглянуть на это с точки зрения бизнеса, то уменьшение размера вашего приложения в 88 раз также может немного снизить серверные затраты. Но, прежде всего, 1,5 МБ используемого дискового пространства на моем Mac в обмен на приложение, столь же мощное, как Figma, похоже на колдовство.
Безопасность
Я хотел, чтобы Figmac был максимально безопасным. Поэтому я разработал приложение для песочницы, а это означает, что оно не может получить доступ к каким-либо данным на Mac за пределами своего собственного выделенного контейнера. Я также принудительно установил все подключения к приложению по протоколу HTTPS с использованием технологии App transport security, включил службу Hardened runtime, и, наконец, проверил исходный код приложения с помощью сервиса нотариального заверения Apple. Что касается безопасности, Figmac использует все самые современные сервисы безопасности, доступные Mac-разработчикам.
Иконка приложения
Глазурь на торте любого Mac-приложения – это, конечно же, его иконка в Dock. Я не хотел, чтобы маркетинговые штурмовики Figma постучались в мою дверь, поэтому не использовал логотип Figma. Поскольку Figma в основном фокусируется на векторной графике, имело смысл использовать символ инструмента «Перо», но преобразование Mac-аспекта в иконку приложения (без ее визуального удешевления) было сложной задачей. Я искал вдохновение в сети, когда наткнулся на старый радужный логотип Mac из 80-х. Это заставило меня задуматься об уникальном многопользовательском аспекте Figma и о том, как они используют цвета для идентификации разных пользователей в проекте. Я почти сразу понял, что это ностальгический реверанс в сторону Mac, который я искал. Я добавил небольшой след радуги к символу пера, так появилась иконка приложения Figmac. Думаю, что эта иконка будет отлично смотреться на футболке ?.
Производительность
Очевидно, что производительность – это самый важный фактор, который будет учитывать конечный пользователь. Обеспечивает ли Figmac стандартную производительность для настольных ПК, или он лучше, или хуже, чем официальное приложение Figma? У меня не было времени по-настоящему проверить его, поэтому я не смог бы ответить на этот вопрос. Тем не менее, я обнаружил несколько интересных моментов.
Во время самого базового тестирования я заметил, что Figmac загружал проекты быстрее, чем официальное приложение Figma. У Figma есть несколько логов консоли, которые отслеживают скорость загрузки проекта, поэтому имеет смысл сравнить логи между официальным приложением Figma и Figmac. Я обнаружил, что почти всегда Figmac загружал крупные проекты, такие как шаблон Google Material Design, примерно за 0,7 секунды, в то время как официальное приложение Figma загружало их примерно за 1,10+ секунды (согласно логам). При этом Figmac медленнее завершает процесс [fullscreenIsReady] по сравнению с официальным приложением Figma, так что эти различия незначительны, поскольку со стороны их трудно заметить.
Должен также добавить, что частота кадров зума более плавная в официальном приложении Figma, так что похоже, что Electron как-то выжимает немного соков из GPU, или Apple ограничивает WKWebView, чтобы он не перегружал систему ?♂️.
Испытательный полет
Мне очень понравился Figmac, и я подумал, что он может заинтересовать других пользователей MacOS, поэтому я сделал небольшую целевую страницу для его распространения. В качестве реального испытания было целесообразно спроектировать эту целевую страницу, используя Figmac. В процессе макетирования сайта я не замечал проблем с производительностью. Казалось, что Figma работает через Figmac плавно и хорошо. После того, как я спроектировал сайт, я быстро встроил его в полностью закодированный сайт, используя Blocs – мой конструктор сайтов для Mac. Проект был завершен ?.
Мысли в заключение
Создавать Figmac было действительно весело, это был отличный способ вырваться из рабочей рутины и создать что-то новое просто для удовольствия. Я узнал много нового и наслаждался тем, как все части пазла встали на свои места.
Я надеюсь, что ребята из Figma не против Figmac, а также сравнения с их приложением. Надеюсь, я выделил несколько областей, которые команда Figma изучит и рассмотрит в будущем.
Одно можно сказать наверняка, я люблю Figma, но теперь у меня есть Figmac, И я люблю его чуточку больше! ✌️
В дальнейшем
Если вы хотите отслеживать развитие Figmac, вы можете подписаться на аккаунт приложения в Twitter.
Перевод статьи Norm
Топ коментарі (0)