Как сделать обтекаемый текст в фигме

Фигма. Функция обтекания текстом картинок?

Подскажите, плз, есть в Фигме функция обтекания текстом картинок. Если да, где )?

• Вопрос задан более трёх лет назад
• 9385 просмотров

1 комментарий

Простой 1 комментарий

Решения вопроса 0

Ответы на вопрос 3

Frontend designer

К сожалению никак. Единственный способ разбить параграф и сделать обтекание вручную.

Ответ написан более трёх лет назад

Комментировать

Нравится Комментировать

Как сделать обтекаемый текст в фигме

1. Общие положения

Настоящая политика обработки персональных данных составлена в соответствии с требованиями Федерального закона от 27.07.2006. №152-ФЗ «О персональных данных» и определяет порядок обработки персональных данных и меры по обеспечению безопасности персональных данных Петров Всеволод Вальдемарович (далее – Оператор).

1. Оператор ставит своей важнейшей целью и условием осуществления своей деятельности соблюдение прав и свобод человека и гражданина при обработке его персональных данных, в том числе защиты прав на неприкосновенность частной жизни, личную и семейную тайну.
2. Настоящая политика Оператора в отношении обработки персональных данных (далее – Политика) применяется ко всей информации, которую Оператор может получить о посетителях веб-сайта https://madeon.pro.

1. Автоматизированная обработка персональных данных – обработка персональных данных с помощью средств вычислительной техники;
2. Блокирование персональных данных – временное прекращение обработки персональных данных (за исключением случаев, если обработка необходима для уточнения персональных данных);
3. Веб-сайт – совокупность графических и информационных материалов, а также программ для ЭВМ и баз данных, обеспечивающих их доступность в сети интернет по сетевому адресу https://madeon.pro;
4. Информационная система персональных данных — совокупность содержащихся в базах данных персональных данных, и обеспечивающих их обработку информационных технологий и технических средств;
5. Обезличивание персональных данных — действия, в результате которых невозможно определить без использования дополнительной информации принадлежность персональных данных конкретному Пользователю или иному субъекту персональных данных;
6. Обработка персональных данных – любое действие (операция) или совокупность действий (операций), совершаемых с использованием средств автоматизации или без использования таких средств с персональными данными, включая сбор, запись, систематизацию, накопление, хранение, уточнение (обновление, изменение), извлечение, использование, передачу (распространение, предоставление, доступ), обезличивание, блокирование, удаление, уничтожение персональных данных;
7. Оператор – государственный орган, муниципальный орган, юридическое или физическое лицо, самостоятельно или совместно с другими лицами организующие и (или) осуществляющие обработку персональных данных, а также определяющие цели обработки персональных данных, состав персональных данных, подлежащих обработке, действия (операции), совершаемые с персональными данными;
8. Персональные данные – любая информация, относящаяся прямо или косвенно к определенному или определяемому Пользователю веб-сайта https://madeon.pro;
9. Пользователь – любой посетитель веб-сайта https://madeon.pro;
10. Предоставление персональных данных – действия, направленные на раскрытие персональных данных определенному лицу или определенному кругу лиц;
11. Распространение персональных данных – любые действия, направленные на раскрытие персональных данных неопределенному кругу лиц (передача персональных данных) или на ознакомление с персональными данными неограниченного круга лиц, в том числе обнародование персональных данных в средствах массовой информации, размещение в информационно-телекоммуникационных сетях или предоставление доступа к персональным данным каким-либо иным способом;
12. Трансграничная передача персональных данных – передача персональных данных на территорию иностранного государства органу власти иностранного государства, иностранному физическому или иностранному юридическому лицу;
13. Уничтожение персональных данных – любые действия, в результате которых персональные данные уничтожаются безвозвратно с невозможностью дальнейшего восстановления содержания персональных данных в информационной системе персональных данных и (или) результате которых уничтожаются материальные носители персональных данных.

