Как обновить фигму

Обновление Figma: автоматизация, продвинутая совместная работа и обмен файлами

2020 год начался плодотворно. Мы провели в Сан-Франциско нашу первую конференцию «Config», которую посетило более 1000 пользователей Figma. И в этом месяце мы анонсируем 7 новых функций. Они помогут дизайнерам быстрее работать, продуктовым командам лучше сотрудничать, а сообществу дизайнеров дадут больше возможностей для открытого обмена файлами. Если вы не смогли посетить «Config», вы можете посмотреть видео-анонс ниже или прочитать эту статью. https://youtu.be/xL\_ruBAwVmo

На чем мы сосредоточимся в 2020 году

• Создание: внедрение инновационных функций, которые автоматизируют повторяющуюся работу
• Сотрудничество: включайте всех, кто участвует в процессе проектирования
• Сообщество: позволить сообществу дизайнеров делиться опытом и учиться друг у друга.

Разумеется, все это не имеет значения без надежной, высокопроизводительной платформы, так что это всегда будет нашим главным приоритетом.

Новые инструменты, которые помогут вам работать быстрее и эффективнее

Чтобы удалить ненужные шаги, манипуляции и клики мышью, мы добавляем новые функции, которые ускорят работу со шрифтами, цветом и интервалами.

? С момента релиза первой версии Auto Layout прошло всего пару месяцев. Однако, мы, опираясь на ваш фидбек, усердно работали над тем, чтобы сделать ее еще эффективнее. Теперь Auto Layout можно использовать для создания адаптивных компонентов, которые растягиваются, чтобы заполнить свои контейнеры. В дополнение к кнопкам, размер которых изменяется вместе с текстовой меткой и списками, элементы которых можно легко переставлять. Это особенно полезно при создании дизайнов для нескольких типов устройств.

? Figma поставляется с более, чем1000 предустановленных шрифтов. Кроме того, вы можете загрузить собственные шрифты. Множество вариантов выбора – это здорово, но скролл бесконечного списка шрифтов утомляет. Теперь усовершенствованный инструмент Font Picker отображает часто используемые шрифты и позволяет быстро выполнить поиск по шрифтам. Он также выделяет все шрифты, используемые в вашем файле, чтобы вы могли поддерживать согласованность всех ваших проектов.

? Иногда вам нужно изменить цвет заливки, обводки и текста, независимо друг от друга. В других случаях вам надо, чтобы они были одного цвета. Функция Selection Colors позволяет пакетно обновлять цвета заливки, обводки и текста одним щелчком мыши.

? Прототипирование играет важную роль, помогая вам быстрее проводить итерации ваших дизайнов, тестировать их и собирать быстрый и актуальный фидбек. Чтобы помочь вам создавать прототипы с более высокой точностью, мы добавляем взаимодействия с прототипами для новых устройств, таких как клавиатуры, геймпады и контроллеры. С помощью этих новых триггеров вы можете создавать прототипы сочетаний клавиш вашего приложения, например, Cmd + F, или даже меню видеоигр с кнопками управления на геймпаде.

Новые способы совместной работы

Несмотря на то, что в основе нашей работы всегда лежат инновационные функции, повышающие творческую производительность, мы знаем, что отличные продукты не создаются в одиночку. Работа единой продуктовой командой очень важна для создания продуктов, которые понравятся вашим клиентам. Но делиться, общаться и получать правильный фидбек сложно, потому что контекст легко теряется между командами, инструментами, и часовыми поясами.

? Теперь, чтобы никогда не терять контекст, вы можете добавить гиперссылку на любую страницу в Интернете, страницу в файле или фрейм в редакторе. Вы можете ссылаться на внешние ресурсы, например, документ с требованиями к продукту или на определенные страницы, или фреймы, чтобы создать интерактивное оглавление, которое поможет соавторам перемещаться по вашему файлу.

? Чтобы помочь соединить различные инструменты, которые вы используете в процессе проектирования, мы представляем новый Plugin Inspector API. Разработчики теперь могут обновлять плагины для отображения ключевой информации на панели свойств. Вы узнаете, что плагин Mapsicle, использовался для создания визуальных элементов карты, что облегчит его обновление.

