Большой список обновлений в фигме, которые упростят и ускорят работу с макетами, также перечислили 32 новых функционала и как ими пользоваться.
Яндекс Образование
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 is bringing together the design systems community on April 16 to share new features, best practices, and a peek into what’s coming next in the half-day event. У Figma развитое сообщество разработчиков и дизайнеров, которые делятся своими проектами.
Скачать Figma с официального сайта
В июне ведомство по конкуренции и рынкам Великобритании (CMA) начало тщательное расследование планируемого слияния Adobe и Figma стоимостью 20 миллиардов долларов. В Figma запустили бета-тест режима DevMode, который, по словам компании, уменьшает разрыв между прототипированием продукта и его разработкой. Keeping with the Community theme, Figma is redesigning its platform to be centered on team members instead of folders and files.
11 примеров российских и зарубежных дизайн-систем на 2024 год: с исходниками в Figma и GitHub
Скачать Фигму на iOS Онлайн редактор Figma Для того, чтобы начать работу в Фигме, вам не обязательно что либо скачивать и устанавливать на свой компьютер или планшет. Редактор имеет возможность работать онлайн, что является просто огромным преимуществом перед конкурентами. Вам достаточно пройти регистрацию на сайте , и вы можете начать полноценно работать в веб-версии. Важно заметить, что онлайн доступна именно полноценная его версия, абсолютно такая же, какая у вас будет после установки программы. Так же, стоит отметить, что все проекты, которые вы создаете при помощи Figma, хранятся в облаке и доступны как в десктопной версии программы так и в онлайн версии. А это значит что вы можете войти в свой аккаунт на сайте Фигмы с любого компьютера и получить доступ к своим проектам, что позволит вам создавать новые или вносить коррективы в уже существующие макеты из любой точки земного шара. Регистрация на официальном сайте Для работы в редакторе, вам необходимо создать учетную запись на официальном сайте Figma. Сделать это достаточно просто, вам всего лишь понадобится указать свой e-mail и придумать надежный пароль. Перейдите на сайт Фигмы и нажмите на кнопку Sign up в правом верхнем углу. В открывшейся форме регистрации введите ваш e-mail и придумайте пароль, после этого нажмите кнопку Create account.
Если у вас есть аккаунт Google, то в форме регистрации вам достаточно будет нажать на кнопку Continue with Google — ваш аккаунт будет создан с использованием учетной записи Google.
Это значительно ускоряет процесс создания и сборки проектов. Для более эффективного сотрудничества между дизайнерами и разработчиками в Figma реализована функция "Статус раздела", позволяющая отслеживать готовность фреймов к разработке и сравнивать версии дизайна. Кроме того, расширение Figma для VS Code позволяет работать с файлами, сотрудничать с разработчиками и получать уведомления, не покидая редактор кода. Это значительно упрощает интеграцию Figma в рабочий процесс разработки. Переменные Переменные позволяют хранить значения, такие как цвета, отступы, видимость и другие, которые могут быть повторно использованы в различных проектах. Они могут быть опубликованы в библиотеках команды, что позволяет обновлять значение переменной и автоматически обновлять соответствующие дизайны во всех файлах. Помимо переменных в Figma добавили коллекции и группы.
Project Pages serve as a central hub for teams, housing pinned files, notes, and links. Team and Organization Pages show which users are working on which projects, and Internal Profiles show the most recent files the user has contributed to. 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.
И, конечно, много полезных файлов от самих Figma. Как пользоваться Figma Community Чтобы попасть в раздел — нужно залогиниться в Figma и выбрать раздел Community на панели слева. Или кликнуть на иконку в левом верхнем углу сайта и выбрать Community. Для удобства можно сохранить главную страничку в закладках браузера.
В Figma Community можно посмотреть новые и топовые файлы раздел Explore , искать работы в разных категориях, а также подписываться на понравившихся авторов их файлы будут выводиться в ленте Feed. На главной странице — подборка популярных и трендовых работ: В каждом разделе есть возможность посмотреть отдельно все файлы и плагины, а также искать работы авторов по популярным тегам и посмотреть топовые плагины этого направления. Как скачать и использовать файлы Открыть нужный файл и нажать на кнопку Duplicate в правом верхнем углу.
Figma замораживает аккаунты российских организаций
| Figma Community Awards 2022. Show your love! | Graphic Design Tips | Сейчас Figma — самый распространенный инструмент работы для графических дизайнеров и дизайнеров интерфейсов. |
| Unofficial Figma Community | Figma community is a place for designers, artists, and other creatives to share files and plugins. |
| Figma замораживает аккаунты российских организаций | Figma's community-driven approach, thriving plugin ecosystem, and educational initiatives further solidify its role as a design tool and a catalyst for fostering creativity and collaboration within the global. |
| Что такое Figma и как ей пользоваться | Хотелось бы сначала отметить ключевые моменты, благодаря которым Фигма набрала столь огромную популярность. |
| Publish Design to Community | Фигма-чат — крупнейшее сообщество пользователей Figma в Телеграме, в котором дизайнеры помогают друг другу со сложными вопросами. |
Страницы ресурсного сообщества
- Глобальное обновление Figma 2023
- Figma Community Beta: Explained
- Like GitHub for designers
- Use saved searches to filter your results more quickly
- Мастхэв для дизайнера: 16 файлов и плагинов в Figma Community
- Dale Leydon
Мастхэв для дизайнера: 16 файлов и плагинов в Figma Community
Используется когда в макете нужно заменить текстом из библиотеки. Boolean — принимает значение true и false. Как использовать Variables на практике? Допустим нужно выполнить заказ, дизайн сайта в двух стилях темный и светлый. Разумеется, без инструмента variables пришлось бы сделать шаблон двух видов и предоставить заказчику. Такой подход не практичен, так как займет много времени.
Лучше задать переменные, которые будут включать в себя цвета, числа и строки. Привязать значения к блокам, а потом просто переключением менять полностью дизайн. Приведем пример, чтобы активировать новый инструмент Local Variables, нужно щелкнуть по свободному пространству figma и нажать соответствующую кнопку. Откроется всплывающее окно. Нажмите Create Variable, и выберите тип переменной.
В программе мы добавили 3 цвета, текст и число. Используем их в блоках. Выберете графический элемент, откройте Libraries и установите другой цвет, таким образом, мы привяжем этот цвет к объекту и при изменении палитры во вкладке Variables, цвет также будет меняться. К одной переменной может быть привязано десятки или сотни кнопок или других элементов интерфейса, что очень удобно, когда нужно сделать меню в едином стиле. В итоге поменять графическое оформление будет просто, пару щелчков и готово.
При такой настройке увеличиться скорость разработки приложения. Ниже показан пример, как заменить встроенный цвет библиотечным. Описание также легко поменять, как и графику в макете. Для начала создайте текстовое поле и выберите его. В Design установите значение, пример на картинке.
Напомню, что в нашей базе также хранится Number со значением 20. Это число можно использовать для разных целей, сделать округление углов или отступы. Давайте это и сделаем. Создайте примитив Rectangle и выполните действия показанные на скриншоте. Разработка светлого и темного дизайна сайта В основном Figma предоставляет бесплатный аккаунт без ограничения по времени и количеству проектов, однако некоторые функции платны.
Инструмент Variables урезан. Здесь можно создать только один дизайн, если требуется сделать светлый и темный вариант придется купить подписку. В бесплатной версии ограничения накладываются на создание колонки. Однако при щелчке по иконке потребуется расширить тарифный план. Протестировать новые функции бесплатно все же можно, по этой ссылке Variables-playground Config-2023 Здесь уже готовый макет в двух вариантах Light и Dark.
Изменить стиль можно щелчком мыши в раскрывающемся меню. Пример карточки товаров.
Publishing to the Community To publish your design to the community, first make sure that you have a copy of your design file opened in the editor. Each file will have its own page, allowing other community members to browse, search and find your file.
Designers and other creators can duplicate the updated version to get access to those changes. Publish updates the same way you originally published the file Remixes Remixes are files in the community that originate from another community file.
У нас нет ограничения на мат как способ выражения эмоций, если в твоём сообщении есть ещё что-то полезное, но если ты используешь его постоянно и густо, это вызывает раздражение и будет удалено. Мы уважаем украинский и другие языки, но не понимаем их, поэтому просим задавать вопросы на русском. Если понимаем вопрос — отвечаем. Непонятные сообщения удаляются. Мы не можем помочь с производительностью через чат, не ответим на вопрос о том, какой комп брать и почему на 4GB Фигма тупит.
Какой выбрать монитор для дизайна мы тоже уже обсудили в Дизайн-чате. Можем удалить фотографию экрана компьютера, сделанную на телефон, если считаем её неразборчивой. Загрузка файлов отключена в настройках чата в целях безопасности. Поток сообщений, состоящих из одного-двух слов, удаляется. Мы любим посты-письма, а не посты-СМС. Не стоит спрашивать, почему твоё сообщение удалили и обижаться на это. Мы удаляем сообщения, которые считаем бесполезным для участников чата.
Формулируй мысли в один пост у себя в Избранном, а потом отправляй. Если сообщение не несёт никакого смысла, оно удаляется. Бот-модератор автоматом удалит такие сообщения вместе с текстом. Мы заблокировали стикеры намеренно. Гифки разрешены только для того чтобы показывать скринкасты. Переходи сразу к делу. Прямая продажа услуг, криптоссылки, секс-услуги, способы заработка и прочий мусор удаляется за секунды с последующим баном и репортом в Телеграм.
Регулируйте в Фигме цвета, яркость изображения, контраст, насыщенность, яркость отдельных участков фото. Используйте дополнительные настройки цвета и изменяйте положение градиента, чтобы добиться нужного эффекта изображения. Вы можете добавлять цвета или другие фотографии к изображению с инструментом «смешивание слоёв». Например, чтобы попасть в фирменный стиль сайта или добавить фотографии индивидуальности. Вы можете применять векторные объекты к фотографиям и использовать их как маски.
Чтобы сделать маску в Фигме, создайте объект, перенесите слой ниже фотографии. Вы можете загружать в Фигму SVG-файлы и работать с ними. Обычно файлы такого типа вставляются как фрейм. Эффекты и маски Фигма позволяет работать с заливкой фреймов и текстовых слоёв. Инструменты заливки находятся в левой панели свойств.
Вы можете выбрать цвет, прозрачность, указать конкретные значения цвета. В Фигме шесть типов заливки: сплошной цвет Solid , линейный градиент Linear , радиальный градиент Radial , угловой градиент Angular , радиальный с четырьмя лучами Diamond , изображение Image. По умолчанию для объекта выбран режим ровной заливки Solid. Переключитесь на Linear — градиент с осью, вдоль которой изменяется цвет. По умолчанию он с двумя точками, одна из которых прозрачная.
Добавьте цвета ползунком или укажите значение цвета в поле Hex-кода. У линейного градиента есть третья неприметная ручка. Если зажать Alt Opt и потянуть за неё, цветовой переход отрисовывается перпендикулярно ей. Вы можете менять расположение крайних точек градиента. Двигая ползунки, вы можете настроить угол поворота градиента и скорость перехода от одного цвета к другому.
Вы можете добавить несколько цветов в градиент, кликнув по шкале над палитрой. Чтобы удалить цвет — нажмите Delete. Добавьте объектам заливки с разными градиентами и сочетайте фигуры друг с другом. Вы можете использовать Layer — режим наложения, накладывать их друг на друга для интересного решения. Инструменты для работы с текстовым слоем стандартные: начертание, размер, выравнивание текста, высота строки, отступ между параграфами и красная строка.
Также есть превью шрифтов и возможность переключать категории, например, отобразить все шрифты, только популярные или установленные на вашем устройстве. В меню Advanced Type есть три типа изменения размера текстового блока: 1 Width, где ширина подстраивается под контент, 2 Fixed, чтобы задать блок фиксированной ширины 3 Height, чтобы подстроить высоту текстового блока под его контент. Всегда создавайте отдельные текстовые блоки для заголовка и основного текста. Так их удобнее редактировать. В Фигме можно перевести шрифт в кривые и создать необычный объект вашего дизайна.
Выберите текстовый слой, пункт Flatten и дважды кликнете на текст. Изменённый шрифт можно сохранить как SVG-файл и вставить в дизайн. Компоненты Компоненты в Фигме помогают применять изменения к группе элементов. Это экономит время дизайнера при изменениях макета. Допустим, вы сделали макет на 50 страниц, а заказчик захотел изменить в нём цвет кнопок.
С компонентами вам достаточно будет пару раз кликнуть мышкой и применить новый цвет ко всем кнопкам сразу. Увидеть компоненты можно по цвету слоя — Фигма помечает их фиолетовым. Кроме цвета, родительский компонент помечается иконкой с 4 ромбами, а дочерние компоненты — иконкой с одним ромбом. Теперь ваш фрейм — родительский компонент.
Figma Templates, UI kits & Resources
This is the story of how Rust dramatically improving Figma’s server-side performance (one of their most important features). В Figma запустили бета-тест режима DevMode, который, по словам компании, уменьшает разрыв между прототипированием продукта и его разработкой. Подробная инструкция, как работать в графическом онлайн-редакторе Фигма для начинающих веб-дизайнеров. Figma представила большие обновления на Figma Config 2023: Dev Mode, переменные, улучшенный auto layout и многое другое. Figma Community.
Community Growth at: Figma
| Figma покидает Россию | For all things to do with the Figma collaborative design tool |
| Developer news from Figma | Речь идёт о прекращении работы в рамках тарифных планов Figma Professional, Figma Organization и Figma Enterprise. |
| Гид по Фигме для начинающих веб-дизайнеров | Уже в феврале текущего года Figma введут поддержку платных файлов, плагинов, виджетов и другого контента от сообщества графического редактора. |
| Figma замораживает аккаунты российских организаций | В этом ролике расскажу про два плагина Figma и одну отдельную программу, которые могут полностью заменить функционал DEV MOD в Figma! |
Куда и как уходить компаниям и дизайнерам, если Figma перестанет работать
Чтобы попасть в раздел — нужно залогиниться в Figma и выбрать раздел Community на панели слева. Figma community is a new feature on the Figma design tool (as of the time of writing this article, it’s in Beta, which means only a few people have access to it). Figma community is a place for designers, artists, and other creatives to share files and plugins. Похоже, что Adobe XD утратил дух сообщества, на котором сейчас процветает Figma. Выбрать материал в разделе Фигма комьюнити Материалы раздел Figma Community. If you've been hearing the buzz about Figma community beta and want to know what it's all about (and how to get access!), this guide will save you time.
Join our Newsletter Community
- Что произошло
- Icons, illustrations, and photos
- Больше интересного
- By the community, for the community
- Will there be less free content in Figma?
- Figma замораживает аккаунты российских организаций