Как установить figma на mac os

Обновлено: 02.07.2024

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

За последние 5 лет я спроектировал и разработал два собственных Mac-приложения: Blocs – визуальный конструктор веб-сайтов и Solis – браузер для дизайнеров и разработчиков. Мне нравится заводить небольшой сторонний проект на лето. С ним я могу возиться в промежутках между работой над Blocs и Solis. Короче говоря, я решил написать свое собственное десктопное приложение Figma, которое бы ощущалось на Mac, как родное.

Я собирался создать нативный Mac-браузер, исключительно для Figma. Я избегал делать что-либо, что потенциально могло навредить пользовательскому опыту Figma. Поэтому подключение к API Figma через JS или изменение интерфейса Figma с помощью встроенного CSS не рассматривалось мной с самого начала.

Название

99% практики, реальные задачи от крупных компаний страны и шанс попасть на работу мечты.

Ранее я тратил месяцы, пытаясь придумать названия для приложений, обычно по дороге домой из офиса. Мне нравится, что я всего лишь добавил букву к концу и без того крутого названия продукта, но это сработало. 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, похоже на колдовство.

Безопасность

Иконка приложения

Глазурь на торте любого 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.

В этой небольшой статье я вас познакомлю с альтернативными клиентами Figma под macOS.

Часть дизайнеров, работающих на macOS в Sketch'е, хотели бы опробовать специфику работы Figma. Теперь у них есть такая возможность!

P.S. Я знаю, что тема не новая, так что учтите, что эта статья для тех, кто ещё не знаком с данными приложениями.

Преимущества приложения:

1. Маленький размер

Размер Figmac составляет всего 1,5 МБ, что делает его в несколько раз меньше официального приложения.

2. Поддержка Macs Touch Bar

Figmac поддерживает сенсорную панель macOS, что обеспечивает наибольшую продуктивность работы.

3. Поддержка вкладок

Figmac поддерживает собственные оконные вкладки MacOS.

4. Файлы .fig

Распознаёт и импортирует файлы Figma из Finder'а.

5. Быстрые клавиши

Импорт быстрых клавиш из оригинального приложения.

6. Моментальные уведомления

Уведомления на Figmac об отсутствии интернета приходят мгновенно.

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

Загрузка проектов происходит быстрее.

Преимущества приложения:

1. Тёмный режим

Тёмная тема, которая должна была быть в Figma с самого начала.

2. Поддержка шрифтов

Figgy поддерживает родные шрифты macOS.

3. Поддержка вкладок

Figgy поддерживает собственные вкладки macOS.

4. Изменения UI

Внесены изменения в читаемость текста, а также элементы меню и кнопок.

5. Поддержка плагинов

Присутствует поддержка плагинов для оригинальной Figm'ы.

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

Вы удивитесь, но все это не клиенты - а обертка вокруг вебвью.

Фигмак вообще не зашёл. Тут пишут, что работает быстрее, но лично у меня грузил средненьким проект минут пять. На половине просто крашился.
Ещё отсутсвие вкладок сверху немного сбивает, сложнее переключаться между страницами же.
И вот вообще вопрос: зачем нужны альтернативные клиенты при нормальном классическом? Просто меня классическое вполне устраивает

Чем лучше axure?

Фигма-то? Если на пальцах - фигма лучше для дизайна и fine tuning. Таких широких возможностей интерактивного прототипирования как в акшуре - в Фигме нет, но скорость дизайна в ней потрясающая.

С дизайном у меня беда, а вот прототипы порой простенькие делаю. Значит на акшуре и останусь :)

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

Что такое интерактивное прототипирование?

Какую производительноть вы имеете ввиду?

И зачем вам бесконечное поле (если я правильно понял, что имеется ввиду под полем) в Фигме, если она не тянет больше пары десятков холстов? А плыть интерфейс начинает уже на одном холсте с нуля.

Что такое интерактивное прототипирование?

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

Если же можно обойтись банальными кликами-переходами - сойдет и фигма.

Какую производительноть вы имеете ввиду?

Производительность самого приложения - фигма не тормозит. Очень странно, что у тебя такие глюки. Какова конфигурация компа? Что юзаешь - браузерку или десктопное приложение?

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

И зачем вам бесконечное поле

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

А зачем в протопипе, в смысле, не в дизайне, показывать интерактивность? Это когда дизайн и UX разные люди делают?

Комп у меня Core i7 2600K (3.8Ghz), 32GB RAM, без видеокарты (сомневаюсь, что видеокарта устранит лаг, скорее наоборот).

Использую десктопное приложение. Открыл один свой старый набросок - одна страница с парой-тройкой десятков элементов. Тупо размножил её до 24 страниц - и все, двигаю один элемент, он за мышкой на секунду отстает.

В итогде юзаю Adobe XD.

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

Прототип, дизайн и интерактивность - это три разные плоскости, которые могут пересекаться и которые несут разную пользу

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

Дизайн - ну наверное тут излишне распинаться

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

Это когда дизайн и UX разные люди делают?

