Природа и небоскрёбы
Вайб-кодинг be like
Realme меняет цвет
Цикложир в действии
Пранк с корзинками в Lidl
Эрго клавиатура

Инструмент: 10 причин отказаться от Sketch и перейти на Figma

Продуктовый дизайнер чат-бота Statsbot Владислав Пономаренко о преимуществах нового графического редактора.

Инструмент: 10 причин отказаться от Sketch и перейти на Figma

За последние три месяца Figma полностью выместил Sketch и Zeplin из рабочего процесса команды Statsbot. Расскажу, чем Figma так хорош и почему история с массовой миграцией дизайнеров из Photoshop скоро повторится. Только в этот раз в роли покинутого отеческого дома выступит не Adobe, а Bohemian Coding.

Просветление

Я очень люблю Sketch. В 2014 году мастер-класс Дмитрия Новикова из MacPaw познакомил меня с его чудесами, и с тех пор 90% моих процессов от рисования иконок и презентаций до вытачивания детальных макетов веб- и мобильных интерфейсов плавно перекочевали в Sketch. Авторитет Adobe дал трещину и начал осыпаться, пока её законные территории постепенно «отжимал» сильнейший.

Релиз Zeplin получил массу восторженных голосов: стоило показать фронтенд-разработчику, насколько улучшится его жизнь без лазаний в макеты и фраз вроде «Вась, скольку блюр у твоих хипстерских теней делать?», «Нарежь иконки, да под ретину», и он пускал скупую мужскую (иногда женскую) слезу.

Умение работать в связке Zeplin и Sketch стало стандартным требованием к дизайнеру интерфейсов.

За последующие пару лет рынок UI-инструментов расправил плечи и начал предлагать один продукт за другим. Даже Adobe засуетилась и выдала довольно сырой Adobe XD. Но уже на момент релиза он сильно отставал от существующих решений, и восторги с фанатской трибуны Adobe в духе «Ну сейчас-то мы вам покажем» поутихли.

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

И тут я познакомился с ним.

Figma объединил в себе всё лучшее, что происходило с миром инструментов UI-дизайна за последние несколько лет.​

Figma — это лучшие качества от Sketch, Zeplin и InVision в одном крутом продукте.

Чем так хорош Figma

Доступность

Figma работает в браузере и доступен на любой платформе (если вы уже работали в конструкторах страниц вроде Webflow или Tilda, проблем с адаптацией не будет).

Никаких дистрибутивов и приложений — нужно только зайти на figma.com, зарегистрироваться и начать работать.

Дизайнерам знакомо, что всё, что работает через браузер, — исключительно промежуточные звенья процесса, но не основная, «большая и серьезная» среда для работы. К этому нужно было слегка привыкнуть.

Инструмент: 10 причин отказаться от Sketch и перейти на Figma

Организация файлов

Все рабочие файлы хранятся в «облаке» и организованы простым деревом «команда → проект → файл». Поэтому больше никаких конфликтов копий, «залей в Dropbox», «не подгрузилось», «макеты в папке Company/Design/Web/New/3.0/Актуальное/Новая папка(5)» — в папку Drafts автоматически сваливаются любые новые файлы, не сохраненные в явном виде.

Командная работа

Идея коллаборативного рабочего потока «заражает» один продукт за другим и успешно демонстрирует, что это весело, задорно и полезно для процессов.

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

Инструмент: 10 причин отказаться от Sketch и перейти на Figma

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

Работа с макетами для фронтенда

Ты впускаешь разработчиков в свой Sketch-файл, а они там что-то меняют. «Не классно», — подумала тройка ребят из Турции и выпустила Zeplin, где фронтенд мог кликать на всё, что видит, не боясь внести изменения. Оставалось только постоянно загружать свежие версии макетов, проставлять теги и отвечать на комментарии.

И всё это я успешно забывал делать, за что получал лучи ненависти.

Спасением стал Figma, в котором весь Zeplin заменила индивидуальная настройка прав: приглашаешь разработчика в проект, назначаешь ему статус «read-only» и отпускаешь в свободное плавание: он радостно копошится в макетах, смотрит цвета, размеры, отступы, отковыривает ассеты и предается прочим утехам.

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

Комментарии

Для обсуждения макетов не приходится никуда «отбегать», вся обратная связь собирается на месте и здесь же комментируется.

Инструмент: 10 причин отказаться от Sketch и перейти на Figma