1. Фамилия, имя, отчество;
2. Электронный адрес;
3. Номера телефонов;
4. Также на сайте происходит сбор и обработка обезличенных данных о посетителях (в т.ч. файлов «cookie») с помощью сервисов интернет-статистики (Яндекс Метрика и Гугл Аналитика и других).
5. Вышеперечисленные данные далее по тексту Политики объединены общим понятием Персональные данные

1. Цель обработки персональных данных Пользователя — заключение, исполнение и прекращение гражданско-правовых договоров; предоставление доступа Пользователю к сервисам, информации и/или материалам, содержащимся на веб-сайте https://mysite.ru; уточнение деталей заказа.
2. Также Оператор имеет право направлять Пользователю уведомления о новых продуктах и услугах, специальных предложениях и различных событиях. Пользователь всегда может отказаться от получения информационных сообщений, направив Оператору письмо на адрес электронной почты seva@madeon.pro с пометкой «Отказ от уведомлениях о новых продуктах и услугах и специальных предложениях».
3. Обезличенные данные Пользователей, собираемые с помощью сервисов интернет-статистики, служат для сбора информации о действиях Пользователей на сайте, улучшения качества сайта и его содержания.

1. Оператор обрабатывает персональные данные Пользователя только в случае их заполнения и/или отправки Пользователем самостоятельно через специальные формы, расположенные на сайте https://madeon.pro. Заполняя соответствующие формы и/или отправляя свои персональные данные Оператору, Пользователь выражает свое согласие с данной Политикой.
2. Оператор обрабатывает обезличенные данные о Пользователе в случае, если это разрешено в настройках браузера Пользователя (включено сохранение файлов «cookie» и использование технологии JavaScript).

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

1. Оператор обеспечивает сохранность персональных данных и принимает все возможные меры, исключающие доступ к персональным данным неуполномоченных лиц.
2. Персональные данные Пользователя никогда, ни при каких условиях не будут переданы третьим лицам, за исключением случаев, связанных с исполнением действующего законодательства.
3. В случае выявления неточностей в персональных данных, Пользователь может актуализировать их самостоятельно, путем направления Оператору уведомление на адрес электронной почты Оператора seva@madeon.pro с пометкой «Актуализация персональных данных».
4. Срок обработки персональных данных является неограниченным. Пользователь может в любой момент отозвать свое согласие на обработку персональных данных, направив Оператору уведомление посредством электронной почты на электронный адрес Оператора seva@madeon.pro с пометкой «Отзыв согласия на обработку персональных данных».

1. Оператор до начала осуществления трансграничной передачи персональных данных обязан убедиться в том, что иностранным государством, на территорию которого предполагается осуществлять передачу персональных данных, обеспечивается надежная защита прав субъектов персональных данных.
2. Трансграничная передача персональных данных на территории иностранных государств, не отвечающих вышеуказанным требованиям, может осуществляться только в случае наличия согласия в письменной форме субъекта персональных данных на трансграничную передачу его персональных данных и/или исполнения договора, стороной которого является субъект персональных данных.

1. Пользователь может получить любые разъяснения по интересующим вопросам, касающимся обработки его персональных данных, обратившись к Оператору с помощью электронной почты seva@madeon.pro.
2. В данном документе будут отражены любые изменения политики обработки персональных данных Оператором. Политика действует бессрочно до замены ее новой версией.
3. Актуальная версия Политики в свободном доступе расположена в сети Интернет по адресу http://madeon.pro/policy.

Работа с текстом в Figma

Программа Фигма обладает хорошими возможностями работы с текстом. Сейчас мы их подробнее рассмотрим.

Итак, чтобы добавить текст в фрейме, необходимо воспользоваться вкладкой в виде буквы «Т» в верхней панели меню или использовать горячую клавишу «Т». После этого появится курсор и возможность вставить текст или набрать его вручную. Обратите внимание, что текст вставляется одной строкой.

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