Не обязательно, но иногда да. Лично я топлю за то, что интерфейсом и его юзабельностью должен заниматься один и тот же человек, а не два разных дизайнера (ui и ux)

Система Windows. Есть и Макбук Про, там Core i5 2.7Ghz, не лучше.

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

Кстати, попробуй XD - это почти полная копия Фигмы, бесплатный.

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

А вот как можно разделить интерактивность и дизайн - я совсем не понимаю. Это же неотъемлемая часть дизайна. Поэтому, я не понял, зачем тому, кто делает прототип (скелет), делать интерактивность.

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

У меня zero tolerance policy, исходя из которой подбираю железо. В фигме лаги очень редки и как правило являются следствием багов, которые исправляют. Так что кейс странный, советую всё же накатать заяву в саппорт, пусть не сидят без дела.

зачем тому, кто делает прототип (скелет), делать интерактивность

Ну хз, думаю это правильно и факт существования приложений вроде акшура тому подтверждение

Кстати, попробуй XD - это почти полная копия Фигмы, бесплатный.

как там с передачей дизайна в разработку? в свое время бросил ХД из-за недостатков в этом плане

Figma - это браузерное приложение со всеми вытекающими тормозами. Отрицать то, что figma тормозит просто тупо. Она точно не про производительность. Особенно в сравнении с нативными Sketch и XD. ред.

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

Ты какое-то злое, окно. Смотри у меня, модераторам пожалуюсь на сталкинг и полемику.

Щас бы оценивать производительность продуктов по его пользователям. Это как проводить опрос в интернете "Пользуетесь ли вы интернетом?" среди пользователей интернета. Те, кого производительность не устроила, те просто этим говном не пользуются.

Прямо сейчас верстаю макет среднего размера, сделанный в фирме, на топовом MacBook Pro 16''. И это просто пиздец, а не производительность. Тупо слайдшоу.

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

Ну давай, открой проект средней сложности запиши видео с экрана, покажи мне производительность.

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

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

Но все эти заморочки не нужны пока проекту не стукнет 100+ страниц с парой мегабайт текста (кто зачитывался электронными книгами - оценит объем текста)

«Поэтому, я не понял, зачем тому, кто делает прототип (скелет), делать интерактивность.»

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

Холст имеет ограничения по размеру. Когда делаешь реально большой проект, упираешься в края)

Каковы кстати ограничения? Еще не доводилось упираться просто, хотя херачу всю систему целиком на одной странице, как правило

примерно 170 000 х 170 000, если не изменяет память

Эээ а почему вообще альтернативные клиенты Фигмы есть на макоси? Под винду ожидаются?

Потому что, оказывается на системе работают, сюрприииз.

Потому что figma - это всего лишь сайт. Все клиенты - это всего лишь вкладочка браузера открытая во все окно.

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

Чем обусловлен такой хайп вокруг Фигмы? Тем более, когда есть XD. Со Скетчем все сложно - во-первых, для него нужен Мак, во-вторых, это совершенно другой интерфейс (по сравнению с Adobe). Зачем вообще пользователю Adobe (а это примерно 100% дизайнеров) переходить на Фигму, а не XD?

Зачем вообще пользователю Adobe (а это примерно 100% дизайнеров) переходить на Фигму, а не XD?

Я когда-то боготворил Адобу и всячески топил за нее. А фигму ругал и плевался. Теперь прибегать к программам адобы для меня сродни наказанию. Сам не замечаешь, как привыкаешь к удобству и скорости работы в фигме. В ней за час можно сделать то, что в адобе сделаешь за день. На это влияет целый комплекс важных мелочей:
- выделение (незаметный и игнорируемый момент, но невероятно важный)
- компоненты
- привязки (constrains)
- урезанный ненастраиваемый интерфейс, на который сначала люто злишься, а потом понимаешь, что 99% функций адобы были не нужны тупо
- совместная работа
- бесшовная передача дизайна в разработку

За ХД особо не скажу, я его пробовал достаточно давно и тогда он был смешной нефункциональной поделкой. Щас может что-то и изменилось, но фигма меня пока всем устраивает, на её рельсы я перевёл и перевожу своих клиентов - learning curve околонулевой и разработка, согласовка и передача дизайна происходит существенно быстрее, чем с другими инструментами.

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

Хз, не вижу в этом никакой угрозы. Разработчики фигмы творят с этим движком чудеса, и скорее не технологии ограничивают разработку той или иной программы, а умы самих разработчиков. Фигмачи так вообще внедрили принципиально иную парадигму работы с вектором - Vector Networks. Технология местами разочаровывает, но однозначно лучше на несложных иллюстрациях (что в принципе достаточно для UI дизайна - иконки там всякие, простенькие иллюстрации и формы и т.п.)

В закладки

Благодаря полноценной поддержке Apple Silicon, Figma на Mac больше не нужен эмулятор Rosetta, и приложение работает намного быстрее.

В закладки

Figma — простое решение для дизайнера, сложное решение для верстальщика

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

Самый неоспоримый плюс – халява