? Обмен файлами дизайна является ключом к донесению ваших идей и получению поддержки, поэтому мы продолжим расширять возможности обмена. Мы добавили новое разрешение на совместное использование, которое позволяет вам делиться прототипом без общего доступа к базовому файлу дизайна. Эта функция скоро станет доступна пользователям с тарифными планами Figma Professional и Organization.

Новые каналы для обмена идеями с сообществом

Мы не хотим, чтобы сотрудничество ограничивалось только вашей командой или организацией. Мы хотим, чтобы вы могли учиться у всего сообщества дизайнеров и делиться с ним своими проектами.

Вот почему в октябре прошлого года мы представили бета-версию Figma Community. Мы хотели создать публичное пространство, где наши пользователи cмогут публиковать файлы дизайна, а любой человек в мире сможет просматривать их, делать ремиксы и учиться. За последние несколько месяцев мы видели, как более 400 дизайнеров опубликовали более 1000 файлов. Среди них шаблоны вайрфреймов, наборы иконок, примеры дизайн-систем, фреймы девайсов, иллюстрации и многое другое.

Во всех опубликованных файлах мы видели полезные UI-ресурсы. Например, Material Design UI Kit от Google, Visual Studio Code Toolkit от Microsoft и Base Gallery от Uber. Мы также были удивлены некоторыми невероятно креативными файлами, такими как игра Pac Man и アンドリュー DIY Magic: the Gathering Cards. Некоторые файлы улучшают повседневный рабочий процесс дизайнера, например, Design Handoff Checklisе Бена Фрика и Sticky Notes Бена Рэдклиффа.

Если вы еще не присоединились к бета-тесту, зарегистрируйтесь здесь, чтобы публиковать файлы в своем общедоступном профиле, а также изучать, дублировать и смешивать любые из 800 файлов, доступных в настоящее время в сообществе Figma.

Когда вы сможете попробовать новые функции

Обновления функций Auto Layout, Selection Colors и Plugin Inspector API доступны уже сегодня. Скоро появятся новый Font Picker и гиперссылки. В этом году вас ждет еще много обновлений. Следите за новостями.

Figma: глобальные обновления + 32 новых улучшений

08.08.2023

Сложность: высокая

12 мин.

572

Графический редактор фигма постоянно улучшается, и разработчики недавно выкатили глобальное обновление figma 2023. В статье мы перечислим изменения, которые коснулись редактора, а также расскажем про 32 обновления фигма, выпущенных для ускорения разработки проектов.

Выравнивание с переносом

Первое, что следует отметить это опция автовыравнивание. Кнопка wrap делает перенос на новую строку, при условии, что несколько объектов расположены в одну линию.

Как работает? Нажимаем wrap и начинаем масштабировать frame с объектами.

Приведем пример. Тестировать опцию будем на карточке товара. Создайте новый проект, и нарисуйте frame. Задайте ширину 500 пикселей, высоту 650. Добавьте картинку. Мышкой прижмите ее к верхнему краю. Вы можете выбрать любое изображение с фотостоков или воспользоваться плагином Unsplash, в нашем случае это фото с наушниками.

Карточка будет адаптивна под разные размеры. Будет меняться в зависимости от цифрового устройства. Сделаем, чтобы карточка растягивались при масштабировании.

Дальше следует инструкция для новичков, на случай, если вы запускаете Figma в первый раз. Для начала сгруппируйте картинку, щелкнув по ней и нажав Ctrl+G.

Заполним карточку: название, описание, кнопки. Если не знаете что писать, воспользуйтесь плагином например Fishtext in Russian. Он генерирует случайный текст на русском языке. Преобразуйте описание в frame и кнопки тоже поместите в отдельный фрейм.

Для этого выделите элементы, в контекстном меню выберите Frame Selection.

Делаем настройки всех элементов

Главный фрейм — установите Auto Layout как показано на скриншоте. Как только вы включите эту опцию, фрейм сожмется до нужных размеров, убрав пустоту.

