Вчера Figma анонсировала целый ряд новых функций, упрощающих процесс прототипирования. Но больше всего внимания было уделено функциям, облегчающим жизнь как дизайнерам, так и разработчикам.
Так вышло, что дизайнеры и разработчики всегда находились в разных мирах, требуя разных инструментов. Их подходы могут кардинально различаться, но у каждого есть уникальные преимущества. Команда Figma знает, что дизайнеры подстраиваются под творческий поиск и свободный полёт мысли, у разработчиков же более структурированный подход.
В результате возникает неизбежное противоречие между ними: то, что разработчику кажется сломанным, для дизайнера — просто творческое исследование. Что для разработчика структура, для дизайнера — препятствие.
Мы верим в принятие концепций инженерии и дизайна, принятие строгости и возможность повторного использования кода при, которые делают визуальный дизайн таким мощным.
Вчера утром на конференции Config Europe мы анонсировали несколько новых функций, которые объединят лучшее из обоих миров в дизайн-системы в Figma, сделав их ближе к коду и к интуитивно-понятному использованию.
Поддержка систем проектирования, отражающих вашу кодовую базу
У команд обычно есть определенный набор инструментов (компонентов) для проектирования и один для разработки. Это нормальный и хороший подход, но совмещать оба из миров не всегда легко. Когда код и дизайн являются отражением друг друга — команды могут работать намного эффективнее.
Сегодня мы анонсировали Variants, Интерактивные компоненты и улучшения Auto Layout.
Объединение кода и компонентов дизайна с Variants (ожидается в ноябре)
Один компонент во front-end-коде обычно отображается в нескольких визуальных стилях для разных контекстов и состояний взаимодействия с пользователем. Например, кнопка может иметь основной и дополнительный стили, маленький и большой размеры, и даже разные версии для iOS и Android.
Сегодня такая кнопка представлена разными компонентами, каждый для своего визуального стиля. Это несоответствие между дизайном и кодом может привести к замешательству, что в конечном итоге замедлит процесс разработки.
Чтобы решить эту проблему, мы запускаем Variants — способ логически сгруппировать варианты одного и того же компонента в один, более мощный компонент. Помимо упрощения панели ассетов, это обновление позволит компонентам более точно соответствовать коду.
Drag and drop интерактивных компонентов в прототипы (запуск в январе)
Теперь, когда вы можете сгруппировать разные варианты одного компонента, вы могли задаться вопросом: «А будут ли работать эти интерактивные состояния с вашими прототипами?».
Даже несмотря на то, что Variants позволяет сгруппировать состояния компонентов, создание переходов между этими состояниями в Figma, на сегодняшний день, по-прежнему требует больших усилий. Чтобы создать иллюзию интерактивного объекта, дизайнеры должны были объединять несколько фреймов наложением.
Интерактивные компоненты делают прототипирование намного более эффективным, позволяя дизайнерам добавлять взаимодействия между прототипами с помощью Variants, поэтому примеры сразу же «оживают» в режиме прототипирования.
Создавайте дизайн как код с помощью Auto Layout (ожидается в ноябре)
Появление в 2019 году Auto Layout привнесло в Figma определённые правила компоновки. Позволяя дизайнерам обновлять текст кнопки без ручной подгонки фрейма, Auto Layout позволяет им более легко создавать адаптивные интерфейсы. Но мы знали, что впереди нас ждёт ещё много работы, чтобы приблизить Auto Layout к блочным моделям CSS и Flexbox.
На следующем этапе нашей эволюции мы привносим упрощённый UI в Auto Layout, чтобы его было ещё проще использовать, а также новые функции, основанные на некоторых из наиболее частых запросов: возможность растягивать элементы по обеим осям, настраивать независимые значения заполнения и оптимизировать интервал общих шаблонов пользовательского интерфейса (иконки навигации).
Делаем дизайн-системы более доступными в масштабе
Мы не только сделали дизайн-системы более мощными, но и добавили функции, которые помогают дизайнерам и разработчикам ориентироваться в больших и сложных библиотеках.
Навигация по библиотекам с помощью Instance Swap Меню (уже доступно)
Раньше поиск нужного среди тысяч компонентов в Figma был той ещё задачкой. Для этого нужно было запомнить точное название компонента или пересмотреть огромный список всех компонентов.
В дополнение к Variants, которые уменьшат количество компонентов для поиска, мы переработали Instance Swap меню, чтобы оно масштабировалось вместе с вашей системой проектирования. Теперь вы можете использовать миниатюры, хоткеи и поиск, чтобы найти нужный компонент.
Копипаст и код в новой вкладке Inspect (уже доступно)
Для быстрой и комфортной реализации дизайна разработчикам необходима определённая информация. Новая вкладка Inspect заменяет панель Code и предоставляет разработчикам более важные сведения. Название выбранного слоя отображается справа вверху, чтобы дизайнеры и разработчики знали, что реализуется, на одной странице.
Есть и новые разделы, показывающие соответствующие значения для Variants, цветов, теней, содержимого, типографики, границ и т.д. Разработчики могут щелкнуть мышью, чтобы скопировать любое значение в буфер обмена, включая целые сниппеты пар ключ: значение, чтобы легко вставлять эти данные в код.
Эти обновления — только начало сближения дизайна и кода в Figma. Бывают случаи, когда дизайнеру необходимо неограниченное пространство для работы, а бывают случаи, когда более структурированный подход, основанный на коде, является самым быстрым и эффективным способом его работы.
Мы представляем себе мир, в котором дизайнеры смогут быстро переключаться между этими двумя способами работы по своему усмотрению.
Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.
Фигма — лучшее, что случалось с разрабами и дизайнерами.
Новые фичи это супер круто, только вот бы им поправить бесконечное сжирание оперативки на маках (хз как на винде) — это какой-то гуглохром на максималках.
Да нихуя не лучшее, фигма - это путь в никуда.
Да, там охуенные фичи, но внутри тормозного онлайн браузерного куска говна, вместо нормального десктопного софта. Фигма популяризует браузерное дерьмо и убивает нормальные инструменты что превращает мир дизайна в какойто онлайн ад. Через несколько лет так ты просто не сможешь поработать оффлайн чтобы результат твоей работы не улетел на сервера фигмы или поработать не терпя тормоза, это пиздец
фанат фотошопа, лови его!
Нет, он имеет ввиду, что онлайн и брауезрка это не круто. Стандартные приложения написанные на высокоскоростных языках программирования это всегда лучше. Обычное десктопное приложение кушает меньше, откликается быстрее, не содержит онлайного инпут-лага.
Банальный пример десктопное приложение Xmind (Карта памяти). Им пользоваться одно наслаждение. Взять какой нибудь онлайн пакет для таких же действий и уже что-то не то. Файлы для передачи как-то неудобно выцепляются, нельзя поработать оффлан(лол, да). По мелочам в общем всё плохо.
Почему до сих пор нет хороших браузерных игр типа Battlefield 1? Да потому что браузер это своего рода платформа для всех. Здесь никогда не будет той оптимизации, мощи и вариативности как для обычных приложений на устройстве. Никогда.
Лол, что? У меня Photoshop или Illustrator ест в десятки раз больше памяти, при этом Фигма летает.
Инпут-лаги, онлайн - я бы понял это, если бы мы жили во времена dial up'а, но даже в провинциях сейчас можно подключить гигабитный интернет.
Офлайн, зачем? У меня даже в деревенской глуши нормально интернет работает. Я понимаю, кто то живёт в тайге с медведями, но их сколько, 0,0001%?
Заминусованный коммент выше скорее всего от того, кто не так давно освоил фш с горем пополам и научился чего-то клепать, а тут бац и новые технологии и он нахер не нужен с сайтами-коллажами.
Справедливости ради, все продукты от Adobe хорошо кушают и хорошо просят. Онлайн путь удобен тем, что вот он настоящий вендорлок продукт с подписочной моделью. Сказали они что цену подняли и всё. Нет больше выбора как спиратить.
Повторюсь. Онлайновые продукты сделаны просто напросто чтобы сосать в трое больше денег. Никакой "облачной" магии здесь нет. Тупо бабки.
Тот же 3DMax если бы работал только в онлайн, то про него бы никто и не знал бы.
PS и AI:
1. Держат материалы в несжатом формате для быстрого доступа к их редактированию - потому что их природа это сложное редактирование контента, а не накидать 5 заранее отрендеренных пнгшек. Попробуй в фирме открыть сложное векторное изображение с возможностью его изменения - оперативки уйдет в 3-10 раз больше.
2. Адоб синоним кривых продуктов
Тем не менее тот же скетч по производительности не выигрывал у фигмы
Это тот который эксклюзив Apple? Ну может в этом и дело.
Если в десктоп версии фирмы нажать alt+cmd+I То мы увидим что это обыкновенный браузер. В скетче это функцию отключили но по факту это то же брузер )
Не баг, а фича.
Вы просто стар...супер стар
"Почему нет в браузере battlefield 1".
Ограничения браузером возможностей для разработчиков, слабое API WebGL, однако скоро релизнется WebGPU и в браузере производительность на основе GPU станет во много раз лучше.
уже сейчас ничего не работает без интернета, представь что будет лет через 20. Ничего уже не будет в офлайне, он умерает, не за чем так душить фигму)))
Хотя и тебя понять можно, если бы была возможность загружать проект на комп, а после работать с ним даже без инета + возможность, чтобы он сохранялся + возможность синхронизировать все подобные проекты, было бы круто
Весь нормальный софт которому по логике интернет не нужен - нормально без него работает. Выносить в интернет софт, которому интернет по сути не нужен - долбоебизм
фигма это софт для совместной работы над одним и тем же проектом всей командой
у нас в фигме и ассеты хранятся какие-то и иконки и оттуда что-то в жсон конвертируется автоматически
это мультитул
а как подлизать дизайнеру, чтобы ему было очень удобно — это уже другой вопрос
кстати, ни разу не слышал недовольств от наших дизайнеров
заранее блокирую ответ из разряда «потому что они говноеды», спасибо
Потому что дизайнеры в основном такими и являются. Они ж нихрена не смыслят в техническом устройстве софта - потому не знают как должно быть хорошо.
Ну и совместный проект не обязательно синхронизировать каждые 1.5 секунды. Есть тот же самый git, который позволяет 99% времени сидеть офлайн и синхронизироваться только когда точно надо. И свободно выбирать сервер для синхронизации
Ах, да, дизайнеры не знают что такое git. Это ж у них обычно: disign1, disign1(99), disign1(999)final, disign1(999)final(999)
Ты таки немного однобоко оцениваешь. Да, стопроцентный онлайн зло, однако функционал фигмы весьма доставляет. Не в фашистский же скетч идти? Который только под мак. Про ФШ и вовсе молчу, ты зря кстати сказал что он шустро работает, вот не прав ты тут.
Так я и написал что у фигмы функционал збс, но то что она онлайн онли куда больший фашизм чем скетч. Стопроцентный онлайн зло, но куда большее зло инструменты которые его популяризируют. Среднему юзеру поебать онлайн или не онлайн до тех пор пока онлайн ему проблем не создаст, а это уже поздно будет
Который только под макНе понимаю чому его на винду хотябы не портируют, маконли это же пиздец какой минус
Ну фш явно не для того чтобы там ui рисовать
Sketch рендерит все механизмами MacOs, там невозможен порт по определению. Sketch тоже жрет много ресурсов, в тех случаях, когда много мелких векторных элементов с зависимостями вообще Овер дохрена. Скетч во многих моментах хуже фигмы в плане удобства и логики и наоборот. Sketch сильно лучше сохраняет SVG файлы, структура правильнее, лучше подходит фронтовикам. Figma банально удобнее для командной работы, особенно для фронтов. Нет лучшего или худшего, есть задачи. В какихто проектах с ними лучше справляется скетч, в каких-то фигма. Ещё есть XD, и если нужно безгеморно работат в AE, то XD интереснее двух предыдущих
Это не нерешаемая проблема
кроссплатформа убьет скетч, имхо. он станет тормознутым и тяжелым
Если грамотно написать (на qt, а не на электроне), то нет.
Вот отсутствие кроссплатформы в перспективе точно может убить
только вот скетч очень даже хорошо развивается, во многом благодаря недавним инвестициям. И кроссплатформа убьет все его преимущества в плане скорости и качества рендера
Да, камон, не неси херни. Каким образом кроссплатформа это все убьет?
а чем плохо такое облако? ну поправят серваки со временем, технологии в интернетах же, в отличие от людей, не деградируют особо сильно
ну какой софт для юикс/юай дизайна ты бы предпочел, чтобы это дело не тормозило процесс разработки в компании или даже в стартапе любом?
Плохо не то что облако есть, а то что без него нихуя не работает и то весь диз лежит не у тебя под контролем а у фигмы. Завтра очередной трамп заблочит твою фигму и пойдешь нахуй без дизайна, или фигма спиздит твою работу.
ну поправят серваки со временемХаха, ты думаешь фигма когданибудь перестанет тормозить? Тормоза там заложены by design, чтобы не лагало надо чтобы писали нормальные разрабы на нормальных технологиях, а не на вебе. Тем более что веб как платформу они выбрали изза дешевезны js-разрабов. Надеяться что фигма когдато перестанет тормозить безосновательно
ну какой софт для юикс/юай дизайна ты бы предпочелНу я в скетче сижу
Даже не знаю, что и у кого там тормозит, простейший пк тысяч за 50 не тормозит на тяжелый проектах всего лишь с 16гб ddr4 и видео 1050ti.
Ноуты как по мне не для работы, а для презентаций проектов, когда нужна мобильность. Да, есть люди, которым нужны рабочие станции, которые можно перенести, но и тут есть варианты систем, которые будут тянуть всё, что ты хочешь, например acer conceptD 7 или 9
А cкетч чомуто на ноутах пятилетней давности с 8gb и встроеной графике летает. И не загружает вкладочку с жирным проектом по несколько минут как это делает фигма даже на твоем пк за 50 кусков
Фигма тоже летает на подобных проектах, тут вопрос в вашей видеокарте. Даже с 6Гб она будет летать, если стоит карта хотя бы 2060ti. Туториалы по требованиям не просто так придумали. Это не фотошоп, который будет трёхразово питаться вашей памятью, тут другая технология.
Я еще ни одного компа не видел где бы жырные рабочие проекты откывались за пару секунд, а не через многоминутный просмотр полосочки загрузки
другая технология.Ага, технология криворуких долбоебов, которым игровая видяха нужна чтобы стрелочки на канвасе рисовать
Скажите тогда мне программу, где жирные проекты будут открываться за пару секунд, порадуюсь.
А насчет видеокарты, просто произошло перераспределение ресурсов, теперь оперативка не так важна, как раньше, теперь достаточно средней оперативки и средней видеокарты. Как по мне, когда нет перекоса в одну из сторон, то такой подход называют более сбалансированным.
Скетч, фш. По крайней мере не приходится идти пить чай ожидая пока проект загрузится
А насчет видеокарты, просто произошло перераспределение ресурсовНе знаете о чем пишете. Рендерить ui это самая простая и слабонагруженная из всех задач для видеокарты, если она написана так, что нужна аж игровая видяха - то это запредельный пиздец, у разрабов руки даже не из жопы
теперь оперативка не так важна, как раньшеДля векторной графики оперативка никогда не была нужна в большом количестве
то такой подход называют более сбалансированнымА как называют подход, когда человек с умным видом рассуждает о вещах в которых ничего не понимает?
Увы, так быстро они не открываются в тех программах, что вы написали. Я бы сказал, что время сопоставимо.
А насчет игровых видях - так это одни из самых слабых, мы же не говорим о том, что для фигмы обязательны quattro-видеокарты, а всего лишь карточка стоимостью 140$. И если это для вас топовая видеокарта, то вам есть над чем поразмыслить на досуге.
Согласен, для вектора она не нужна, но для ui элементов и видеокарта не нужна крутая в нашем случае, я говорю о присутствии других медиа в проекте.
10-15сек и ~5мин сопоставимо?
а всего лишь карточка стоимостью 140$Еще раз, фш и скетч летают на встроенной в проц 5летней давности видяхе. Фигме же нужна дискретка внезапно чтобы делать тоже самое.
То что вы там считаете что ноуты нужны не для работы это такой же кек, что для тулзы рисования кнопок нужна игровая видяха.
Такими темпами, завтра этим криворуким кекам квантовый комп понадобится чтобы макет отрендерить без лагов
ФШ летает? Ты с какой планеты, все что делает Адоби тормозит по дефолту на любом компе, более кривого уродского куска говна не найти. И да без ФШ никуда и приходится мириться с этим.
Ну по сравнению с фигмой летает. Особых затупов за фш не замечаю. То что адобе делает кривую хуйню соглашусь
А ты обновись до последнего пакета)
Только если в проекте не слишком много многомегабайтных изображений
Так мы же говорим про фигму и скетч, то есть работу с интерфейсами, зачем нам там многомегабайтные изображения. Плюс есть много как встроенных, так и сторонних плагинов, которые изображения оптимизируют, за что вам скажут спасибо уже на этапе разработки.
Мла, покажите как фигма тормозит на ролике. Ну прост не видел никогда за пару лет постоянной работы. Чо за сказки про 5 мин
Комментарий недоступен
Интересно, что тормозил как раз десктопный Скетч, а Фигма изначально была его гораздо быстрее.
"Кабздец" это когда тебе нужно менеджить файлы, сохранять их в каком-нибудь дропбоксе, договариваться, кто какой файл когда будет возможность редактировать, постоянный экспорт картинок чтобы что-то показать, привязка к конкретной ОС. Я много работал в Скетче и хлебнул этого в полной мере. Фигма не тормозит и у нее нет этих проблем.