Контроль версий

Выгрузка в Dropbox всегда была неидеальна и часто порождала проблемы с конфликтом копий и путаницу с поиском актуальных версий. Для Sketch постоянно появляются варианты Git для дизайнеров — например, Abstract.

В Figma же контроль версий нативный и простой: вы видите, кто вносил изменения, ��огда, и «откатываетесь» до версии в пару кликов, перезаписывая или создавая копию макета.

Инструмент: 10 причин отказаться от Sketch и перейти на Figma

Редактор кривых

В Figma  лучший редактор кривых.

Инструмент: 10 причин отказаться от Sketch и перейти на Figma

Чем меня однажды «купил» Sketch, так это приятной работой с кривыми. После Photoshop с его топорным Pen Tool рисовать векторные иконки в Sketch было исключительным удовольствием.

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

  • Точки можно бесконечно соединять с другими, что дает возможность делать сложные шейпы.
  • Удаление точки на кривой не приводит к разрыву шейпа и исчезновению заливки — соседние точки компенсируют прежнюю форму.
Инструмент: 10 причин отказаться от Sketch и перейти на Figma
  • Можно менять заливку отдельных частей шейпа, образованных пересечениями кривых.
  • Линии можно двигать.
  • Точки — тоже, и их положение повлияет на соседние.​
Инструмент: 10 причин отказаться от Sketch и перейти на Figma

Описание всех чудес Vector Networks можно найти в публикации техдиректора Figma Эвана Уоллеса. Удивительно, сколько вдумчивой работы было проделано при создании этого инструмента.

Сетка, layout и «резина»

Принципы изменения размеров можно задавать отдельно для ширины и высоты группы, чего раньше не хватало. В Sketch есть выпадающий список: Stretch → Pin to Corner → Resize object → Float in space. Мне трудно сразу определить, что выбрать, чтобы инструмент (Resize) работал так, как мне нужно.

Инструмент: 10 причин отказаться от Sketch и перейти на Figma

В Figma это работает и выглядит интуитивнее. Привязка «потомка» к стороне или размеру «родителя» происходит в один клик. Зависимости для объекта или группы можно задавать только от размера Frame, а не родительской группы.

Frame — не то же самое, что и Artboard в Sketch. Frame можно создать внутри другого фрейма, поэтому его стоит воспринимать просто как «прокачанную» группу, а не отдельный экран. К этому нужно привыкнуть.

Четырёхколоночная сетка с фиксированными отступами
Четырёхколоночная сетка с фиксированными отступами

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

Layout Grid. Настройки сетки всегда перед глазами, в отличие от Sketch, где нужно заходить в меню, вызывать «модалку» и, пока вы настраиваете колонки, макет недоступен для редактирования. Кстати, фреймы «липнут» к краям колонок и масштабируются вместе с ними, соблюдая сетку и отступы.

Компоненты

Те же Symbols в Sketch, но не совсем они. Есть пара весомых отличий:

  • «Родитель». При создании нового компонента он не выносится на отдельный артборд, как это сделано в Sketch, а сосуществует с «потомками» в одном пространстве.​
  • «Дети». Как говорят сами создатели Figma, копируя «родителя», вы создаете не его копию, а экземпляр (instance).
Инструмент: 10 причин отказаться от Sketch и перейти на Figma

При изменении параметров «родителя» они меняются во всех его потомках — тут всё как обычно. Но если вы решили поменять стиль потомка, все изменения становятся его уникальными независимыми свойствами.

Инструмент: 10 причин отказаться от Sketch и перейти на Figma

В отличие от Sketch, где редактирование текста и изображений в символе происходит в отдельной форме, в Figma это можно делать так, будто вы редактируете обычную группу объектов. Мне кажется, такая механика поочевиднее.

Google Fonts

  • Кто-то открыл ваш Sketch-макет и увидел ошибку о недостающих шрифтах.
  • Несмотря на предупреждение, этот кто-то открывает файл.
  • Все шрифты «слетают» на дефолтные. Срабатывает автосохранение.
  • Вы тратите время, переназначая гарнитуры к каждому текстовому объекту.
  • И вы чувствуете, как ваша любовь к человечеству угасает.

В Figma шрифты «тянутся» из Google Fonts, а те, которые используются локально, подгружаются в проект. И это прекрасно.

Что ещё классного есть в Figma

Интерфейс как в Sketch