Фрейм с описанием – настройки Auto Layout по горизонтали и выравнивание Align top Left.

Текст настройте Fill Container по горизонтали и Hug Contents по вертикали. То же самое проделайте с внешним фреймом, куда вложен text.

Готово. При изменении масштаба text будет переноситься на новую строку, и высота карточки также будет меняться.

Возможные проблемы: описание уходит за пределы видимости (вниз), а сама карточка не масштабируется по высоте. Чтобы исправить, зайдите в главный frame и установите Hug Contents по вертикали.

Осталось отредактировать кнопки. Задача – перенести кнопку на новую строку, если в ширине мало места. Самое время протестировать нововведение редактора.

Включим обновление figma wrap. Выберите мышкой фрейм с кнопками и сделайте действия, как показано на скриншоте.

Теперь посмотрите до и после, при масштабировании кнопка автоматически переносится на новую строку.

На карточке отсутствуют отступы по бокам. Рекомендуется их добавить. В главном фрейме (Frame 1), в полях установите padding. Он принимает четыре значения Top, Bottom, Left, Right.

Div mode

Новое обновление figma 2023 июнь. Что делает? Опция показывает исходный код макета, упрощая создание и перенос дизайна в проект.

Режим разработчика открывает доступ к скрытой информации, что позволяет быстрее ориентироваться в блоках и находить код. Обновилась вкладка Inspect, теперь отображает скрипт.

При использовании Div mode дизайнер увидит скрытые конструкции: стили, шрифты и т.д. Активировать режим можно переключив тумблер, как показано на скриншоте, выбираем элемент и сморим Inspect.

Покажем, как работает настройка Div Mode. Для этих целей мы создали новую карточку товара. Как сделать карточку мы писали выше.

Активируем div mode и установим CSS, выберем наушники. Отобразиться размер картинки 331×550 и блок Style, где будет background: url(). При переносе на свой сайт path-to-image следует заменить на путь к своей картинке.

Текстовое описание содержит сразу несколько параметров: typography, content, colors. Выберем text “+ Сохранить”, откроется панель со стилями.

Допустим нужно перенести графику с Figma в html документ. Что для этого потребуется?

1. Создать контейнеры вместе с атрибутами
2. Скопировать все стили

Пример готового html-документа на скриншоте ниже. Там же можно увидеть кнопку “+ Сохранить”, это результат при загрузке документа в браузере.

Div mode полезный инструмент для начинающих дизайнеров. Если ваши знания в верстке низкого уровня, вы можете сверстать любой макет в figma, потом подсмотреть код, включив опцию Div mode. Кроме того интерфейс Inspect позволяет просматривать не только содержимое css, но и показывать код для других устройств iOS и Android.

Когда нужно скопировать код в HTML разметке вместе со стилями, просто переключите соответствующий пункт меню. Существуют два плагина Figma-to-code и Anima.

Чтобы получить свойства любого объекта щелкните по нему правой кнопкой мыши и в контекстном меню выберете плагин, как показано на картинке.

Во всплывающем окне доступно вариация кода.

• Html
• Tailwind
• Flutter
• SwiftUi
• React
• TypeScript

Плагины

Учитывая, что интерфейс расширился просмотрщиком кода, в сервисе так же появились несколько новых плагинов, которые позволяют интегрировать документации разработчиков на популярные сервисы типа GitHub, Jira и Storybook.

Предварительный просмотр шрифтов – ожидаемое обновление фигма 2023

Раньше в figma, чтобы увидеть дизайн шрифта приходилось устанавливать специальный плагин например Better Font Picker. Теперь просмотр шрифтов включен по умолчанию. При открытии списка будет отображаться стиль написания. Сам список находится во вкладке Design и доступен при выборе текстового поля.

Очередное обновление фигма 2023 июнь . Данный инструмент задает переменные, где хранятся значения для элементов сайта. На выбор четыре типа:

Color – устанавливает цвет.

Number – число, например размер кнопок, закругления, отступы и т.д. В нашем случае мы создали переменную и назначили цифру 20.

String – строковое значение. Используется когда в макете нужно заменить текстом из библиотеки.

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.