Вы также можете сразу нажать на вкладку текст, и сначала выделить область куда вы хотите его вставить, а также определить какие будут границы этого текста, после чего вставить текст или набрать его вручную.

После того как текст вставится вы также можете редактировать область при помощи выделенных точек по углам.

Дополнительные настройки текста можно найти в основных настройках программы. Рассмотрим эти возможности:

• ctrl+b текст станет жирным;
• ctrl+i текст станет наклонным;
• ctrl+u текст станет подчеркнутым;
• Функция «Strikethrough» без горячей клавиши, с ней текст станет перечеркнутым;
• «Uppercase» — не имеет горячей клавиши. Активируя ее, текст будет состоять только из заглавных букв;
• «Lowercase» — не имеет горячей клавиши. При данной функции текст состоит лишь из небольших букв.

Это основные и наиболее распространенные функции, предназначенные для настройки текста. Также в этом разделе вам будут доступны функции выставления размеров межстрочного расстояния, отступа между буквами, выравнивание, установка красной строки (абзаца) и т.д.

Вот еще некоторые горячие клавиши, которые могут понадобиться в работе с текстом:

• ctrl+с — копировать;
• ctrl+v — вставить;
• ctrl+d — сделать дубль (дубль появляется мгновенно поверх копируемого элемента);
• ctrl+alt+c — копировать свойства текста (цвет, тени, обводку, для шрифта — размер, начертание, керлинг и тд.);
• ctrl+alt+v — вставить свойства;
• ctrl+shift+v — вставить текст со свойствами текстового блока, в который вы вставляете сам текст.

Теперь обратим внимание на функции для редактирования текста, которые находятся в правом меню настроек. Здесь вам будет доступна смена шрифтов, которых Фигма предоставляет большое количество, благодаря библиотеке Google Fonts. Также можно менять размер текста. Данные размера вносятся вручную, или увеличиваются и уменьшаются при помощи клавиш Shift и Alt.

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

Если вы создали необходимые для вас параметры текста, которые будут использоваться во всем сайте, то чтобы сэкономить время, можно создать на основании этих параметров свой стиль. Для этого в правом меню нажмите на раздел «Text Styles» и рядом с ним нажмите на вкладку в виде «+». Таким образом, вы можете дать название своему стилю, например, «заглавный текст», или «основной текст», и в последствии использовать его в работе, чтобы каждый раз заново не вносить все параметры.

Еще одна возможность редактирования текста – изменение цвета, заливки, обводки, и добавление эффектов.

Если кликнуть на текст правой кнопкой мыши, то появится список функций. Выберите пункт «Flatten». Горячие клавиши «Ctrl+E». Это позволит вам сделать текст векторным.

Векторный текст можно сохранить в формате SVG, и в дальнейшем использовать в создании дизайна сайта. Чтобы удалить текстовый слой необходимо кликнуть на нем в монтажной области или в панели слоёв, а затем нажав клавишу «Delete».

Чтобы добавить комментарий во время работы с проектом, нажмите на соответствующую вкладку в верхнем меню программы. Далее кликните левой кнопкой мыши в ту область, где хотите разметить комментарий. Появится форма, в которой вы можете написать текст, и опубликовать. Этот комментарий можно использовать и для напоминания себе о том, чтобы вы хотели сделать. Это могут быть какие-то идеи. Кроме того, работая в команде над большими проектами, вы можете, используя опцию комментирования координировать работу, или обсуждать рабочие моменты удаленно.

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

Итак, мы рассмотрели, как работать с текстом в программе Фигма. Тем не менее важным моментом является не только знание того как добавлять текст и редактировать его, но и то, как правильно подбирать эти шрифты, совмещать их с заголовками и т.д. Это важно чтобы текст не только красиво смотрелся, но и хорошо воспринимался зрительно при чтении. Для этого может понадобиться дополнительная информация.

Полезные ссылки:

