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


    Если вы работаете в области web-разработки, то рано или поздно, вам суждено будет познакомиться с 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 нажать на элемент, расстояние до которого необходимо узнать, но это не всегда работает.


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

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

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


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

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

    • Также сталкивался с забавными случаями, что во вкладке Code написано к примеру:

      font-family: Roboto;
      font-style: normal;
      font-weight: normal;
      

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



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

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


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



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




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



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



    Figma является облачным продуктом

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


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

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



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



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

      color: #000; opacity:0.49;

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

      color: rgba(0,0,0,.49);

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


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



    Отсутствие нормальной Темной темы

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

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


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



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


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


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


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


    Сделаем web лучше.

    P.S. Отдельное спасибо, дизайнерам, которых я доставал дурацкими вопросами, но они на них стойко отвечали, и пользователю AWG-RU за пост Правила подготовки макетов в Figma
    Share post

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 41

      0
      ленивый верстальщик с шестнадцатеричного представления цвета скорее всего перейдет к rgba представлению

      Вы не представляете, каково андроид разработчику, rgba уже не прокатит, приходится руководствоваться такой табличкой online.sfsu.edu/chrism/hexval.html

      Да, и больно действительно с именами)
        +1
        Да, это вы еще дизайнов под мобильные в фигме не видели! Для вэба хоть css представление есть, а тут — тихий ужас!
          +1
          О, самое страшное, что я видел в Фигме — дизайн интерфейса для компьютерной игры и внутриигрового магазина. Я не знаю каким молотком надо втолковывать, что большинство свистоперделок «для веба» не катят и не поддерживаются почти нигде кроме веба :)
            0
            Скорее всего, ваш дизайнер вам не доверяет, и вы получите от него макет с правами “read-only”, что б ничего там не поломали.
            Плюс каждый лишний редактор стоит денег.
              +8
              Забавно что в большей части замечаний виноват неопытный/ленивый дизайнер, а не продукт. Но почему-то виноват в этом продукт. Точно также можно не обрезать фон в фш, точно также можно косячить с именами, масками и прочим. Гхкм.
                –3
                Можно, косячат. Просто реже. Там, как-бы ещё на этапе получения макета это всё будет видно и дизайнер сам такое не отдаст в работу. Про «неопытный/ленивый дизайнер» я не согласен, в Фигме такое случаться и с опытными дизайнерами которые уж совершенно, не ленивы.
                Лично мое мнение по этому вопросу — Это из-за неправильно подобранных размеров и цвета шрифтов элементов панели управления. (они тут слишком маленькие и невзрачные) Опять же, блок со слоями перебросили на левую сторону монитора (в отличие от того же ФШ, по умолчанию). Шрифты и их контрастность как бы не отвлекают от процесса создания дизайна, но при этом и внимания на себя не заостряют когда необходимо, что-то проконтролировать.
                –2

                Веб-версия достаточно прожорлива: 16 Гб RAM минимум :(

                  0
                  Лол. У меня всего 8гб озу, конкретно сейчас с хромом вкладок на 50 и вин10 забито 5.3гб. И в таком же режиме я сидел в фигме и все работало прекрасно. Не знаю, откуда данные, что там надо 16гб.
                  –2

                  Figma ужасна — один плюс, что бесплатна. Как упрощённый Sketch она годится, но не более. Кому вообще может в голову прийти всерьёз работать в броузере? Своя ниша у неё есть, но очень узкая.


                  Sketch тоже не шедевр, о его багах и недоработках можно длинную статью писать. Чего стоит одна несовместимость форматов, скажем, 51й и 54й версии — это ж нонсенс.


                  Однако, в отличие от хипстерской поделки Figma, тянущей на себе все ограничения броузера, в Sketch можно как-то работать… и в Adobe.* можно… в Lunacy можно, если надо под Windows и нет возможности запустить виртуалку.


                  Кстати, кто-нибудь сумел запустить 54-й Sketch под VMWare?

                    +3
                    Кому вообще может в голову прийти всерьёз работать в броузере?

                    А вы точно её хотя бы смотрели? У фигмы есть клиенты для мака и винды, и в браузере серьезно никто не работает, но как вариант срочно зайти посмотреть\поправить что-то вне рабочего места — то что нужно.

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

                      Уточню: клиенты под разные ОС — это всего лишь врапперы для веб-приложения, а не полноценные приложения написанные полностью на системных яп.


                      По поводу распространенности — фигму банально не нужно инсталлить, а человеческая лень сделает все остальное

                        0

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


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


                        У Фигмы киллер-фич две: импорт из Скетча и многопользовательская работа. Но первая уже работает не всегда, спасибо Скетчу, что постоянно ломает формат, а вторая — тонкая штука, которая далеко не всем нужна.


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

                          0
                          Как только Адоб допилит свой XD, Figma вымрет за ненадобностью, как и десятки сайтов для создания мокапов и прототипов до неё.

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

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


                            По моему поздно, Адоби уже прошляпила этот рынок, Fireworks купленный с Макромедией они развивать не пожелали, а XD запустили слишком поздно. Я сам активно юзаю последний — и он меня жутко бесит тем, что разработчики игнорируют элементарные просьбы пользователей — ну хотя бы для примера возможность скрыть долбанную правую панель свойств, которая отнимает драгоценное место, до сих пор нет полноэкранного режима для Windows. Короче я склоняюсь к мнению, что Адоби уже ничего не спасет.
                      0
                      О этот экспорт картинок в разных dpi из андроид-макетов! Прописываем ручками названия файлов и папки для экспорта для каждой картинки. Хорошо, добрые люди написали плагин для андроид-студии, но это облегчает только отчасти. Figma полностью игнорирует просьбы разработчиков.
                      –1

                      А вот теперь за что мобильные разработчики не любят эту ФигНюму.


                      1. Она не умеет конвертировать размеры из PX -> DP, если переключаешься для работы с Android
                      2. Нельзя замерить расстояние между объектами.
                      3. Оно УЖАСНО конвертирует стили в решение для Android.

                      Вообще кто придумал это использовать вместо SketchApp + Zeplin?

                        +1
                        Вообще кто придумал это использовать вместо SketchApp + Zeplin?

                        Скетч только на macOS вроде работает, это является среьезным ограничением для большой массы людей.

                        Нельзя замерить расстояние между объектами.

                        Можно, необходимо выделить объект, нажать alt, навести курсор на другой объект.

                        Оно УЖАСНО конвертирует стили в решение для Android.

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

                        Кроме того, им можно написать о проблемах, они отвечают на почту, обещают баги править.
                          0
                          Можно, необходимо выделить объект, нажать alt, навести курсор на другой объект.

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


                          Скетч только на macOS вроде работает, это является среьезным ограничением для большой массы людей.

                          Zeplin решал эту проблему.


                          Не считаю, что за это можно серьезно критиковать

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

                        +1
                        Если вам попадались дизайнеры, которых не приучили именовать слои и правильно их группировать, а также делать стили и оставлять гайд для разработчиков, то причем тут инструмент?!!! Множество продуктовых команд по всему миру используют Фигму как для веб, так и для мобильных приложений. Я сама работаю в продуктовой команде, у разработчиков доступ «can view» на некоторых проектах и никаких проблем ни разу, с момента перехода на Фигму (2 года как).
                          0
                          и никаких проблем ни разу,

                          Я уверен что это не правда, или же с вами просто не хотят связываться. Как написано выше, все проблемы Фигмы, в принципе могут быть решены и верстальщиком, без привлечения дизайнера.
                            0
                            Ну да, вам лучше знать, что внутри нашей команды )) Можете спросить например, вот у кого-нибудь из команды компании Intercom, почему они в 2018 перешли со Sketch на Figma. Я могу дать названия и других продуктовых компаний, которые используют Figma.
                              0
                              И что? Её сейчас много где используют(а будут ещё больше, пока она останется бесплатной, и её не надо будет устанавливать. Думается мне, что бухгалтеры компаний в которых софт для работников покупается со мной бы сейчас согласились =) ). Это политика вашей компании такая, если бы продукт не был удобен, то его бы не использовали. В моей компании тоже дизайнеры больше предпочитают работать с Figma, а когда я прошу что-то сделать в PS или Illustrator то на меня смотрят как будь-то я глупость сморозил.
                                +1
                                В крупных продуктовых компаниях используют платную версию Figma, потому что дизайн системы, библиотеки компонентов и пр. Я ещё использую Photoshop и Illustrator, но не для дизайна приложений или платформ, где у меня от 30 до 200 артбордов может быть. Photoshop хорош для обработки растровых изображений, фотографий, создания классных растровых картинок, ну ещё лендинги можно там создавать. Illustrator хорош для других вещей. Ни Photoshop, ни Illustrator не дадут мне возможность создать интерактивный прототип для проверки простой логики и гипотез, а Figma и Adobe XD дают эту возможность. Да даже использование компонентов — это очень большой плюс, ускоряющий работу.
                                  +2
                                  А вы не пробовали спросить почему ?)

                                  Figma не является аналогом PS/AI, это продукты совершенно разного назначения. PS не умеет ничего из того, ради чего создавалась Фигма.

                                  1. Там нет компонентной системы и нормальной возможности повторно использовать компоненты между макетами (статичные Смарт-объекты это совсем не то).
                                  2. Там нет возможности наследовать стили от родительских проектов.
                                  3. Там нет совместного доступа.
                                  4. Там нет режима прототипирования.

                                  Там нет ничего для работы с проектами на 50-100 артбордов. И не должно быть, потому что PS — это редактор растровых изображений, а не сервис для разработки и прототипирования интерфейсов. Когда вы просите дизайнера сделать интерфейс в PS, это всё равно что попросить его рисовать макеты от руки в тетрадке или, скажем, вырезать из цветной бумаги: технически возможно, но бестолково, бессмысленно и абсолютно не технологично.

                                  В Фигме сейчас с плагинами можно создавать даже пакеты стилей (темы). То есть в 1 клик переключать темы по всему проекту (тёмная/светлая и др.) А в PS чтобы поменять цвет 1 базовой кнопки для 100 артбордов, нужно открыть все 100 макетов и руками перекрасить каждый экземпляр, да ещё потом экспортнуть всё заново. (Да, можно частично автоматизирвоать это экшнами/скриптами, но по сравнению с Фигмой это костыли).

                                  Я пользовался PS как основным граф. редактором лет 10, да и до сих пор пользуюсь для работы с растром. Могу даже изредка какой-нибудь сайтец набросать, если там много растровой графики (промо и т.п.). Но рисовать в PS интерфейсы после выхода Фигмы — не дай боже. Зачем?

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

                                  Я не идеализирую Фигму, в ней полно всяких заморочек (как и в любом другом редакторе). Но по темпу развития и специализации уже сейчас видно, что она становится стандартом индустрии. Люди слезают даже со Скетча, что уж про PS говорить. Adoby свой XD бесплатно раздавала и всё равно толком не забрала свою прежнюю дольку. Если кто-то и будет конкурировать с Фигмой в ближайшем будущем в области интерфейсов, то аналоги из того же поколения «CSS-based» редакторов. Типа Webflow или каких-нибудь гибридных решений с участием avocode, invisionapp и т.п. Но даже у них на данном этапе перспективы похуже, на мой взгляд. Фигма быстро движется и явно монополизирует нишу.
                                    0

                                    Простите, перекрасить кнопку — это либо смарт-объект либо вообще файл. Причём объекты отлично группируются в библиотеки.


                                    Но для интерфейсов скорее подойдёт Иллюстратор — и сто артбордов ему нипочём, и объекты в библиотеки можно группировать… вероятно, есть решения и для "быстрой смены тем". И файлы можно удобно линковать.

                                      +1
                                      Вы теоретически рассуждаете или пробовали сравнивать оба подхода (Фигма/Adoby) на объемных проектах? В моем случае эти аргументы отпали уже после 3-4 проектов в Фигме.

                                      Делать компоненты смарт-объектами/файлами по сравнению с Ф крайне неудобно: можно утонуть в состояниях и модификаторах. Банально, у вас есть компонент header, в нём зашит компонент nav-menu со ссылками. И есть макеты страниц (много), где в шапке выделены соответствующие родительские пункты меню (разные). Попробуйте собрать всё это на смарт-объектах так, чтобы получить полноценный экспорт в результирующих файлах. Я имею в виду, свободно менять типографику элементов меню из любого места, переключать в 1 клик состояния :hover и :active и т.п. для отдельно взятого пункта в отдельном макете. В таком духе:



                                      В Фигме, к слову, вы можете всё это ещё и показать интерактивно: потестить «живьём» нажатие кнопок, показать всплывание окон и оверлеев, поведение фиксированных элементов при скроллинге и др. — без необходимости экспортировать статику и собирать из неё потом что-то сторонними примочками).

                                      При атомарном подходе в PS у вас на нормальном проекте постоянно будут получаться смарт-объекты с 5-10 уровнями вложенности. Управлять ими адски геморройно. В сравнении:



                                      Опять же, с респонсивностью холста что? Ничего. Портировать какой-нибудь баннер под 20 размеров (привет, Яндекс.Директ и т.п.) придётся чуть ли не руками. А в Фигме вы делаете 1 компонент, потом тянете его как угодно — содержимое само «едет» куда нужно или выравнивается. Причем правки вносятся во все артборды сразу и экспорт всей пачки jpeg происходит в 1 клик. Вот вам такой «смарт-объект» (накинул в один компонент от балды случайных элементов из либы для демонстрации выравнивания):



                                      А теперь вносим туда 3 правки, примерно за 5 секунд:



                                      Сколько возни было бы со смартами, чтобы раскидать 3 правки на на 4 разноформатных артборда (не пропорционально, а респонсивно)?

                                      И это всё очень лишь мелкие частности. Их таких миллион.

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

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

                                      Повторюсь, обратно в ФШ/Люстру возвращаться не тянет ни на йоту. Хотя я тоже консерватор и тоже относительно долго от неё отбрыкивался :) Почти год присматривался, ковырял по вершкам. Но по факту Фигма действительно экономит уйму времени и энергии. Навскидку, процентов на 20 производительнее стал.
                                        0
                                        Делать компоненты смарт-объектами/файлами по сравнению с Ф крайне неудобно

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

                            Кто-нибудь пробовал InVision Studio? Было бы интересно увидеть сравнение.

                              0
                              Первоначальное впечатление +- то же самое, но есть тёмная тема) И чуть больше возможностей анимации
                              0
                              Большое спасибо автору, надо бы попробовать поработать с этим инструментом.

                              отличие от повседневных продуктов дизайна, будь то Adobe пакет (Photoshop, Illustrator, Adobe XD
                              — Кстати, XD ведь бесплатен. Я им пользуюсь уже более года и денег оно пока не просило)
                              0

                              Adobe XD лютое Г*, в браузере все глючит, размеры не точные, пиксели и PT перепутаны, экспорт ассетов нету, генерации и экспорта svg нету. Фигня по сравнению с Adobe XD намного лучше, интерфейс работает, удобный экспорт всего..

                                0
                                Что значит в браузере все глючит?
                                Насчет экспорта:
                                image
                                Там есть и экспорт SVG
                                  0

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

                                0
                                пробовал это г…, тихий ужас
                                  0
                                  // вы получите от него макет с правами “read-only”

                                  Каждый макет “read-only” можно одним кликом конвертировать в редактируемую копию.


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

                                  Обычно пользуюсь этим для экспорта некоторых кусков

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

                                    Как же горит от того, что в фигме нет возможности установки своих хоткеев. Частично совпадают с ФШ, но некоторые невероятно глупые, например: масштаб 100% — ctrl+0, серьёзно? Это очень востребованная функция (по крайней мере для меня) и ради неё я должен снять правую руку с мыши и нажать ноль или тянуть левую изгибая её лианой, это очень долго, а таких моментов в фигме много из-за чего рабочий процесс попусту растягивается.

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

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

                                    «… То ли лыжи не едут, то ли я ...»
                                    даже в ФШ с вектором комфортнее работать, чем в фигме. С растром манипуляций минимум, но тут ок, для этого есть другие редакторы, хотя переключение туда-сюда опять же время +горящий стул. Экспорт svg приходится вручную править, какие-то непонятные ненужные для веба свойства ротейты, клиппаты, трансформы, гугловский pagespeed на них матерится, типа оптимизируй, короче сомнительно указывать экспорт с лишними свойствами и отсутствием оптимизации в достоинства этого продукта.

                                    Ещё один жирный минус
                                    Нельзя панельки с инструментами открепить на второй монитор, в ФШ панельки всегда на втором и я вижу полностью десктопный макет, в фигме же постоянно отдаляешь, чтобы найти необходимый объект редактирования, находишь объект, крутишь колесо мыши, отредактировал, необходимо посмотреть на реальный результат, делаешь 100%, а если вспомнить моё 1 замечание это невероятно неудобно и долго, снова горящий стул.

                                    Моментов с неудобными изменениями и применениями свойств очень много, и главная проблема в том, что нет возможно это изменить, продукт имеет свою нишу и фишки, но он не позволяет работать действительно быстро и его ограниченность в визуализации заставляет дизайнеров делать +- одинаковые дизайны. Отличный инструмент для прототипирования, но не как не для разработки дизайн-макетов.
                                      0
                                      Как же горит от того, что в фигме нет возможности установки своих хоткеев. Частично совпадают с ФШ, но некоторые невероятно глупые, например: масштаб 100% — ctrl+0, серьёзно? Это очень востребованная функция (по крайней мере для меня) и ради неё я должен снять правую руку с мыши и нажать ноль или тянуть левую изгибая её лианой, это очень долго, а таких моментов в фигме много из-за чего рабочий процесс попусту растягивается.

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

                                      даже в ФШ с вектором комфортнее работать, чем в фигме.

                                      А чем работа с вектором в Фигме принципиально отличается от работы с ним в ФШ? Исходя из личного опыта в Фигме намного быстрее можно накидать пером шейпы и отредачить их + действия с манипуляторами. Всё же работа с вектором в Фигме больше напоминает Illustrator.

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

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

                                      Лично мне не хватает в Фигме точного инструмента для измерения расстояний с точностью до пикселя. В ФШ пользовался для этого прямоугольным выделением. В фигме можно создать квадрат и мерять с помощью него, но это не совсем удобно, конечно.
                                        0
                                        Согласен, функция действительно очень востребованная, но это скорее дело привычки. Специально для этого CTRL дублируется на клавиатуре с двух сторон, кстати вместо него для этого действия можно использовать Shift.

                                        Из-за ограниченного функционала приходится прыгать из фигмы в шоп и обратно, привычка привычкой, но создаёт путаницу и заставляет думать не о задаче а о том, что необходимо нажать, это раздражает. Из примеров: совсем недавно, несколько раз в шопе переключал каналы на зелёный, но думал о том, чтобы вкл/выкл сетку, а в фигме переключался между проектами, но думал о том, чтобы сделать масштаб 100%, в ФШ пытался сделать дубль объекта нажатием ctrl+d, в фигме пытался сделать дубль драгом мыши и alt, если отпускаешь alt, то тянется фигура и функция alt отменяется, таких моментов много.

                                        Про дубль ctrl тоже написал, насколько вам удобно нажимать большим пальцем левой руки на правый ctrl а мизинцем на 0? Мне абсолютно не удобно.

                                        А чем работа с вектором в Фигме принципиально отличается от работы с ним в ФШ?

                                        Привязка к пиксельной сетке; быстрое создание опорных точек в любом необходимом месте в готовой фигуре; быстрое создание вектора из примитивных фигур (прямоугольник, круг, треугольник,...); возможность редактирования параметров контура примитивных фигур даже после трансформации вектора (поворот, отражение, ...) и после объединения в один вектор (скругление прямоугольников, длина, высота); более удобная и быстрая работа с манипуляторами опорных точек отдельным инструментом, автоматическая корректировка параметра скругления углов согласно размеру редактируемой фигуры, а не та, что введена в поле, т.е. если прямоугольник по высоте 30px, то, при установке в поле скругления, параметра 18, в ФШ он автоматом изменится на 15, т.к. больше быть физически не может, а фигма оставит 18, что потом на вёрстке выливается в коллизии при рендере мозилой и эджем.

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

                                        Быстро по сравнению с чем? С фотошопом?
                                        Да, готов поспорить, что абсолютно любую задачу по проектированию и разработке макета интерфейса или веб-страницы я сделаю быстрее и точнее чем кто либо в фигме (конечно же, наверняка, есть люди действительно быстро работающие в фигме), конечно же нет смысла спорить, что при работе над одним проектом несколькими людьми однозначно выиграет фигма и демонстрация макетов для ФШ заставляет пользоваться другими ресурсами, но в остальном ФШ позволяет работать действительно быстро при надлежащем качестве исполнения задачи (но здесь проигрывает ФШ своей сильной привязкой к производительности железа)
                                        Взять например работу с градиентами
                                        ФШ- «A»- сверху настройки градиента, не вижу проблем: удобно и быстро редактируемый, выдаёт css
                                        банальное изменение цвета для обьектов
                                        «A»- сверху настройки цвета или даблклик по фигуре в слоях

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

                                    Only users with full accounts can post comments. Log in, please.