Изменить стиль можно щелчком мыши в раскрывающемся меню. Пример карточки товаров. Темная и светлая тема.

Прототипы

Улучшилось добавление связей между элементами макета, теперь через математические выражения, токены и условия можно создавать новые типы связей, более продвинутые. Например, установить счетчик на форме, где при щелчке по кнопке увеличиться число. Также добавилась функция предпросмотра, где в отдельном окне загружается прототип. С этими функциями разработка станет еще быстрее.

Полный функционал откроется только на тарифном плане “Professional”. Бесплатное тестирование прототипа доступно на тестовом макете по ссылке Advaced Prototyping playground.

Секции (Section)

Появился новый инструмент секции, который позволяет захватывать объекты и помещать их в контейнер. Работает по аналогии с фреймом, рисуем область и добавляем туда графические элементы.

Появилось расширение для редактора кода, где можно общаться с дизайнерами, смотреть файлы не покидая Фигму.

Искусственный интеллект

Недавно в компании прикупили Diaram. В ближайшее время разработчики обещали интегрировать в сервис AI. Как это будет работать точно неизвестно. Единственное, что удалось выяснить, взаимосвязь с нейросетью будет проходить посредством промптов. Другими словами программа будет генерировать информацию по описанию. Возможно, вскоре пользователи получат мощный инструмент по генерации картинок, что позволит создавать уникальные макеты проектов с помощью нейросетей, а не использовать картинки из фотостоков и поисковиков как раньше.

Как обновить Фигму на windows

Проверить новое обновление figma, можно через меню “figma -> Check for Update”. Если на ПК стоит последняя версия, то появится сообщение “No update Available”. Если вы заметили, что новые функции отсутствуют, а сообщение по прежнему появляется, то здесь два пути решения.

1. Обратиться в службу поддержки для получения консультации
2. Удалить старую версию, скачать с официального сайта новую и переустановить

32 новых обновления фигма на 2023

Кроме глобальных изменений в фигму внесли еще множество мелких улучшений. Перечислим, что изменилось.

1. Предварительный просмотр – теперь в режиме реального времени можно увидеть, как меняется картинка при наложении разных фильтров. Ранее такая функция была доступно только в фотошопе. У любого объекта запустите цветовую палитру и в раскрывающем списке выберите: darken, multiply, lighten и увидите моментальные изменения.

2. Улучшенная маска. Она теперь работает на основе яркости картинки. Растровое изображение, накладывается на оригинальное фото, таким образом, можно убрать лишнее.

3. Поиск в слоях и выделение – доступно выделение нескольких слоев в поиске. Запускаете поиск по ключевому слову, потом удерживая клавишу shift, щелкаете по слоям и редактируете. Если раньше это приходилось делать с каждым слоем по отдельности, то сейчас отредактировать можно группу слоев.

4. Работа с текстом – меняйте text через настройку текста. В панели Design у текстового поля нажимаете три точки и делаете настройки.

5. Нумерованные списки – самое ожидаемое обновления figma, теперь нумерацию можно делать с любой цифры, а не с единицы как это было раньше.

6. Кавычки – покажите, что вы более продвинуты в области форматирования текста. Теперь кавычки можно размещать за пределами текстового поля, что считается более правильным с точки зрения типографии. Как это сделать? Type Settings. Design->три точки.

7. Поиск. В дисктопном приложении Figma при создании новой вкладки добавили строку поиска. Достаточно прописать название проекта и вы быстро в него попадете.

8. Предпросмотр – данный figma update также включен в десктопную версию. Если открыто несколько вкладок, и вы наведете курсором на любую вкладку, откроется “превьюшка с картинкой проекта”, что позволит быстрее найти нужный макет.

9. Тактильные ощущения – добавили на “Mac”, водим курсором и программа делает легкое колебание рабочей области. Можно отключить.

10. Комментирование – обновления коснулись и комментариев. Теперь при составлении сообщения можно использовать жирный, курсивный шрифт и даже добавить ссылку. Чтобы выделить слова в тексте, окружите их звездочками и нажмите пробел. Ниже представлен пример жирного и курсивного шрифта.

