Introducing FigJam
Today at Config 2021, our virtual design conference, Figma CEO Dylan Field announced the launch of FigJam, Figma’s new whiteboarding space. Available now in beta, FigJam is free for anyone for the rest of 2021. Below, Figma’s VP of Product Yuhki Yamashita shares a bit about why we decided to build FigJam.
A lot has changed in the five or so years since Figma launched in closed beta, or as Dylan put it at the time: when design met the internet.
A decades-long shift from the physical to the digital has accelerated. Design, once on the periphery, has moved closer to center stage. Collaboration is in; silos are out. And as if anyone needed reminding, many of us—me and my Figmates very much included—have been working remotely for over a year.
What this all adds up to is less time spent together in person and more time spent in online spaces like Figma, which we’ve seen people use in all kinds of creative and unexpected ways—from multiplayer pong to ice breakers to meal planning and brainstorming.
In each of these use cases, pixels aren’t being pushed. Products aren’t being designed. People are simply looking for a space to share ideas and connect.
We can empathize—our team has been working from home, too. So it became clear to us early on, especially after what felt like our zillionth video call, that there’s something special about simply “being” in Figma together—that beyond a powerful interface design tool, Figma can serve as an energizing space for people across teams and geographies to come together, iterate and explore.
With this insight in hand, we kicked off an exploration of our own into whether we could make Figma a more inviting place for these types of free-form interactions. If we could do that, we figured, we could also bring more people into the earliest stages of design. After all, Figma’s vision is to make design accessible to everyone. Here was a chance to take the next step.
But after digging a bit further, we realized that these interactions needed their own dedicated space—one where anyone felt welcome and designers felt at home, so everyone could feel comfortable jumping in and sharing ideas.
FigJam: Where the best product ideas begin
That’s why we built FigJam, an online whiteboard made for designers to ideate and brainstorm with their extended teams. Think of it as a lightweight version of Figma that’s easier to learn and even more fun to use. It’s for defining user problems, looking for inspiration, and exploring ideas.
There’s a ton of functionality built into FigJam that makes it a great space for early-stage design thinking. In multiplayer, teams can use sticky-notes, emojis and drawing tools to brainstorm. In single-player, systems thinkers can use shapes and pre-built lines and connectors to map user flows and build new processes.
FigJam is also designed to be a one-stop-shop for easy collaboration. Built-in audio functionality makes it easy for teams to “talk it out” without having to pick up the phone or start a video call. And unlike other options, FigJam works seamlessly with Figma, so teams can keep all their design work—from initial concept to final prototype—all in the same place.
We also wanted to bring the same warmth and serendipity that people love about Figma to FigJam, whether you’re ideating, ice-breaking, or just “hanging out.” Cursor chats, emojis, stamps, and other carefully designed features allow you to express yourself fully.
Put another way, in FigJam fun meets functionality.
That’s one reason why teams at Stripe, Netflix, Salesforce, Twitch and more have used FigJam over the past few months to brainstorm and ideate. Their feedback, the good and the bad, has not only been essential to our team; it has also affirmed that FigJam fills a deep user need.
Here’s how Discord’s Head of Design, Kevin Wilson, described it:
“FigJam has been awesome for the Discord product design team because it is so much like Figma itself—but a focused, uncomplicated version that works great for a brainstorm or a retrospective, or anything really.”
We hope you’ll check out FigJam, and if you do, let us know what you think. Because our goal isn’t only to make FigJam a place where the best product ideas begin, but to make Figma the best home for designers and their teams to come together and build together—from start to finish, end to end.
FigJam – интерактивные доски для дизайнеров от Figma
На конференции Config 2021, генеральный директор Figma Дилан Филд объявил о запуске FigJam, нового вайтборда Figma. Сейчас доступна бета-версия FigJam, но до конца 2021 года приложение будет бесплатным для всех пользователей. Ниже вице-президент Figma по продукту Юки Ямасита немного расскажет, почему мы решили создать FigJam.
Многое изменилось приблизительно за пять лет с тех пор, как Figma была запущена в закрытой бета-версии, или, как сказал тогда Дилан: во времена, когда дизайн встретился с Интернетом.
Десятилетний переход от физического к цифровому ускорился. Дизайн, который когда-то был на периферии, стал ближе к центру сцены. Усилилось взаимодействие внутри компаний. И, не думаю, что кому-то нужно напомнить, ведь многие из нас – в том числе я и мои товарищи по Figma – уже больше года работают удаленно.
Все это сводится к тому, что мы меньше времени проводим вместе и все больше времени в онлайн-пространствах, таких как Figma. Люди используют эти онлайн-пространства всевозможными творческими и неожиданными способами – от игры multiplayer pong до ice breakers, meal planning и мозгового штурма.
Все эти случаи не касаются проектирования продуктов. Люди просто ищут место для общения и обмена идеями.
Наша команда тоже работала из дома. Поэтому нам сразу стало ясно, особенно после миллионного видеозвонка, что есть нечто особенное в том, чтобы просто проводить время вместе в Figma. Помимо мощного инструмента дизайна Figma может служить источником энергии для людей по всему миру, позволяя им собираться вместе, проводить итерации дизайна и исследования.
Поняв это, мы начали собственное исследование. Мы хотели узнать, можем ли мы сделать Figma более привлекательным местом для подобных взаимодействий. Мы полагали, что если бы нам это удалось, то мы смогли бы привлечь больше людей к самым ранним этапам проектирования. В конце концов, цель Figma – сделать дизайн доступным для всех. Это был наш шанс сделать следующий шаг.
Но, немного углубившись, мы поняли, что для таких взаимодействий необходимо отдельное пространство – место, где каждый чувствовал бы себя желанным гостем, а дизайнеры чувствовали себя как дома, чтобы все могли с комфортом делиться своими идеями.
FigJam – место, где зарождаются лучшие идеи продуктов
Вот почему мы создали FigJam, интерактивную доску для дизайнеров, чтобы они могли придумывать идеи и проводить мозговой штурм с расширенными командами. Думайте о ней, как об облегченной версии Figma, которую проще освоить и еще интереснее использовать. Она предназначена для определения проблем пользователей, поиска вдохновения и изучения идей.
В FigJam встроено множество функций, которые делают его отличным местом для дизайн-мышления на ранней стадии проектирования. Команды могут использовать для мозгового штурма стикеры, смайлики и инструменты для рисования. В одиночной игре системные мыслители могут использовать фигуры, предварительно нарисованные линии и соединители для формирования юзерфлоу и построения новых процессов.
FigJam также разработан, чтобы стать единым центром для удобного взаимодействия. Встроенные аудио-функции позволяют командам легко общаться, не поднимая телефонную трубку или не начиная видеозвонок. И в отличие от альтернативных приложений, FigJam без проблем работает с Figma, поэтому команды могут хранить весь проект– от первоначальной концепции до окончательного прототипа – в одном месте.
Команды могут использовать для мозгового штурма стикеры, смайлики и инструменты для рисования в FigJam. А встроенная функция аудио-связи позволяет легко «выговориться» вживую
Мы также хотели привнести в FigJam ту же теплоту и интуитивное управление, которые нравятся людям в Figma, независимо от того обдумываете ли вы идею или просто «тусуетесь». Смайлики, штампы и другие тщательно проработанные функции позволят вам полностью выразить себя.
Другими словами, в FigJam веселье встречается с функциональностью.
Это одна из причин, по которой команды Stripe, Netflix, Salesforce, Twitch и других компаний использовали FigJam в течение последних нескольких месяцев для мозгового штурма и формирования идей. Их отзывы, как хорошие, так и плохие, важны не только для нашей команды; они также подтвердили, что FigJam удовлетворяет глубокие потребности пользователей.
Вот как это описал руководитель отдела дизайна Discord Кевин Уилсон:
«FigJam великолепно подошёл для команды продуктовых-дизайнеров Discord, потому что очень похож на Figma, но является его сфокусированной, упрощённой версией, которая отлично подходит для мозгового штурма, ретроспективы или другой работы».
Мы надеемся, что вы попробуете FigJam, и если вы это сделаете, оставьте свой фидбек. Потому что наша цель – не только сделать FigJam местом, где зарождаются лучшие идеи по созданию продукта, но и сделать Figma лучшим домом для дизайнеров и их команд, чтобы они собирались и работали над проектом вместе от начала и до конца.
Figma представила конкурента Miro — доску для совместной работы FigJam
Онлайн-сервис для разработки интерфейсов и прототипирования Figma представил новый инструмент для совместной работы. С помощью интерактивной доски FigJam несколько человек могут рисовать на едином пространстве, клеить стикеры и добавлять другие элементы, как при мозговом штурме. Инструмент стал частью самого большого обновления сервиса с момента его запуска, пишет TechCrunch.
Figma — это графический онлайн-редактор для совместной работы. В нем можно создать прототип сайта, интерфейс приложения и обсудить правки с коллегами в реальном времени. Сервис позволяет организовать совместную работу распределенных команд.
Однако, как отмечает издание, новый инструмент расширяет эту концепцию, позволяя дизайнерам удаленно взаимодействовать друг с другом уже на начальном этапе ― генерации и обсуждения идей.
Кроме того, FigJam будет полезен не только дизайнерам, но и всем остальным, кто занимается разработкой новых концепций и продуктов, считают в компании.
Доска позволяет сразу нескольким участникам рисовать на едином пространстве, клеить стикеры, добавлять различные формы и схемы, ставить штампы и другие элементы, имитируя таким образом естественный процесс мозгового штурма.
«Мы изначально хотели, чтобы FigJam стал инструментом для первого шага в проектировании, то есть чтобы с его помощью можно было обсудить проект еще до того, как вы непосредственно начнете заниматься дизайном, ― рассказал основатель и генеральный директор Figma Дилан Филд. ― Мы видим, что люди заинтересованы в более гибком взаимодействии. И мы, в свою очередь, хотели сделать этот инструмент достаточно простым, чтобы привлечь к нему максимально широкую аудиторию».
Так как инструмент встроен в основной сервис, все наработки и схемы можно перенести непосредственно в проект в Figma.
Помимо этого, сервис объявил о том, что теперь во все его продукты будут добавлены голосовые чаты. Это значит, что пользователям не нужно будет отдельно подключаться к Zoom или Google Meet, чтобы обсудить проект голосом, ― это можно сделать внутри сервиса.
Кроме FigJam и голосового чата, Figma представила обновленное мобильное приложение. Также сервис разработал новый инструмент для дизайнеров ― теперь они могут автономно выполнять часть своей работы, не влияя на общий проект, а затем добавить свою часть в общую систему.
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 нажать на элемент, расстояние до которого необходимо узнать, но это не всегда работает.
Перекрытие и заблокированные слои
Очень часто происходят случаи, что получив ссылку на макет сайта, верстальщик не может изъять нужные элементы дизайна по причине того, что они перекрыты вышестоящими слоями, или же эти слои вообще заморожены.
Проблемы с текстом
а если открыть данный шаблон уже в режиме дизайнера, то уже можно наблюдать, что там Roboto Bold задействовано.
Семейство шрифта вроде ж одно и то, а только в процессе верстки его всё равно через свойство @font-face отдельно подключать надо, иначе эффекта как на макете не получить. И пока не затяните на свой проект, вы этого не узнаете (и можно долго играться со свойством font-width).
Если же вы работаете не только с открытыми Google шрифтами, но и используете личный подключаемый набор, а он ещё и кирилличный, то будьте готовы к приключениям.
Отдельные танцы с бубном начинаются, если ваш дизайнер очень любит градиентные шрифты с тенями и обводками.
Тут в код, предоставляемый Фигмой, можно вообще не смотреть. Как вариант решения проблемы вы можете сохранить данный текст в SVG (иногда это дешевле чем импортировать к странице новый шрифт), ну а если всё-таки будет необходимость заниматься решением данной проблемы на серьезном уровне, то опять забирайте макет на свой личный проект.
Тут правда у меня возникли вопросы, почему возле ползунков смены значения градиента разработчики поленились вывести хотя бы процент текущего значения, не говоря уже про угол направления градиента, и мне как верстальщику приходиться самому угадывать какое значение надо будет поставить в background: linear-gradient, а потом починить это через background-clip: text; Собственно свойство text-stroke в коде фигмы я пока тоже не встречал, хотя возможно это связано что оно ещё не во всех браузерах зеленое.
*Делитесь своими мнениями в комментариях, почему это может быть так сложно реализовать?
Figma является облачным продуктом
Иначе говоря, если у Вас нету связи с глобальной паутиной на хороших скоростях, возвращайтесь в свою пещеру к настенной живописи, или переходите на оффлайновые продукты. Тут Фигма увы бессильна и Ваше творчество так и останется недоступно для общественности, и не важно, что сроки горят, и завтра сдавать проект.
Работа в фигме расхолаживает дизайнера
Возможно, конечно, это лично моё субъективное мнение, но макеты, которые отдаются дизайнерами под верстку сайтов, ниже качеством по сравнению с макетами, выполненными в Photoshop или Sketch. (* я прям чувствую, что сейчас у кого-то подгорело)
И ладно, если с текстом это ещё может нормально прокатить, ленивый верстальщик с шестнадцатеричного представления цвета
скорее всего перейдет к rgba представлению
А вот если дизайнер решит делать такую штуку к блоку элементов (там где про background-color, color, background: linear-gradient ….), при этом, половина элементов будет с прозрачностью, а вторая, нет, то тут можно во вкладку Code и не смотреть.
В общем, Фигму нельзя рекомендовать как начальный инструмент для молодого дизайнера. Порог входа, тут пониже будет, но и нервы вы своими макетами коллегам испортите.
Отсутствие нормальной Темной темы
Это очень печально, но пока в Фигме нет возможности адекватно менять визуальное представление рабочего пространства под свои нужды. Особенно остро это стает когда пользуешься приложением, а не браузерной версией где можно извращается, ставя поверх браузера какие-то дополнения, плагины. Разуметься присутствуют плагины умельцев, но поскольку Фигма очень часто апдейтиться, то плагины за ней не успевают.
Лучше б конечно, чтоб за данный функционал отвечали те, кто пишет продукт
Личные попытки поставить Темную тему. (Windows 10, Chrome 76) были печальны.
*Возможно, у владельцев Mac-ов дела обстоят лучше. Делитесь в комментариях…
О том почему это важно и полезно можете посмотреть в презентации Тёмная сторона веба, Никиты Дубко Надеюсь что поправят. Всё-таки дизайнеры — тоже люди, и им тоже надо дать возможность комфортно работать 8 часов в сутки 5 дней в неделю.
Вот такой вот кратенький обзорчик Figma у меня вышел с пожеланиями и ворчанием.
Надеюсь, что мой пост прочитает кто-то из разработчиков данного продукта и сможет его улучшить. В любом случае за данным продуктом я вижу будущее, и желательно, чтоб он развивался в правильном направлении.
7 лайфхаков в Figma, которые упростят вам работу
Рассказываем, как быстро выровнять файлы, переименовать пачку фреймов за раз и сделать прогресс-бар в несколько кликов.
В Figma есть множество скрытых функций и горячих клавиш, которые самостоятельно найти не так просто. Но если их освоить, вы сможете ускорить работу над макетом: быстрее искать фреймы или группы и подбирать цвет с помощью пипетки.
Рассказываем о семи простых лайфхаках, которые помогут вам быстрее работать в Figma.
Свернуть вложенные фреймы и группы
Если вы работаете над большим проектом, в документе становится сложно ориентироваться из-за большого количества фреймов, групп и компонентов, особенно когда они все развёрнуты.
Чтобы моментально свернуть все фреймы, группы и компоненты, нажмите сочетание клавиш Alt (⌥) + L.
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Предпросмотр цвета
Выделите любой фрейм или фигуру, нажмите кнопку I, зажмите правую кнопку мыши и водите курсором по макету. Любой цвет под ним станет фоновым для выделенного элемента. Так вы сможете быстрее выбрать нужный оттенок для кнопки, текста или основного фона макета.
Переименование фреймов
По умолчанию Figma создаёт новые фреймы с названием Frame 1 — оно ничего не говорит о содержимом фрейма, особенно для тех, кто в ваш макет заходит впервые. Переименовать один такой фрейм — легко, но если их 10 или 20, то придётся потратить на это много времени.
Чтобы быстро систематизировать названия одинаковых по смыслу фреймов, выделите их, нажмите сочетание клавиш Сtrl (⌘) + R. Откроется меню, в котором вам будет предложено переименовать выделенные объекты:
Настройки переименования объектов:
Выравнивание с Tidy up
Два одинаковых объекта поставить ровно очень просто. Но если их 10 или 20, это превращается в большую и нудную задачу. Чтобы дизайнер не занимался подобной рутиной, в Figma есть функция Tidy up, с помощью которой можно автоматически расставить все объекты ровно, поменять их местами и изменить отступы.
Как пользоваться Tidy up
Горизонтальный прогресс-бар
Если вы занимаетесь интерфейсом технически сложного приложения, скорее всего, вам понадобится прогресс-бар. В Figma есть множество способов его нарисовать, но самый простой — с помощью текста!
Как создать горизонтальный прогресс-бар из текста
Теперь у вас есть регулируемый прогресс-бар. Чтобы изменить длину полосы загрузки, просто добавляйте в него текст:
Круглый прогресс-бар
Если вместо горизонтального прогресс-бара вам нужен круглый, его сделать так же легко.
Готово — получился круглый прогресс-бар. Чтобы изменить его длину, наведите курсор на фигуру, зажмите правой кнопкой мыши один из концов фигуры и тяните.
Кляксы стандартными инструментами
В Figma есть много плагинов для создания интересных форм, но их можно сделать и самостоятельно с помощью стандартных инструментов. Например — сферы и связки, похожие на кляксы.
Как сделать кляксу
Теперь вы можете двигать фигуры как угодно и они будут похожи на кляксы:
обложка: Катя Павловская для Skillbox Media