• Бесплатный видеокурс по Figma от GeekBrains;
• Профессиональный курс Figma 2.0 для новичков от SkillBox;
• Полноценный онлайн курс по веб-дизайну с нуля от SkillBox.

5 полезных плагинов в Figma: работа с текстом и изображениями

Как быстро сделать красивые векторные фигуры, перекрасить картинку и оттипографить текст.

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

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

В Figma очень удобно устроена работа с текстом и изображениями, но некоторые вещи приходится делать вручную — а это обычно долго. Например, чтобы просто перекрасить PNG-картинку, вам придётся делать отдельную слой-маску. Избавиться от этой рутины вам помогут плагины, которые расширяют функционал графического редактора.

Рассказываем, какие плагины для Figma помогут вам быстрее приводить текст в порядок и работать с картинками.

Typograff

Этот плагин поможет быстро оттипографить текст в документе — он автоматически расставит неразрывные пробелы после предлогов и союзов, поменяет кавычки на правильные «ёлочки» и «лапки».

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

• Скачайте плагин по ссылке.
• Зайдите в Figma, нажмите правой кнопкой мыши на текстовый модуль, в выпадающем меню перейдите в пункт Plugins и выберите Typograff.
• Укажите, какие кавычки вы хотите использовать, и нажмите на кнопку «Оттипографить». Вместе с новыми кавычками в тексте расставятся неразрывные пробелы.

Color Overlay

С помощью этого плагина можно быстро перекрасить PNG-картинку в однотонный цвет без использования слой-масок. Также через Color Overlay можно убрать из изображения любой цвет.

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

• Скачайте плагин по ссылке.
• Зайдите в Figma, нажмите правой кнопкой мыши по PNG-картинке, в выпадающем меню перейдите в пункт Plugins и выберите Color Overlay.
• Откроется окно плагина. В верхнем поле укажите, каким цветом нужно залить картинку, а в нижнем — какой цвет нужно убрать.
• Нажмите Colorize, и изображение изменится.

Spectrum

Меняет палитру любого изображения. Например, поможет поменять цвета красной картинки на синий или превратить голубую фотографию моря в фиолетовую.

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

• Скачайте плагин по ссылке.
• Зайдите в Figma, нажмите правой кнопкой мыши по картинке, в выпадающем меню перейдите в пункт Plugins и выберите Spectrum.
• В появившемся окне выберите количество цветов в новой палитре и их яркость. Также вы можете изменить режим наложения цветов: shades (оттенки) hue (насыщенность) или сделать собственный.
• Нажмите Apply Palette, и изображение изменится.

Этот плагин — условно бесплатный. В Figma вы можете изменить только три картинки с бесплатного аккаунта. Полная версия стоит 29 долларов.

Веб-версия сервиса доступна бесплатно без покупки.

Spirous

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

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

• Скачайте плагин по ссылке.
• Зайдите в Figma, нажмите правой кнопкой мыши по макету, в выпадающем меню перейдите в пункт Plugins и выберите Spirous.
• В появившемся окне выберите понравившуюся фигуру.
• Чтобы изменить фигуру, наведите курсор на её изображение и кликните на карандаш в правом нижнем углу.
• Чтобы добавить фигуру на макет, кликните по ней в окне плагина.

Image tracer

Превращает растровые картинки в векторные. Хорошо работает только с однотонными изображениями, где чётко можно разглядеть границы для вектора.

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

• Скачайте плагин по ссылке.
• Зайдите в Figma, нажмите правой кнопкой мыши по нужной картинке, в выпадающем меню перейдите в пункт Plugins и выберите Image tracer.
• В появившемся окне нажмите Place traced vector.
• При необходимости в меню Show options можно настроить параметры вывода векторного изображения.

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Больше о Figma

• Как упростить работу в Figma
• Как работать с изображениями в Figma
• 5 полезных плагинов в Figma для веб-дизайнера
• 5 лайфхаков в Figma: работа с текстом, картинками и заливкой
• Готовые решения в Figma: 10 полезных файлов для дизайнеров