11. Упаковка комментариев в одно письмо – теперь уведомления о новых комментариях будут приходить в одном письме, а не в каждом как раньше, что избавит от лишнего спама.

12. Обновили перемещения файлов между проектами. Теперь переместить файл стало проще и удобней.

13. Улучшили свойства компонентов. Теперь просмотр вложенных компонентов включен по умолчанию.

14. Добавлено новое меню – для просмотра предпочтительных компонентов.

15. Возврат к изначальному масштабу. Растягивая картинку и смотря результат, у вас есть возможность передумать и вернуться к первоначальному размеру. Здесь предусмотрен подгон под стандарт. В какой-то момент уменьшенная картинка перестанет масштабироваться. Что означает возврат к идеальному соотношению.

16. Улучшена заливка для вставки изображения – теперь можно выбрать конкретный слой заливки при этом оставив другие без изменения.

17. Выравнивание по отношению к внешнему слою. Если объект находится внутри фрейма или группы, то его можно выровнять по левому, правому краю по отношение к этому слою.

18. Выравнивание компонентов – еще одно обновление коснулось компонентов. Можно сделать выравнивание по отношению к вложенным компонентам. Сдвинуть component внутри блока не получится, поэтому выделяя его и какой-то элемент, и выравнивая, вы расположите элемент относительно этого компонента

19. Появилась возможность убрать у линейки (Rulers) вертикальные или горизонтальные направляющие. Для этого нужно щелкнуть правой кнопкой мыши по линейке, вызвать контекстное меню и нажать Remove all vertical guides или Remove all horizontal guides.

20. Добавлено окно предпросмотра – показывает, как было и как стало.

21. Исправили svg – при копировании и вставке, пропадали элементы, теперь эту ошибку исправили.

22. Fetch api – для разработчиков плагинов. Добавились более простые способы выполнения запросов.

23. CreateImageAsync – простой способ создания изображения для плагинов. Специально для программистов.

24. Во время съемки селфи виджет Photobooth, сделает фото зеркальным.

Следующие улучшения 25-27 связаны с FigJam. Это доска для реализации графических идей. Работая в команде, можно использовать FigJam для творческого развития и создания креатива.

25. В FigJam добавили возможность включать Transparent для фигур, чтобы например, показывать пересечение.

26. В Figjam можно менять цвет по умолчанию на панели инструментов.

27. В Figjam добавлены несколько анимационных эффектов для стикеров. При перемещении на холст, проигрывается небольшая анимация.

28. Элементы могут прилипать к верху при вертикальной прокрутке в прототипировании.

29. При создании фрейма среди всех платформ добавили и старичков, если хотите создать макет для устаревшего макинтоша, у вас есть такая возможность.

30. Добавили эффект размытия. При вызове всплывающего окна (popup), если стоит Effects Background Blur и настройки события мыши установлен Open overlay, то при вызове popup задний фон будет размыт.

31. Собрать из разных страниц единый прототип. Если несколько ваших файлов находятся за пределами проекта, то вы можете указать на них ссылки и при тестировании, открывать страницы на той же вкладке.

32. Не то чтобы новинка, скорее напоминание. Можно создавать группу связей при прототипирование, выделяя несколько кнопок и ссылаяст на одну страницу, это существенно экономит время.

Как это сделать? Щелкаете по каждой кнопке для которых хотите установить связь, при этом удерживая клавишу shift, когда выберите их все, наведите на одну из кнопок, должен появиться круглый маркер, схватите его мышкой и тащите, направляющие линии будут следовать за курсорм, укажите фрейм и в всплывающем окне действия “сlick”, “drag”.

Вот такой богатый список обновлений figma был предоставлен пользователеям в 2023 году. Многие улучшения ждали долго, сейчас их доработали и теперь разработка макета станет еще быстрее.

Как обновить приложение Figma

Проблема: автокоррект в Figma подчеркивает все слова как неправильные Возможные решения: У вас указан не тот язык для проверки, которым вы пользуетесь.Проверьте настройки и установите автовыбор языка У…