Интерфейс Figma очень похож на Sketch, и это удобно: благодаря сохранению почти всех привычных паттернов и шорткатов от первого запуска до полноценной работы прошло примерно 40 минут.

Но появилось и множество улучшений знакомых инструментов: например, вертикальное выравнивание текстового блока внутри себя и отступ первой строки; опция автоуменьшения размера текстового блока по длине строки (горизонтально) или по количеству строк (вертикально) и так далее.

Интеграция с Framer

Добавили в конце декабря. Подробнее можно прочитать здесь.

Импорт из Sketch

Все свои проекты можно просто перенести из Sketch без единой потери. Во всяком случае, я не заметил ни потерявшихся шрифтов, ни поехавших кривых, ни битых картинок.

Экспорт SVG

Который, по моим ощущениям, работает лучше, чем в Sketch. Не уверен, в чем секрет, но SVG-иконки стали реже страдать популярными «болезнями» вроде кривых градиентов, пропавших заливок и частичо растрированных элементов.

Оперативная поддержка

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

Программа бесплатная

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

Инструмент: 10 причин отказаться от Sketch и перейти на Figma

И несколько минусов

Зависимость от интернета

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

Нет округления полупикселей

И это раздражает.

Мало ресурсов и небольшое сообщество

Толковых аналогов Sketchappsources.com я не нашел, но импорт из Sketch работает отлично, поэтому частично проблема решается.

Нет плагинов

Чувствуется нехватка Craft и плагинов для выгрузки экранов в Marvel или InVision. Появление в Figma — всего лишь вопрос времени.

Выводы

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

Команда Statsbot быстро и незаметно переключилась на Figma, и через месяц каждый стал понимать, что происходит с дизайном в компании и на какой стадии находится их задача. А я стал тратить меньше времени на обсуждения и переписку —  всё «перекочевало» в комментарии.

Фронтенд-разработчики перестали сталкиваться с неактуальными версиями макетов, а я — испытывать фантомные дежа вю, когда заканчивал работу над экраном и мне не нужно было настраивать экспорт и выгружать экраны в Zeplin.

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

Инструмент: 10 причин отказаться от Sketch и перейти на Figma
2626
44 комментария

Фигма офигенная!

От себя могу добавить про библиолиотеку компонентов, которая шарится на весь проект. Изменил компонент -> запушил в библиотеку, а все остальные пользователи получат уведомление, если изменение затрагивает их макет.

Из минусов: не работает read-only режим для разработчиков. У нем пропадает вообще весь UI, нельзя посмотреть свойства элементов и расстояния. Только наслажаться видом)

6

Вся путаница потому, что они не дают функции инспектора для гостя. Нужно создать аккаунт, тогда по ссылке can view можно видеть все параметры элементов и экспорт. Вот что они мне ответили, но догадаться про регистрацию пришлось самому:

When you need to send design files to your developers, sometimes you don't need them to have full (edit) permissions. View Only now provides several useful features for developer handoff:

— Click on elements to see their dimensions

— Select an element, hold the Option key, and hover your cursor over other elements to reveal redline distances

— Command + C reveals the color wheel for hex codes

А как быть с вложенными символами?

Не понимаю жуткого неприятия Figma некоторыми отписавшимися.
Инструмент в любом случае достоин рассмотрения и пробы, тем более для всех, работающих в скетч, труда не должно составить. Сам тоже посмотрю :) Все-таки UX/UI - то направление, когда надо быть открытыми ко всему новому.
Насчет HTML/CSS для дизайнера - думаю, каждый должен уметь верстать, пусть и без всяких SASS. JS - уже отдельная тема, хотя наслышан, что западные коллеги и в js умеют на каком-то уровне

4

Безусловно достоин. Просто у всех свои тараканы.

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

3

Весь vc побежал в Фигму

3
Раскрывать всегда
Попробовал сдать свою квартиру посуточно, или как потратить 50к рублей из-за "советчиков". Цифры в статье.

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