В отличие от повседневных продуктов дизайна, будь то Adobe пакет (Photoshop, Illustrator, Adobe XD … ), или Bohemian Coding (Sketch) эта программа условно бесплатная для пользователей. Разумеется за определенные финансовые вливания Вы получите дополнительные плюшки, но и без оных, продукт выглядит вполне достойно. Будем надеяться, что данная политика не поменяется, и правообладатели не начнут закручивать гайки. Аминь.

Наличие Мультиплеера

Для тех кто не в теме – это способность одновременно работать над одним проектом нескольким людям. И когда я написал одновременно, то это действительно так, я как верстальщик, вижу, как дизайнер(или даже дизайнеры) правят проект realtime прям на своем мониторе. Выглядит этот эффект как teamViewer. Дизайнер больше не хранит свои макеты локально, теперь это всё живет в облаках. Не нужно больше обмениваться скриншотами с менеджером, процесс создания проекта стал публичным, необходим только браузер с нормальной скоростью Интернета.

Задействован принцип кроссплатформенности

Стала не важна операционная система (Windows, MacOS, Linux) верстальщика и дизайнера. Они смогут работать над одним проектом без проблемы несовместимости ОС.

Удобные быстрые клавиши

Если вы уже привыкли работать с графическими редакторами посредством hot key для вас не составит труда быстро освоиться с новым функционалом.

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

Возможность работы с векторной графикой

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

Возможность создания компонентов

Да, для верстальщиков поясню, что в дизайне тоже есть компоненты. И им тоже даровано свойство Наследования (привет ООП). К примеру можно создать типовую кнопку, а потом “продублировать ” её по всем артбордам. И потом, когда от заказчика придёт желание перекрасить все кнопки в розовый горошек, это всё решается за пару кликов (разумеется, если дизайнер умеет данным свойством пользоваться)

Подключаемые плагины

В Фигме есть функционал настраиваемых плагинов, и их там довольно много.

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

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

Проблема с определением фактических размеров элементов и расстояния между ними

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

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

Перекрытие и заблокированные слои

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

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

Проблемы с текстом

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

а если открыть данный шаблон уже в режиме дизайнера, то уже можно наблюдать, что там Roboto Bold задействовано.

Семейство шрифта вроде ж одно и то, а только в процессе верстки его всё равно через свойство @font-face отдельно подключать надо, иначе эффекта как на макете не получить. И пока не затяните на свой проект, вы этого не узнаете (и можно долго играться со свойством font-width).

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

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

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

Тут правда у меня возникли вопросы, почему возле ползунков смены значения градиента разработчики поленились вывести хотя бы процент текущего значения, не говоря уже про угол направления градиента, и мне как верстальщику приходиться самому угадывать какое значение надо будет поставить в background: linear-gradient, а потом починить это через background-clip: text; Собственно свойство text-stroke в коде фигмы я пока тоже не встречал, хотя возможно это связано что оно ещё не во всех браузерах зеленое.

*Делитесь своими мнениями в комментариях, почему это может быть так сложно реализовать?

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

Работа в фигме расхолаживает дизайнера

Возможно, конечно, это лично моё субъективное мнение, но макеты, которые отдаются дизайнерами под верстку сайтов, ниже качеством по сравнению с макетами, выполненными в Photoshop или Sketch. (* я прям чувствую, что сейчас у кого-то подгорело)

Там дизайнер посчитал, что называть слои уже не имеет смысла. Пхх там ведь и так всё видно. Неважно, что при экспорте файлов у верстальщика будет Group1.jpg Group1(1).jpg….и т.д. Разберётся.
Там слои забыл объединять в группы, и что б нормально забрать картинку, как она выглядит, например, с наложенной маской, опять надо забирать на свой проект, и самостоятельно группировать.
Ещё классика, это вместо определенно цвета, использовать изменение свойства прозрачности (opacity) когда это целесообразно, и нет.

И ладно, если с текстом это ещё может нормально прокатить, ленивый верстальщик с шестнадцатеричного представления цвета

скорее всего перейдет к rgba представлению

А вот если дизайнер решит делать такую штуку к блоку элементов (там где про background-color, color, background: linear-gradient ….), при этом, половина элементов будет с прозрачностью, а вторая, нет, то тут можно во вкладку Code и не смотреть.

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

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

Лучше б конечно, чтоб за данный функционал отвечали те, кто пишет продукт

Личные попытки поставить Темную тему. (Windows 10, Chrome 76) были печальны.

*Возможно, у владельцев Mac-ов дела обстоят лучше. Делитесь в комментариях…

О том почему это важно и полезно можете посмотреть в презентации Тёмная сторона веба, Никиты Дубко Надеюсь что поправят. Всё-таки дизайнеры — тоже люди, и им тоже надо дать возможность комфортно работать 8 часов в сутки 5 дней в неделю.

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

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

Свежая версия Figma

Свежая версия программы Figma доступна на официальном сайте. Установить Figma на свой компьютер можно просто скачав exe файл (см. ниже).

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

Доступны для скачивания:

Ссылка, чтобы скачать Figma:

Узнавайте о новых шаблонах, а также других полезных материалах в группе Вконтакте

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

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