• CSS
• Figma
• Lottie
• Unity
• Векторы в Figma
• Изображения в Figma
• Иконки SVG
• Импорт и экспорт в Figma
• Инструменты Figma
• Компоненты в Figma
• Обновления Figma
• Плагины для Figma
• Проблемы с Figma
• Прототипы в Figma
• Советы и уроки по Figma
• Стили Figma
• Текст в Figma
• Управление в Figma
• Фигуры в Figma
• Шаблоны HTML
• Эффекты и свойства в Figma

Обновление Figma — 2023: улучшение Auto layout, переменные и другие изменения

Рассказываем и показываем — что появилось и как всем этим пользоваться.

Иллюстрация: Оля Ежак для Skillbox Media

Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

На конференции Config 2023 разработчики Figma представили большое обновление. В сервис добавили поддержку переменных, улучшили Auto layout и сильно переработали режим для разработчиков.

Об этих и других изменениях в Figma — читайте в нашем обзоре.

Обновление Auto layout

В Auto layout появилась функция Wrap — теперь блоки будут автоматически перемещаться на следующую строку, если они не вмещаются в основной фрейм.

Как пользоваться

1. Выберите фрейм, внутри которого уже есть какие-то объекты.

2. На боковой панели в блоке Auto layout нажмите плюсик.

3. В появившемся блоке нажмите и меняйте ширину основного фрейма.

Как пользоваться платной функцией

Для примера предлагаем сделать тёмную тему для вашего макета. Её можно собрать и без подписки, но тогда вам придётся верстать несколько отдельных макетов. С платной версией переменных вы сможете переключаться между темами за два клика и не делать дополнительные макеты.

1. Соберите все ваши цвета из макета в переменные — для переменных есть отдельная категория Color.

2. Присвойте соответствующие переменные внутри вашего модуля — это делается так же, как со стилями.

3. В окне с переменными нажмите на плюсик, и появится дополнительный модуль переменных — в нём будут храниться цвета для тёмной темы. Если у вас нет подписки на Figma, то в этот момент вам предложат её оформить.

4. Для каждого цвета вашей светлой темы подберите цвет для тёмной.

5. Выделите модуль, в котором установлены переменные цветов, в боковой панели в блоке Layer кликните на иконку и выберите коллекцию с тёмной темой. При необходимости цвета можно изменить в общем списке переменных.

Режим для разработчиков

В Figma заметно изменили режим для разработчиков. Раньше для этого отводили одну вкладку на правой панели. Теперь — это отдельная среда с расширенными возможностями. Например, вы можете посмотреть отступы у каждого блока, скачать сразу несколько картинок из макета и поменять единицы измерения — вместо пикселей использовать rem .

Чтобы перейти в режим разработчика, нужно нажать на переключатель в верхнем правом углу.

А ещё для разработчиков появились новые плагины, которые упростят им работу. Например, теперь макет можно синхронизировать с GitHub, чтобы команде было проще отслеживать изменения.

Также дизайнер теперь может явно обозначить готовность макета к разработке. Для этого нужно поместить нужный макет в секцию (Shift + S) и в верхнем левом углу нажать на иконку , рядом с названием секции. В режиме разработчика этот макет будет отмечен как готовый для вёрстки.

Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

Читайте короткие инструкции по Figma

• «Лавовый» градиентФильтр для фото
• «Часы» из градиента
• Анимированный паттерн
• Пластиковая иконка
• «Жидкие» кнопки
• Объёмный леденец
• Анимированный слайдер
• Подсветка из градиентов
• «Светящийся» градиент

Относительная единица измерения в веб-разработке. Задаёт размер шрифта относительно главного элемента страницы — . Например, если у указан размер 80 пикселей, то 0,1 rem — это 8 пикселей.

Курс

Figma с нуля до PRO

Вы освоите самую популярную программу для веб-дизайна на профессиональном уровне. Научитесь создавать интерактивные прототипы, передавать макеты разработчикам и экономить время на рутинных задачах.

Узнать про курс

Профессии с трудоустройством

• Графический дизайнер
• Python-программист
• Инженер по тестированию
• Бизнес-аналитик
• Интернет-маркетолог 2023