Попробовал сдать свою квартиру посуточно, или как потратить 50к рублей из-за "советчиков". Цифры в статье.
1616
44
33
11
Всё так, если у вас 1-3 объекта + базы постоянных клиентов - то посутка полная хрень, геморрой и головная боль. Пробовала жена с 2 мя квартирами, зае-лись, то не не то, это не это, жарко/холодно, кружка не того цвета, постельное не слишком пахнет чистотой, мы передумали, свиноты каждый 5 и ещё чмошники курят в квартире или кураж / ор устраивают. За год так зае.. разгребать еомогать. 2 раза перцем воспользоваться пришлось и 1 раз с полицией выгонять + подрался с уродом. А ещё Мы со СВОими , а вы не ничего не сделаете...испорченного много по мелочи и дверь в ванную, сломанная кровать и разбитое стекло с душевой. Залог смешной - 3 тыс, ключи бросают когда порча. Ублюдство вообщем. Такими вещами надо заниматься серьезно - у кого есть ресурсы и реальная сила и железобетонные нервы и Люди, клиенты, прачечная в конце концов - есть фирмы кто реально тянет всю эту психоделику. Вообщем попробовали, успокоились и сдали на долгую с договором и залогом 40 тыс.
Переехал на Бали. Живу с пауками, купил дом за 18 млн, который мне не принадлежит. А вам было бы норм?

Когда-то я стоял во дворе с 🚬, адвокатский костюм на мне, а в голове один вопрос: как я тут оказался? В итоге я продал свой дом на колесах, переехал с семьей из Волгограда на Бали и почти купил тут дом. Рассказываю в статье, почему дом мой, но «почти», как мне живется с ящерицами и пауками, а также делюсь с вами расходами на жизнь на 5 человек.

В стоимость входило абсолютно всё: мебель, техника, даже посуда и кухонные принадлежности. 
1010
11
Что умеет режим Бога в NeuroSnap: генерация по фантазии

Фотография больше не зависит от камеры. В 2025 году визуальный образ создаётся нейросетью — на основе твоих слов. Встречайте новый тренд: режим бога нейросеть. Это инструмент в боте NeuroSnap, который позволяет получать фото по описанию, не выходя из Telegram. Один текстовый запрос — и ты уже в новом образе.

Что умеет режим Бога в NeuroSnap: генерация по фантазии
Пока жду посадки на самолет — давайте распишу 5 основных своих мыслей про Вьетнам
Пока жду посадки на самолет — давайте распишу 5 основных своих мыслей про Вьетнам
1515
88
22
11
11
Как 4 млн инвесторов поучаствовали в мартовском обвале рынка перед его обрушением

Март начинался бодро и позитивно, а потом что-то пошло не так. А точнее, пошло не так примерно лишь всё. Даже в апрель перетекло. Двери биржи открылись перед 4 миллионами инвесторов, которые любят вверх, но оказалось, что это двери лифта, который едет вниз.

Как 4 млн инвесторов поучаствовали в мартовском обвале рынка перед его обрушением
1919
11
11
Маск лично просил Трампа пересмотреть решение ввести новые пошлины на импорт товаров из 185 стран — WP

5 апреля 2025 года начала действовать минимальная ставка в 10%, а «зеркальные» тарифы для отдельных стран вступят в силу с 9 апреля.

Илон Маск. Источник фото: mk.co.kr
66
11
11
11
Тайм-менеджмент. СПАСИ СВОЁ ВРЕМЯ! Промпты для ChatGPT, которые сэкономят ваше ценное время

Вы не успеваете половину из запланированного? Задачи накапливаются, а день снова закончился впустую? В этой статье я поделюсь мощными промптами для ChatGPT, которые помогут вам структурировать день, фокусироваться на главном и перестать тонуть в рутине.

2424
11
Как я в 27 лет поработал мастером в салоне красоты, а потом за 6 лет развил свой бизнес до 550 000 000 рублей, шлифанув это дело инсультом в 31...

Я просто хотел прибавить себе зарплату и чтобы маркетологи выполняли свою работу, а получилась Федеральная сеть. Как совершенно случайно, мы создали устойчивую маркетинговую систему БСЛ, позволяющую системно расти от 30% из года в год.

Как я в 27 лет поработал мастером в салоне красоты, а потом за 6 лет развил свой бизнес до 550 000 000 рублей, шлифанув это дело инсультом в 31...
55
22
80 нейросетей, которые помогут тебе разобраться в теме и проанализируют десятки источников. Залил в одну табличку + краткое описание — эпичная подборка
80 нейросетей, которые помогут тебе разобраться в теме и проанализируют десятки источников. Залил в одну табличку + краткое описание — эпичная подборка
149149
66
44
44
Мне нужна нейросеть чтобы разобраться в подборке из 80 нейросетей