Хабрахабр

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Если же вы работаете не только с открытыми 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 лучше.

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

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть