A collection of open source plugins, widgets and other resources for Figma + FigJam that have been shared on GitHub. Фигма-чат — крупнейшее сообщество пользователей Figma в Телеграме, в котором дизайнеры помогают друг другу со сложными вопросами.
Figma’s new community profiles let users view and remix design files
Do you have more questions about Figma or the next steps you should take? For all things to do with the Figma collaborative design tool From the very beginning, Figma chose a community-focused marketing strategy that reflected their collaborative product and stuck with it throughout the years. Figma Community.
Open to all
Statistics Statistics The technical storage or access that is used exclusively for statistical purposes. The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Paid files and plugins have officially appeared in Figma Community Figma has introduced new selling tools and the Figma Creator Fund for Figma Community. Now the project preview will have a price tag or an inscription that there are in-app purchases. Figma is launching a major update to its Community platform. The Community was launched in 2019 as a shared library where Figma creators could share the plugins, widgets, and various apps they created and others could use them mostly for free.
Вместе с этим команда добавила поддержку популярных среди разработчиков сервисов в виде расширений. Это позволит взаимодействовать с командой через Figma и меньше переключаться между рабочими приложениями. Также можно разрабатывать собственные расширения, оптимизированные для специфического рабочего окружения. С помощью DevMode добавили инструмент для отслеживания уже готовых для разработки экранов и элементов. Раньше для этого дизайнеры добавляли готовые макеты в отдельный файл, но теперь можно отмечать их с помощью кнопки Ready for development. Так разработчики могут понять, что макет больше не будет изменяться, а кроме финальной версии можно просмотреть всю историю изменений. Также команда Figma выпустила расширение для VS Code. С его помощью разработчики могут просматривать макеты в редакторе кода и не переключаться на другое приложение. С 2024 года для доступа к функциям будет требоваться платная подписка Figma. В компании рассказали, что разработчикам не всегда нужны все возможности Figma, поэтому в 2024 году станет доступен новый тариф только с доступом к расширению и режиму DevMode. Переменные В Figma появилась поддержка переменных, с помощью которых можно управлять состояниями макетов. Во время презентации рассказали, что команды дизайнеров разрабатывают макеты приложений и веб-сайтов для нескольких языков, разрешений экранов и операционных систем. Кроме того, у приложений может быть поддержка нескольких цветовых тем. Всё это усложняет дизайн-систему, и дизайнерам приходится использовать несколько файлов или сторонние плагины для поддержки большого количества сценариев использования. К тому же, имеющиеся способы практически не связывают дизайнеров с разработчиками, что создаёт дополнительные сложности. Для решения этой проблемы команда Figma добавила поддержку переменных. С их помощью можно реализовать быстрый способ переключения макетов для разных разрешений экранов, платформ, цветовых тем и языков. Таким образом все макеты будут находиться в одном файле, а переключаться между ними можно с помощью выбора значений переменных. Сейчас есть поддержка следующих возможностей в переменных: числовые, текстовые, цветовые и логические переменные, хранящие в себе изменяемые значения; названия переменных и области видимости, позволяющие командам взаимодействовать с макетами; режимы отображения макетов в зависимости от переменных. Работу с переменными поддерживают плагины и Figma API. Это позволяет сторонним разработчикам создавать инструменты для автоматизации и более удобного взаимодействия с переменными.
И все это не покидая среду разработки! Переменные Большое обновление! Переменные позволяют оптимизировать процесс проектирования и повысить его эффективность. Поддержка псевдонимов aliasing в переменных Эта функция позволяет использовать переменные с учетом контекста, что облегчает их понимание для всех членов команды. Вы можете создать для одной переменной несколько имен псевдонимов. Это полезно, когда одно и то же значение применяется в проекте по-разному. Например, у вас есть основной цвет бренда, который используется как цвет фона в одних местах и как цвет обводки в других. Вместо того чтобы создавать отдельные переменные для каждого случая, вы можете создать одну переменную для цвета и псевдонимы "Цвет фона" и "Цвет обводки", которые ссылаются на исходную переменную. Таким образом, если фирменный цвет изменится, вам нужно будет обновить только исходную переменную, а все псевдонимы отразят это изменение. Определение области применения переменных Область применения переменной или scope — это контекст, в котором она доступна. В рамках дизайн-системы это может быть конкретный проект, страница или даже отдельный компонент. Функция упрощает работу с дизайн-системой и помогает быстро понять, где применяется та или иная переменная. Например, у вас есть переменная, определяющая размер внутреннего отступа padding , которая используется во всем проекте. Это глобальная переменная. Но внутри конкретного компонента вы хотите сделать отступ другим. Вы можете создать новую переменную с тем же именем, но применимую только к этому компоненту. Когда вы ссылаетесь на переменную padding внутри него, она использует значение, привязанное к компоненту. Когда вы ссылаетесь на переменную padding где-то еще, она использует глобальное значение. Режимы переменных с различными значениями Источник Режимы позволяют определить набор переменных для каждой темы. Например, цветовые переменные для светлой темы — light-background и light-text, и соответствующие переменные для темной темы — dark-background и dark-text. Значения переменных не ограничиваются цветами, это могут быть также текст, отступы или булевы значения, которые определяют внешний вид тех или иных элементов. Когда все переменные заданы, вы можете быстро переключаться между темами в панели справа раздел Layer.
Publish Design to Community
| Unofficial Figma Community | Figma’s Systems community category is aimed at giving designers a head start with interactive designs such as UI kits and wireframe templates. |
| Figmalion – Figma newsletter and community knowledge base | это отличный способ находить вдохновение, учиться у опытных коллег и делиться своим опытом с другими участниками сообщества. |
| Open to all | Комьюнити У Figma развитое сообщество разработчиков и дизайнеров, которые делятся своими проектами. |
| Куда и как уходить компаниям и дизайнерам, если Figma перестанет работать | Do you have more questions about Figma or the next steps you should take? |
Step 1: Login to your Figma account
- Дизайн-системы: 11 примеров в Figma и GitHub на 2024 год
- Куда и как уходить компаниям и дизайнерам, если Figma перестанет работать | РБК Тренды
- Дизайн-системы: 11 примеров в Figma и GitHub на 2024 год
- Community Growth at: Figma - Community Inc.
- Community Growth at: Figma
- Яндекс Образование
Переменные
- Adobe пообещала оставить Figma бесплатной, но сделать редактор лучше
- Figma Templates, UI kits and Freebies - Free Figma resources
- Unofficial Figma Community
- Гид по Фигме для начинающих веб-дизайнеров
- Скачать Figma с официального сайта
- How Do I Get to the Figma Community?
Figma Community Awards 2022. Show your love!
У Figma развитое сообщество разработчиков и дизайнеров, которые делятся своими проектами. For all things to do with the Figma collaborative design tool Большой список обновлений в фигме, которые упростят и ускорят работу с макетами, также перечислили 32 новых функционала и как ими пользоваться.
Open to all
Куда и как уходить компаниям и дизайнерам, если Figma перестанет работать Фото: Shutterstock Многие дизайнеры — и на фрилансе, и в штате компаний — работают в сервисе Figma. Однако есть риск, что он может стать недоступен для российских корпоративных клиентов. Что такое Figma и чем она так хороша 10—15 лет назад дизайнеры рисовали макеты в основном в Photoshop. Появление редактора Sketch революционизировало их работу: это решение было разработано специально для создания макетов и решало большинство ежедневных проблем, с которыми сталкивались дизайнеры.
Например, теперь получалось рисовать сразу несколько макетов одновременно. Но с появлением Figma у дизайнеров появился универсальный инструмент, который позволил перевести всю работу в облако и работать совместно как с другими дизайнерами, так и с заказчиками. Впоследствии эту идею переняли и Sketch, и даже создатель Photoshop компания Adobe предложила во многом копирующее Figma решение Adobe XD.
Достоинство Figma в том, что этот сервис позволяет удобно и быстро работать с файлами без необходимости сохранять их, к примеру, для отправки заказчику — просматривать их можно в том же облаке, в котором над ними ведется работа. И именно в этом удобстве заключается проблема: если доступ к сервису потеряется, многие специалисты останутся без доступа к результатам своей работы. Сейчас Figma — самый распространенный инструмент работы для графических дизайнеров и дизайнеров интерфейсов.
Это поможет быстрее подбирать подходящий шрифт и сразу попробовать несколько похожих; Превью — строка выбора шрифта теперь отображает название в стиле самого шрифта, а не системного для Figma. Приобретение Diagram Представители Figma обращают внимание на тренды использования искусственного интеллекта в дизайне и разработке. В компании считают, что использование подобных технологий поможет ускорить процесс создания макетов. Дизайнеры смогут получать стартовые шаблоны, созданные силами ИИ, которые в процессе можно будет доводить до желаемого результата.
Figma продолжает формировать команду машинного обучения для разработки подобных функций. В рамках этого процесса компания купила сервис Diagram , основанный Джорданом Сингером Jordan Singer. Долгое время Сингер в одиночку разрабатывал расширения для Figma на базе машинного обучения и искусственного интеллекта. Теперь команда проекта Diagram будет работать над ИИ-функциями вместе с разработчиками Figma.
Возможности Diagram Сервис Diagram позволяет пользователям генерировать SVG-иконки, изображения, ассеты, фотографии и арты. Также с его помощью можно создавать тексты для макетов, которые более похожи на реальное наполнение, чем классический шаблон Lorem Ipsum. Кроме этого, предусмотрена функция автоматического именования слоёв в Figma. В ближайшее время часть возможностей Diagram войдёт в стандартный пакет Figma, а обе команды разработчиков сосредоточатся на новых возможностях.
Представители компании пока не называют условия использования ИИ-функций, но, вероятно, что большая часть из них будет доступна только по подписке. Figma для образования В прошлом году Figma объявила о партнёрстве с Google Chromebook. Компании планировали подготовить специальные версии Figma и FigJam для школьников в возрасте старше 13 лет. За последний год исследователи Figma и Google успели поработать с 50 школами в США и пообщаться с более чем 10 тыс.
За это время удалось выявить основные потребности школьников. Теперь Figma доступна бесплатно для всех школ, преподавателей и учеников на территории США. Компания открыла возможности для школьников всех возрастов. Вместе с этим бесплатно Figma смогут пользоваться ученики школ Японии.
Связано это с тем, что разработчики сервиса выпустили полноценную адаптацию интерфейса на японский язык.
Icon to share article via Email. It was the best and in some cases, the only choice available when it came to design software, and its price tag was prohibitively expensive. Its features were powerful — but a good portion was either unintuitive or unnecessary. Figma stepped onto the stage at the perfect time with a collaborative, community-minded solution. Figma: a quick history We know that Figma first rose to public infamy after its official release in 2016. What you might not know, however, is that the bricks were being laid for this meteoric rise to success long before then. Figma was founded by Dylan Field and Evan Wallace in 2012. They had both previously worked at Microsoft but wanted to create something that allowed designers to collaborate online — a feature absent from the design software of the day.
The following two years saw Figma slowly build its community through word-of-mouth marketing, as well as strategic partnerships. Product and values To properly understand where Field and Wallace were coming from when they conceptualized Figma, you need to know what the design landscape looked like at the time: It was expensive, unintuitive, and often limiting — a far cry from what we are used to today. The digital transformation was also well underway, and brands needed the ability to produce high-quality visuals quickly and fluidly.
Сооснователь и CEO компании Figma Дилан Филд заявил о замораживании бизнес-аккаунтов российских компаний в соответствии с режимом санкций. Кроме того, платформа останавливает новые продажи подписок на сервис в России. Иллюстрация: Figma То есть для российских пользователей остаётся доступен только базовый бесплатный тарифный план.
Что такое Figma и чем она так хороша
- Figma Resource: Free Download UI Kits, Mockups and more!
- 84 лучших Figma плагинов для UI/UX дизайна 2023
- Figma прекращает работу в России
- Join our Newsletter Community
- How Do I Access Figma Community?
- Like GitHub for designers
How To Become Figma Community Advocate
| How to Use Figma Community | What is Figma Community | Lesson 12 | Речь идёт о прекращении работы в рамках тарифных планов Figma Professional, Figma Organization и Figma Enterprise. |
| Figma’s community-driven path to success | The Figma community allows you to access a range of categorized resources to shortcut your design process from ideation to collaboration and hand-off. |
| Figma: глобальные обновления + 32 новых улучшений | 15 сентября 2022 года в блоге Figma и в блоке новостей на сайте Adobe вышли новости о сделке между двумя компаниями. |
| 84 лучших Figma плагинов для UI/UX дизайна 2023 | Figma community is a place for designers, artists, and other creatives to share files and plugins. |
Search code, repositories, users, issues, pull requests...
Сейчас Figma — самый распространенный инструмент работы для графических дизайнеров и дизайнеров интерфейсов. У Figma развитое сообщество разработчиков и дизайнеров, которые делятся своими проектами. Web to Figma | Figma Community. Главная» Новости» Figma новости.
Figma: глобальные обновления + 32 новых улучшений
В частности, по словам Бельски, останется «фримиум»-версия сервиса, в которой базовые возможности редактора не потребуют платы. Сооснователь Figma в свою очередь добавил, что роста цен не планируется. Adobe же намерена интегрировать собственные решения в Figma, а также открыть доступ к шрифтам и изображениям.
Step 3: Share Your Knowledge: Showcase your expertise through blog posts, tutorials, webinars or meetups that revolve around Figma. This can help you build credibility within the community. Not only do you get to connect with like-minded individuals and improve your skills, but you also get to influence the future of the platform. Moreover, you get to be a part of a global community of design enthusiasts and play a significant role in its growth and development.
Чтобы удалить цвет — нажмите Delete. Добавьте объектам заливки с разными градиентами и сочетайте фигуры друг с другом. Вы можете использовать Layer — режим наложения, накладывать их друг на друга для интересного решения.
Инструменты для работы с текстовым слоем стандартные: начертание, размер, выравнивание текста, высота строки, отступ между параграфами и красная строка. Также есть превью шрифтов и возможность переключать категории, например, отобразить все шрифты, только популярные или установленные на вашем устройстве. В меню Advanced Type есть три типа изменения размера текстового блока: 1 Width, где ширина подстраивается под контент, 2 Fixed, чтобы задать блок фиксированной ширины 3 Height, чтобы подстроить высоту текстового блока под его контент. Всегда создавайте отдельные текстовые блоки для заголовка и основного текста. Так их удобнее редактировать. В Фигме можно перевести шрифт в кривые и создать необычный объект вашего дизайна. Выберите текстовый слой, пункт Flatten и дважды кликнете на текст. Изменённый шрифт можно сохранить как SVG-файл и вставить в дизайн. Компоненты Компоненты в Фигме помогают применять изменения к группе элементов.
Это экономит время дизайнера при изменениях макета. Допустим, вы сделали макет на 50 страниц, а заказчик захотел изменить в нём цвет кнопок. С компонентами вам достаточно будет пару раз кликнуть мышкой и применить новый цвет ко всем кнопкам сразу. Увидеть компоненты можно по цвету слоя — Фигма помечает их фиолетовым. Кроме цвета, родительский компонент помечается иконкой с 4 ромбами, а дочерние компоненты — иконкой с одним ромбом. Теперь ваш фрейм — родительский компонент. Создайте его копии, чтобы получить дочерние компоненты. Все изменения родительского компонента будут отражаться на дочерних компонентах. Вы можете менять настройки дочернего компонента, делая его относительно самостоятельным.
Например, можно вручную задать компоненту размер, цвет, обводку, отличные от родительского компонента. При этом связь между компонентами не потеряется. Внесите новый объект в родительский компонент, и он отобразиться в дочерних компонентах, даже измененных ранее. Чтобы восстановить нарушенную связь между родительским и дочерним компонентом, выделите дочерний компонент, нажмите иконку возврата действия и сбросьте параметры, которые меняли в нём в ручную. Когда вы работаете с компонентами, удобно держать их в одном месте, чтобы они не терялись на холсте. Организовать компоненты для небольших проектов, например, сайта из десятка страниц, можно в отдельном фрейме-контейнере. Создайте новый фрейм, назовите его Components и вложите в него родительские компоненты. Пример организации компонентов Наряду с компонентами в Фигме можно создавать стили. Это коллекции текста, цветов и эффектов, которые вы сможете применять к элементам дизайна.
Когда вы меняете свойства стиля, они меняются во всех объектах, использующих его. Сохраните шаблон из компонентов и стилей, чтобы создать собственную дизайн-библиотеку для будущих проектов. Создайте стили, которые будете применять ко всем возможным текстам вашего дизайна: заголовкам, параграфам, подписям, тэгам. Используйте панель свойств справа. Сохраните все варианты текстовых стилей в отдельном фрейме и применяйте при работе с текстами. По аналогии с текстовыми стилями, создайте заливки с основными цветами вашего дизайна. Подпишите каждый цвет и укажите его код. Создайте стили размытия слоя, фона и тени. Для работы с компонентами Фигма разработала функцию Auto Layout.
Shutterstock и тд. Не посоветуем UI-kit, мокап или набор иконок Всё это можно найти в Яндексе или Гугле по запросам вроде figma ios ui kit или figma material ui kit. Не накидаем ссылок на лучшие дашборды, подборку интернет-магазинов или презентаций. Много полезных ресурсов можно найти в Figma Community и маркетплейсах для дизайнеров, например, envato. Мы организовали чат не для того, чтобы искать информацию за тех, кто ленится делать это сам. Мы не анонимны и оно представляет для нас угрозу. Чужая интеллектуальная собственность удаляется, а попросивший её или поделившийся ей теряет голос.
У нас есть чувство юмора, но нет времени на троллей. Если участник пришёл в чат задирать других, он быстро улетает в мьют. Используй читаемое имя в Телеграме. Оно может быть на кириллице, включая украинский, или латинице. Если в твоём сообщении нет никакой пользы участникам, скорее всего оно будет удалено. Примеры эксплуатации чата У меня тут фриланс-заказ, надо нарисовать макеты в Фигме, пишите в личку. Поучаствовать в иследованиях.
Рекрут респондентов запрещён. Твои кейсы с Беханса и шоты с Дрибла, которые ты предлагаешь лайкнуть. Просим тебя не заниматься самопиаром. Просьба дать инвайт на Дрибл. Если у тебя есть лишние инвайты на Дрибл, ими не стоит делиться в чате.
Работа с Figma Community
Как уже говорилось ранее, ни один элемент при этом не пострадает — шрифты, кривые и изображения никуда не денутся и не сместятся. Срабатывает даже простое перетаскивание файла из первого приложения во второй сервис. Доступно копирование отдельных элементов в формате SVG. Разработка прототипов в Figma Перейдем к элементам разработки интерфейсов. Рассмотрим настройку фреймов, слоев, макетов и сеток, типографики и многого другого. Макеты и сетки Для создания макета необходимо выделить нужный слой, перейти в раздел «Design» в правой панели, а там уже найти пункт «Layout grid». Там выбираете размер, цвет и прозрачность. Можете поменять форму с сетки на столбцы или строчные ряды.
Просмотр прототипов Суть этой функции в том, что вы можете просматривать, как будет выглядеть созданный вами интерфейс на самых разных устройствах. Для этого в панели на правой части экрана выбираем раздел «Prototype». В категории «Device» подбираете нужное вам устройство с предустановленным размером экрана. При необходимости можно изменить цвет модели и расположение на горизонтальное или вертикальное. После того как настройка завершится, жмем на кнопку «Present», расположенную справа от «Share», для просмотра прототипа на выбранном девайсе. Работа с изображениями В Figma можно перемещать изображения из разных источников — перемещать из памяти компьютера, а также копировать и вставлять из интернета. При этом не стоит забывать об авторских правах на картинки об этом я, кстати, рассказывала ранее.
На этом работа с изображениями не ограничивается. В данном графическом редакторе предусмотрено наложение эффектов и изменение некоторых параметров. Все это доступно в специальной панели в правой части, которая выходит при выделении картинки. Работа с компонентами Любой созданный вами элемент можно добавить в раздел «Компоненты» для повторного использования в других проектах. В результате значок элемента в панели слоев поменяется.
Привязать значения к блокам, а потом просто переключением менять полностью дизайн. Приведем пример, чтобы активировать новый инструмент Local Variables, нужно щелкнуть по свободному пространству figma и нажать соответствующую кнопку. Откроется всплывающее окно. Нажмите Create Variable, и выберите тип переменной. В программе мы добавили 3 цвета, текст и число.
Используем их в блоках. Выберете графический элемент, откройте Libraries и установите другой цвет, таким образом, мы привяжем этот цвет к объекту и при изменении палитры во вкладке Variables, цвет также будет меняться. К одной переменной может быть привязано десятки или сотни кнопок или других элементов интерфейса, что очень удобно, когда нужно сделать меню в едином стиле. В итоге поменять графическое оформление будет просто, пару щелчков и готово. При такой настройке увеличиться скорость разработки приложения. Ниже показан пример, как заменить встроенный цвет библиотечным. Описание также легко поменять, как и графику в макете. Для начала создайте текстовое поле и выберите его. В Design установите значение, пример на картинке. Напомню, что в нашей базе также хранится Number со значением 20.
Это число можно использовать для разных целей, сделать округление углов или отступы. Давайте это и сделаем. Создайте примитив Rectangle и выполните действия показанные на скриншоте. Разработка светлого и темного дизайна сайта В основном Figma предоставляет бесплатный аккаунт без ограничения по времени и количеству проектов, однако некоторые функции платны. Инструмент Variables урезан. Здесь можно создать только один дизайн, если требуется сделать светлый и темный вариант придется купить подписку. В бесплатной версии ограничения накладываются на создание колонки. Однако при щелчке по иконке потребуется расширить тарифный план. Протестировать новые функции бесплатно все же можно, по этой ссылке Variables-playground Config-2023 Здесь уже готовый макет в двух вариантах Light и Dark. Изменить стиль можно щелчком мыши в раскрывающемся меню.
Пример карточки товаров. Темная и светлая тема. Прототипы Улучшилось добавление связей между элементами макета, теперь через математические выражения, токены и условия можно создавать новые типы связей, более продвинутые. Например, установить счетчик на форме, где при щелчке по кнопке увеличиться число. Также добавилась функция предпросмотра, где в отдельном окне загружается прототип. С этими функциями разработка станет еще быстрее. Бесплатное тестирование прототипа доступно на тестовом макете по ссылке Advaced Prototyping playground. Секции Section Появился новый инструмент секции, который позволяет захватывать объекты и помещать их в контейнер.
The new workspace features will be rolling out to everyone this week, while Internal Profiles will be available to customers on the organization plan first and rolling out to everyone in a month.
Though relatively new at around three years old, Figma has quickly established itself among competitors like Sketch and Adobe XD. Its standout feature, Multiplayer mode, is like Google Docs for design, letting team members collaborate in real time on project files that are hosted in the cloud. And so our hope is that people will start doing that publicly as well.
Step 3: Share Your Knowledge: Showcase your expertise through blog posts, tutorials, webinars or meetups that revolve around Figma. This can help you build credibility within the community. Not only do you get to connect with like-minded individuals and improve your skills, but you also get to influence the future of the platform. Moreover, you get to be a part of a global community of design enthusiasts and play a significant role in its growth and development.