Как открыть sketch в figma
Figma Feature Highlight: Sketch Import
Here at Figma we know news can get buried and release notes can go overlooked…no matter how many times you refresh Twitter. So we’ve decided to resurface some evergreen features and give them five minutes of Figma blog fame. Last week we zeroed in on Observation Mode, and this week? It’s all about Sketch Import, which lets you transfer Sketch files directly into your Figma file space.
Even though we released Sketch Import in June of 2015, we still see fans discovering it. For example, the tweet below is from only two months ago.
Why Sketch Import is essential for Figma users
Our Sketch Import is like a hidden secret power because of its vigilant accuracy. In addition to preserving your pages and resizing constraints, it can even import symbols into Figma as components — a neat trick for those companies building out or maintaining a design system. And in the case where something doesn’t work properly, please contact us through the in-app support widget.
How Sketch Import works
There are three ways to get the job done.
Voilà! A new Figma file will be automatically created with the added image(s). Feel free to check out our Help Center article if you’d like to dig deeper.
Which feature deserves the spotlight next?
We know designers love the nitty-gritty details and especially the “a-ha!” that comes from championing a treasured feature. To make sure we’re highlighting features the community loves, what would you like to read about next? Let us know over on Spectrum!
Легкий способ бросить Sketch и начать работать в Figma
Apr 11, 2017 · 9 min read
За последние 3 месяца Figma полностью выместила Sketch и Zeplin из рабочего процесса команды Statsbot.
Расскажу, чем Figma так хороша и почему история с массовой миграцией дизайнеров с Photoshop скоро повторится. Только в этот раз в роли покинутого отеческого дома выступит не Adobe, а Bohemian Coding.
Просветление
Я очень люблю Sketch. В 2014 году мастер-класс Дмитрия Новикова из MacPaw познакомил меня с его чудесами и с тех пор 90% моих процессов, от рисования иконок и презентаций до вытачивания детальных макетов веб- и мобильных интерфейсов, плавно перекочевали в Sketch. Авторитет Adobe дал трещину и начал осыпаться, пока его законные территории медленно, но верно отжимались по праву сильнейшего.
Релиз Zeplin подключил новую массу восторженных голосов: стоило показать фронтенд-разработчику насколько улучшится его жизнь без лазаний в макеты и фраз « Вась, скока блюр у твоих хипстерских теней делать?», « Нарежь иконки, да под ретину не », и они пускали скупую мужскую(иногда женскую) слезу.
Умение работать в связке Zeplin+Sketch стало стандартным требованием к дизайнеру интерфейсов.
За последующие пару лет рынок UI-тулзов расправил плечи и начал предлагать один продукт за другим. Даже Adobe засуетились и выдали довольно сырой Adobe XD (Comet в девичестве), но уже на момент релиза он сильно отставал от существующих решений, и восторги с фанатской трибуны Adobe в духе « Ну сейчас-то мы вам покажем» поутихли.
UPD: Со свежей версией Adobe XD почти не знаком, но ее, вроде, хвалят.
Ни один из тех продуктов не предлагал ничего решительно нового, варьируя одни и те же переменные. Да и сами потенциальные пользователи не горели желанием бросаться с головой в непроверенный инструмент и перестраивать под него все процессы.
И тут я познакомился с Ней.
Figma объединила в себя все лучшее, что происходило в миром инструментов UI-дизайна за последние несколько лет.
Figma — это лучшие качества Sketch, Zeplin и InVision в одном крутом продукте.
Доступность
Figma работает в браузере и доступна на любой платформе (если ты уже работал в конструкторах страниц типа Webflow или Tilda, проблем с адаптацией не будет).
Никаких дистрибутивов и приложений — нужно только зайти на figma.com, залогиниться и работать.
Дизайнерам привычно, что все, что работает через браузер — исключительно промежуточные звенья процесса, но не основная, «большая и серьезная», среда для работы. К этому нужно было слегка привыкнуть.
Организация файлов. Все рабочие файлы хранятся в облаке и организованы простым деревом «команда/проект /файл», поэтому больше никаких конфликтов копий, « Залей в Дропбокс », «Не подсосалось», «Макеты в папке Company/Design/Web/New/3.0/Актуальное/Новая папка(5)». В папку Drafts автоматически сваливаются любые новые файлы, несохраненные в явном виде.
Командная работа
Идея коллаборативного воркфлоу заражает один продукт за другим и успешно демонстрирует, что это весело, задорно и полезно для процессов.
В Figma можно в режиме реального времени работать над одним файлом одновременно с другими членами команды. И, как я уже писал, для подключения к работе им нужен только браузер.
Каждый пользователь, находящийся в данную секунду вместе с тобой в одном файле, дает о себе знать мельтешащим курсором с именем — ты знаешь кто это и чем он занят.
Работа с макетами для фронтенда
Ты впускаешь разработчиков в свой sketch-файл, а они там что-то меняют. «Не классно!», подумала тройка ребят из Турции и выпустила Zeplin, где фронтенд мог тыкать на все, что видит, не боясь внесения изменений.
Осталось только постоянно заливать свежие версии макетов, проставлять теги и отвечать на комментарии.
Спасением для меня стала Figma, в которой весь Zeplin заменила индивидуальная настройка прав: приглашаешь разработчика в проект, назначаешь ему « read-only» и отпускаешь в свободное плавание: он радостно копошится в макетах, смотрит цвета, размеры, отступы, отковыривает ассеты и предается прочим утехам.
Альпийская свежесть версий обеспечивается неощутимым процессом синхронизации — все макеты в руках фронтенда находятся в той стадии, в какой ты их последний раз оставил, закрыв ноутбук.
Комментарии
Для обсуждения макетов не приходится никуда «отбегать», весь фидбек собирается на месте и здесь же обсуждается.
Контроль версий
В Figma же контроль версий нативный и простой: ты видишь кто вносил изменения, когда, и откатываешься до версии в пару кликов, перезаписывая или создавая копию макета.
UPD: Ха! “Git для дизайнеров появится в Sketch”. Догоняют ребятки.
Редактор кривых
В Figma — Лучший. Редактор. Кривых.
Чем меня однажды «купил» Sketch, так это приятной работой с кривыми. После Фотошопа с его топорным Pen Tool-ом, рисовать векторные иконки в Sketch было исключительным удовольствием.
Но и тут Figma удивляет.
Pen Tool здесь настолько хорош и грамотен, что у меня ни разу не возникло раздражения от непойманной точки или смятения от неожиданно работающей функции. Вот лишь несколько фичей, от которых наворачиваются слезы радости:
Описание всех чудес « Vector Networks» можно почитать в посте Figma CTO Эвана Уоллеса вот тут. Удивительно, сколько вдумчивой работы было проделано при создании этого инструмента.
Сетка, лейаут и “резина”
Принципы изменения размеров ( Sizing в Sketch) можно задавать отдельно для ширины и высоты группы, чего раньше не хватало.
В Sketch есть выпадающий список: Stretch / Pin to Corner / Resize object / Float in space. Мне трудно сразу определить что выбрать, чтобы ресайз работал так как мне нужно.
В Figma это работает и выглядит интуитивнее.
Привязка потомка к стороне или размеру родителя (место для шутки про «мамку автора») происходит в один клик.
Важное: Зависимости для объекта/группы можно задавать только от размера Frame-а, а не родительской группы.
Frame — не то же самое, что и Artboard в Sketch. Frame можно создать внутри другого Frame-а, поэтому его стоит воспринимать просто как “прокачанную” группу, а не отдельный экран. К этому нужно привыкнуть.
Layout Grid. Настройки сетки всегда перед глазами, в отличие от Sketch, где нужно лезть в меню, вызывать модалку и пока ты настраиваешь колонки, макет недоступен для редактирования. Кстати, фреймы «липнут» к краям колонок и масштабируются вместе с ними, соблюдая сетку и отступы.
Подробно о grid layout, constraints и прочем оккультизме читай вот тут.
Компонетны
Родитель. Создавая новый компонент, он не выносится на отдельный артборд, как это сделано в Sketch, а сосуществует с потомками в одном пространстве.
Детишки. Как говорят сами создали Figma, копируя родителя, ты создаешь не его копию, а экземпляр («instance»).
Меняя параметры родителя, эти же параметры меняются во всех его потомках — тут все как обычно. Но если ты решил поменять стиль потомка, это становится его уникальным независимым свойством:
Google Fonts
В Figma шрифты тянутся из Google Fonts, а те, которые используются с локально, подкачиваются в проект. И это прекрасно.
Что еще классного есть в Figma
Sketch-like интерфейс
Интерфейс Figma очень похож на Sketch, и это удобно — от первого запуска до полноценной работы прошло
40 минут, благодаря сохранению почти всех привычных паттернов и шорткатов.
Но появилось и множество улучшений знакомых инструментов, как, например, вертикальное выравнивание текстового блока внутри себя и отступ первой строки; опция авто-ресайза текстового блока по длине строки (горизонтально) или количеству строк (вертикально) и т.д.
Интеграция с Framer
Импорт из Sketch
Все свои проекты можно просто перенести из Sketch без единой потери. Во всяком случае, я не заметил ни отвалившихся шрифтов, ни поехавших кривых, ни битых картинок.
Годный экспорт SVG
Который по ощущениям работает лучше чем в Sketch. Не уверен, в чем секрет, но SVG иконки стали реже страдать популярными болезнями вроде кривых градиентов, пропавших заливок и частичо растрированных элементов.
Оперативная поддержка
Лайв-чат со средним временем ответа 2–3 часа. Ребята очень внимательные и даже пишут скринкасты, когда хотят что-то объяснить. Приятно.
Она бесплатная
Для отдельных пользователей. Для команд Figma выкатили прайсинг, который заработает в начале июля:
Как перенести проект Figma назад в Sketch и можно ли мигрировать туда-сюда постоянно
Я менеджер по продукту, плотно работаю с дизайнерами, а иногда могу чего-то отрисовать и сам. Долгое время работал в Sketch, не особо оглядываясь по сторонам, и вдруг неожиданно понял что мир уже изменился. Похоже Figma стала менее тормознутой и багнутой, а в качестве третьей стороны подтянулся XD.
И Figma и Adobe XD я пробовал раньше в качестве альтернативы Sketch и субъективно не понравилось. Теперь же многие дизайн команды туда активно мигрируют. Почему происходит в целом понятно: идут за командной работой или за более плотной интеграцией XD с адобовскими продуктами.
Тем не менее, для меня Sketch остается удобнее в плане использования и интерфейса (привычка дело такое). К Фигме я так и не привык, хотя они и старательно копируют лучшее в Sketch, все равно остается ощущение, что что-то не то. А XD по интерфейсу по-прежнему просто раздражает.
Поиграв в эксперименты на одном из проектов, мы решили вернуться обратно в Sketch. И вот вскрылась неожиданная проблема, с которой я столкнулся: не так-то просто мигрировать файлы обратно из Figma или XD в Sketch.
Оба инструмента охотно обрабатывают Sketch-файлы, но не позволяют нативно вернуть файлы обратно. Уверен, что для них это не сложно технически, а это направленная маркетинговая и продуктовая политика.
Я решил поискать решение, которое позволило бы дизайнерам и продуктам из команды работать одновременно в разных тулах — кому что нравится. Делюсь результатами и сразу спойлер: волшебной пилюли не будет.
Итак, если ваша дизайн команда решила вернуться к старому доброму Sketch, то вариантов как это сделать у вас не так-то много. Если честно, в какой-то момент я подумал, что проще будет просто перейти на Figma (хоть не хочется), чем вручную перенести файл на 100+ артбордов. Ниже перечислю все возможные значительные варианты.
Наверное самый популярный вариант — это миграция между тулами через SVG. Экспортируем артборды в SVG из одной программы, а затем импортируем обратно в другую.
Про способ активно пишут и, наверное, для некоторых проектов это действительно сработает. Но у меня проблемы с переносом из Figma в Sketch начались сразу же.
Был вот такой файл:
Вот что получилось:
Первое сразу заметное, это то, что шрифты безвозвратно конвертируются в outline, если захотите отредактировать текст, то придется добавлять все текстовые блоки обратно руками.
В моем случае это было не менее 50 текстовых строк на каждом из 100+ артбордов. То есть 5000+ текстовых строк для всего файла. Получается если даже тратить всего 30 секунд на замену одной строки с outline на редактируемый текстовый блок, то все про все займет около 40 часов. Я конечно лукавлю, какие-то элементы можно будет копипастить сразу блоками и все будет быстрее, но время только на эту проблему тратится значительное.
Вторая проблема, оказалась не очевидной с первого взгляда на файл, но, наверное, даже еще более глобальной. При конвертации через SVG, в виду специфики самого формата некоторые стили пропадут.
Например, на изображении выше видно, как изчезают все borders сделанные через inner shadows, как, впрочем, и остальные тени. В отдельных случаях — это криминал, не иначе. Чтобы найти и исправить эти “косяки”, придется потратить не один час времени и навряд ли это путешествие покажется интересной процедурой.
Третья проблема — маски. Для аватаров в этом мокапе использовались маски.
Как видно на картинке ниже, изначально уменьшенное изображение растянулось и вместо лиц мы видим только края картинки. Что еще хуже, каждое оригинальное изображение было обрезано и его придется перезагружать заново. Аналогичные проблемы с масками возникают повсеместно.
Что вы еще потеряете? Например, символы и наборы цветов. Потеря символов для больших проектов может быть катастрофой. Палитру, впрочем, можно восстановить очень быстро. Тем более если есть guideline.
Учитывая, что стили и текстовые блоки приходится после SVG импорта-экспорта полностью править, первая мысль, что приходит в голову — все пропало, придется переносить ручками. Ручки от этих мыслей, кстати, опускаются, но не у всех. Оказалось, что довольно популярная практика нанимать для переноса файлов фрилансеров, которые за умеренную плату в 100$-200$ сделают перенос руками. Никогда так не делал на запросов на фриланс биржах хватает.
Стоимость будет зависеть конечно же от объемов. Если надо перенести всего пару артбордов, то будет дешевле, но в этом случае и самому сделать не так лень.
Если фрилансер хороший, то все работает прекрасно, но не стоит забывать, что стоит перепроверить + на выполнение заказа потратится время.
Этот вариант был у меня в приоритете, с него я поиск и начинал. Я был практически уверен, что кто-то должен был что-то с этим безобразием сделать и реализовать перенос с одного типа файлов в другой. Но найти подходящее решение получилось не с первого раза.
Оказалось, похоже что полностью решает конвертацию с Figma в Sketch файл только один сервис: XD2Sketch. Они же, кстати, делают конвертацию из XD в скетч и даже в фигму. Стоит такое удовольствие 17$ за файл, за объемы есть скидки.
Увидев цену, я решил попробовать поискать и другие конвертеры. Их в целом не много. Например, есть Сonvertio, который вроде бесплатный за рекламу. Но у меня ни разу не получилось сделать там конверсию хоть вообще в какой-то формат: все время показывалась ошибка. Возможно это просто продуктовая ловушка и они так тестают свое MVP? Я бы спросил у саппорта, но контактов не нашел.
Пришлось вернуться в XD2Sketch и раскошелиться. На выходе получился очень даже сносный файл, хотя на паре кнопок лейблы уехали на пиксель вверх.
Стоит дороговато, но если приходится мигрировать на другую дизайн систему, получается дешевле, чем тратить свое время или заказывать фрилансеров. На моем предыдущем проекте (этот просто тестовый) у меня было около 20 файлов и сумма получится уже совсем другая, но в целом если история одноразовая, то по времени / качество — окупается.
Кстати заметка для фрилансеров: как заработать денег, почти ничего не делая :). Берете проект, конвертите автоматом, подправляете, если будет надо и вуаля! Правда думаю такие проекты на фриланс прилетают не так часто 🙂
Хотя с горем пополам решение получилось найти, напоминаю, изначальная идея была найти способ, который позволит дизайнерам работать все время в разных тулах и обмениваться результатами.
Для каждодневной работы, к сожалению, ни одно из решений выше не подходит. На автоматическую конверсию нужны солидные бюджеты, на ручную работу — вагон времени, которое тоже нужно оплачивать. Для себя я пока выход я вижу один: если в компании много дизайнеров, всех придется перевести на Figma.
Если кто-то решил это проблему иначе, пишите в комментариях, будет очень круто услышать про ваш опыт.
Как переехать со Sketch на Figma. Опыт Semrush
Как команда UI/UX-дизайнеров перешла на Figma, и почему нас не устраивали Zeplin, Sketch и Google Drive. Описываем плюсы и недостатки всех и делимся чек-листом для безболезненной смены инструментов.
Когда-то наша UI-команда была молодой и ветреной, то есть небольшой (пять человек), продуктов в Semrush — немного (11), а источником правды для стилей и отступов была библиотека с кнопками и некоторыми базовыми инпутами в смарт-объектах в фотошопе.
Тогда связка инструментов была такая: Photoshop → Zeplin. А все макеты хранились на Google Drive в тщательно или не очень сгруппированных папках.
Стало больно после всего этого? Если вы дизайнер в продуктовой команде, то сейчас у вас должно всплыть улыбающееся сквозь боль лицо старичка Гарольда.
В этом материале мы собрали боли нашей дизайн-команды в работе с инструментами до перехода на Figma. При этом, конечно же, мы очень благодарны Sketch — он научил нас работать с библиотеками и UI-компонентами и постоянно учиться новому. Надеемся, что наш опыт и вопросы, которые мы задавали себе при переносе большой дизайн-библиотеки между инструментами, помогут какой-нибудь команде сделать это так же безболезненно и быстро.
В какой-то момент для нас стало счастьем пересесть с иглы фотошопа на Sketch. Как раз в то время Bohemian Coding добавили функциональность для создания кросс-файловых символов.
Перспектива построить библиотеку с символами в Sketch, которые можно будет переиспользовать в разных макетах, была для нас волшебной. Особенно после передвигания пикселей в фотошопе и постоянных забегов по коллегам и гайдам в pdf и png, чтобы вспомнить, что там по отступам в кнопках.
В Figma функциональности с компонентами на тот момент ещё не было. Он тогда был инструментом сомнительным, но подающим надежды.
Один из дизайнеров начал собирать библиотеку символов в Sketch, набивая шишки и играясь с костылями. У некоторых наших компонентов было много вариаций, поэтому библиотека выходила очень объемная. А большой вложенности в символах было не избежать. В итоге с некоторыми из них выходило что-то такое:
Набор наших рабочих инструментов поменялся на: Sketch → Zeplin. А макеты мы продолжали хранить на Google Drive.
Понадобились месяц или два, чтобы команда привыкла работать в новом инструменте. Для этого мы проводили небольшие встречи, где рассказывали друг другу лайфхаки для работы со Sketch.
Параллельно мы завели отдельный канал в корпоративном Slаck для обмена плагинами, советами и проблемами. На этой ноте все должны были стать счастливы и веселы. Некоторое время так оно и было.
В постоянно растущей команде время от времени задумываешься о том, как процессы сделать лучше: передача и поиск макетов, корректно работающие инструменты и хорошая понятная библиотека компонентов.
На одном из командных ретро (нас тогда стало уже 11, а количество продуктов Semrush увеличилось до 44) мы решили обсудить инструменты и работу с макетами, библиотекой и командами разработки.
На тот момент команда вот так шуточно определила для себя эмоции по отношению к инструментам, с которыми мы работали:
После этой разминки мы собрали уже несколько проблем, которые для нас стали определяющими в переходе на новый инструмент.
Мы очень любили Sketch, но не могли смириться с некоторыми моментами, замедляющими работу.
Наша команда росла, продуктов становилось больше (можно посмотреть темпы роста количества на этой странице), количество макетов и папок на Google Drive увеличивалось. А значит, все описанные выше проблемы могли умножаться на количество новых людей. Этого очень не хотелось, поэтому мы собрали внутри команды рабочую группу и расписали план перехода на Figma.
Конечно же, у Sketch были и плюсы, от которых некоторые ребята в команде отказывались скрепя сердце.
Sketch в целом всех устраивал, но однозначно устаревал по ряду фичей.
Перенос нескольких библиотек с компонентами из Sketch в Figma был важным шагом для нашей дизайн-команды. Поэтому мы собрали рабочую группу из заинтересованных человек. Эти ребята помимо основных задач занимались проработкой плана перехода на новый инструмент (нас там было пять человек, трое из которых уже давно с горящими глазами рассказывали, что может Figma).
Сперва мы составили список вопросов, на которые нам нужно было ответить: возможности инструмента, плюсы и минусы Sketch, флоу работы над задачами и прочее. Кроме того, отдельным документом мы собрали список всего, что нужно будет перенести (все базовые компоненты, иконки, графики, паттерны и пр.) и кто за какую часть будет ответственным.
Наш UI-лид семь раз созванивался с sales-командой Figma, задавал вопросы, читал их FAQ и гайды. Сперва выходило, что при сравнении в лоб Figma для нашей компании (с учётом количества дизайнеров, не только UI, но и UX) был дороже Sketch. В итоге же вышло дешевле, чем связка Sketch + Zeplin.
Пара команд разработки уже использовали в своей работе Figma. Мы учли их опыт и начали разбираться, как всё это объединить для одной организации и ничего не сломать.
Вот список вопросов, на которые мы отвечали перед окончательным решением перейти всей командой на Figma. Надеемся, он вам пригодится.
В основной Sketch-библиотеке на момент перехода у нас было более сорока компонентов и их вариаций. Кроме нее у нас есть отдельные библиотеки с иконками, иллюстрациями и паттернами.
Один из дизайнеров рабочей группы примерно год назад для собственного удобства начал переносить некоторые компоненты из Sketch в Figma. Мы решили отталкиваться от его наработок. Разделили между группой в три человека существующие компоненты, посмотрели, какие из них нужно доработать в Figma, а какие — собирать с нуля. И постепенно начали.
За время переноса мы записали для себя общие принципы построения компонентов, договоренности по названиям слоев, групп и вообще. Возможно, это будет полезно и вашей команде, если вы вдруг переносите свои библиотеки из Sketch в Figma.
Важно помнить при изменении уже существующего компонента:
Переезд библиотек из Sketch в Figma в нашей команде занял чуть больше месяца силами пяти человек. Начали мы 19 марта 2020, а 24 апреля все основные компоненты и стили уже были готовы к работе библиотеками. При этом мы ещё занимались основными задачами, а переездом — в оставшееся от них время.
После переноса компонентов в Figma рабочая группа провела небольшие мастер-классы ребятам из UX/UI команды. Рассказывали и показывали, как всё работает и строится в библиотеке. Наш UI-лид провел демо по организации в Figma для всей продуктовой команды и маркетинговых дизайнеров.
Уже через месяц после переезда со Sketch на Figma можно было выделить такие результаты:
Переезд на Figma оправдал ожидания нашей команды. Стало проще работать с макетами и библиотеками дизайн-системы и обсуждать решения прямо в файлах. Даже просто хулиганить при совместной работе в Figma очень классно. Между прочим, это иногда очень полезно!
Дальше мы планируем недеструктивно связать наши дизайн-компоненты с react-компонентами, развивать библиотеки и делиться наработками в Figma Community.
Переехать и забыть Sketch как страшный сон.
О, да! Кажется, откликнулось)))
Скетч нам дал светлое будущее но не завез версию под винду и не сделал работу в реалтайме, по этому все больше и больше Фигма отвоевывает рынок.
Я сомневался около месяца, но сдался и перешел на фигму, оказалось реально удобно, клиент на электроне конечно говно, но это пока единственное что напрягает.
А долго переходили? тяжко вообще далась смена?
Спасибо! Не представляете, какие довольные сидим 🙂
Мы тоже переехали, потому что преимущества облачного сервиса над изолированной десктопной парадигмой очевидные. И отказались сразу от двух инструментов, Скетча и Цеплина. Хотя, Скетч молодцы, конечно, без преувеличения революцию сделали, это нужно объективно признать.
Единственное, у Фигмы напрягают нечастые, но неприятные проблемы с доступом, как в феврале был (люди запланировали презентации клиентам, а сервак лежит). И еще подбешивает, что на платной подписке все равно только один «can edit»-пользователь допускается (за каждого дополнительного нужно платить столько же.
Нужно как-то тэгнуть их представителей))
Всем привет, мы команда дизайнеров, которая последняя в мире перешла со Скетча на Фигму. Всем пока
Да ну, как же – смотрите, сколько нас тут таких! :))
Для меня последней каплей стали дикие лаги Скетча в проектах с 30+ артбордами. Фактически с типичным интернет магазином. На каждое действие эта крутящаяся радуга, а на том конце клиент нервно ждет. Фигма в этом плане просто самолет, хотя и её можно грузануть до диких зависаний) 200 фреймов с 5к-8к картинками и фигма лежит.
Плюсы неистовые! Фигму пока стараемся «не класть», но спасибо, имеем в виду цифры
Как переехать?
Ну берёшь и учишь прогу, разве нет? 🤷🏿♀️
Что там учить? Фигма в свое время тупо скопировала всё лучше из Скетча и стала развивать дальше. Да, со временем появилось больше различий, но в целом те же самые приемы работы. Мне, например, понадобилось совсем немного времени для перехода.
С тобой наверное бухать весело
здравствуйте большое спасибо за статью было интересно читать… но спустя год на фигме может быть найдутся эксперты, у которых есть ответ на мои вопросы?
1) как сделать маску прозрачности
2) подскажите плагин для рандомных аватарок или ансплеш пожалусто (и имён, если есть!)
3) или может быть знаете способ как делать paste в то же место где курсор
4) и ещё интересовало может быть есть способ работать без интернета над файлом не имея его открытым??
5) не помешал бы нормальный юи кит последней айос…
6) и хочется узнать как удобно искать шрифты когда их несколько сотен с одинаковыми названиями… типа по вхождению а не первым буквам?? мб…
Постарались собрать:
1) Не очень понятно про маску прозрачности, чем она отличается от обычных масок в фигме? Кстати, с масками есть несколько лайфхаков: можно использовать png с прозрачностью в качестве маски; можно наложить градиент с прозрачностью на объект-маску; а ещё иногда удобно наложить размытие на объект-маску.
2) Для случайного контента хорошо подходит Content Reel (https://www.figma.com/community/plugin/731627216655469013/Content-Reel) от Microsoft. А для своего контента удобно использовать Google Sheets Sync(https://www.figma.com/community/plugin/735770583268406934/Google-Sheets-Sync).
3) В фигме такого вроде нет, кроме режима вставки картинок по Cmd+Shift+K.
4) К сожалению всё только онлайн. Без интернета даже локальные файлы не открываются.
5) Библиотеки лучше всего искать в Figma Community, там много хорошего. По iOS вроде вот этот файл выглядит неплохо (https://www.figma.com/community/plugin/735770583268406934/Google-Sheets-Sync).
6) Эта проблема должна хорошо решаться плагинами из того же Figma Community. Вроде Better Font Picker (https://www.figma.com/community/plugin/739922281164562258/Better-Font-Picker) как раз умеет искать по шрифтам.
к сожалению ссылка на юи кит айос осталась ссылкой на гугл табличный плагин
но за остальные ответы спасибо!! поставлю пару плагинов
И с вопросом первым теперь понятно 🙂 В фигме все маски в режиме alpha. На картинке как раз пример с градиентом, который вы описали. Но мы бы советовали использовать маски, только если внизу какая-то сложная подложка. Обычно просто накрыть контент прямоугольником с градиентом сильно проще и быстрее)