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

Как поставить неразрывный пробел в фигме

  • автор:

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 полезных файлов для дизайнеров

Ускорить работу в десятки раз в системе, браузере и редакторах: 37 горячих клавиш и редких команд для digital-фрилансера

Пока мир сходит с ума, самое время увеличить продуктивность, повысить рабочую ставку и экономить сотни часов в год. Популярные команды и сочетания в Windows, о которых вы могли не знать. Для Google Docs и Word, мессенджеров, блокнотов, а также Figma, Photoshop, Tilda и других редакторов. В продолжение статьи про 23 инструмента для редактора.

редактор, помогаю бизнесу больше зарабатывать и решать другие задачи с помощью текста (mktlg.ru)

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

Вначале вводная для тех, кто по какой-то причине не знаком с быстрыми клавишами. Если это не про вас — смело пропускайте.

Что такое быстрые клавиши и почему ими стоит пользоваться

Быстрые клавиши — это сочетания двух и больше клавиш, которые вызывают определенные функции.

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

Например, чтобы сохранить картинку в Фотошопе, нужно тянуться мышью в меню, там нажать «Файл», потом «Сохранить как». Но гораздо быстрее нажать Ctrl + Shift + S, результат будет тот же.

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

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

Я буду приводить команды для Windows. Для macOS они практически идентичны, нужно лишь использовать другие клавиши — например, Cmd вместо Ctrl.

Cистемные сочетания

Переключаться между окнами — Alt + Tab
Я часто работаю в разных окнах браузера. Например, когда переношу статью из гугл-документа в черновик на vc.ru. Или добавляю в Фигму картинки из проводника. Можно было бы переключаться между вкладками мышью, но проще использовать вот такое нехитрое сочетание.

�� Вводить спецсимволы
Вам понадобится типографская раскладка Бирмана. Это крутая утилита, позволяющая вводить кучу полезных символов. Например, можно писать м³ вместо м3. Ставить нормальную стрелочку → (я так буду обозначать стрелки на клавиатуре) вместо —>, знак умножения × вместо х, вводить градусы °, а еще неразрывный пробел, чтобы предлоги и союзы не висели в конце строки.

Редкие символы и как их вводить. Картинка с сайта раскладки

Ввод через Alt + символ или Alt + Shift + символ.

Раньше я держал отдельные спецсимволы в специальном документе, приходилось каждый раз его открывать, копировать и вставлять. Теперь такой проблемы нет, а к быстрому вводу я привык за пару дней. Есть русская и английская версии, для Windows и macOS.

�� Быстрее переключать язык — Ctrl + Shift
Лайфхак от знакомого программиста. У разных ноутбуков и клавиатур Alt находится в разных местах: к примеру, у клавиатуры домашнего ПК это может быть третья кнопка, а на ноуте есть еще Fn, поэтому Alt — четвертый. Из-за этого будете путаться. Клавиша же Ctrl — всегда первая и мышцам проще запомнить ее местоположение.

На разных клавиатурах Alt находится в разных местах. Поэтому для переключения языка проще использовать Ctrl, который всегда находится в одном и том же месте

Сделать скрин части экрана — Win + Shift + S (Cmd + Shift + 4)
Хорошая альтернатива сторонним приложениям-скриншотерам. В Windows 10 такое точно есть, в других версиях не проверял.

Браузер Google Chrome и подобные

Ссылка в новой вкладке — Ctrl + щелчок
Если на любую ссылку ткнуть с зажатым «контролом», она откроется в соседней вкладке. Удобно, если нужно открыть сразу несколько ссылок с одной страницы. При этом ты остаешься на вкладке со ссылками.

Ссылка в новом окне — Shift + щелчок
С зажатым «шифтом» будет то же, но ссылка откроется в соседнем окне и тебя перекинет на него. Это удобно, когда нужно быстро переключаться между окнами (через уже знакомое Alt + Tab).

В Google Chrome и подобных браузерах можно отделить уже открытую вкладку в новое окно. Достаточно потянуть её в любое место. Я так часто делаю, когда нужно переключаться между окнами.

Открыть закрытую вкладку/окно — Ctrl + Shift + T
Частенько закрываю вкладки и окна, которые нужно открывать снова. Комбинация позволяет не вводить ссылку заново.

Переключаться между вкладками — Ctrl + номер вкладки
Первая вкладка — Ctrl + 1, вторая Ctrl + 2 и так далее. Комбинация нехитрая, но не очень удобная: пальцы человека не очень приспособлены для таких выгибонов. Часто проще отделить вкладку в окно и переключаться Alt + Tab’ом.

Быстрая работа в браузере: новая вкладка Ctrl + T, открытие ссылок через Ctrl (новая вкладка) и Shift (новое окно), переключение через Alt + Tab

Закрыть текущую вкладку — Ctrl + W
Особенно полезная команда, если закрыть нужно сразу несколько вкладок: зажал Ctrl и жмякай вэшку.

Посмотреть код страницы — Ctrl + U
Уж не знаю, зачем вам это может пригодиться, но вдруг.

Текстовые редакторы: Google Docs, блокноты, мессенджеры

Кроме Ctrl + V и Ctrl + C, существует полно не менее полезных команд и сочетаний. А лайфхаков и всяких примочек вообще немеряно.

Начнём с команд, которые работают и в сложных редакторах, и в простых, включая мессенджеры.

Выделить весь текст — Ctrl + A
Не нужно зажимать мышь и тащить её от начала документа в конец. Кликнул на редактируемый текст, нажал сочетание — всё выделилось. В черновиках vc.ru, кстати, этой командой выделяется не весь текст, а только в том блоке, где стоит курсор.

�� Быстро вернуться в начало текста можно в два действия: нажать Ctrl + A и стрелку ◄. Курсор сразу скакнёт к началу документа. Если нужно в конец, то ►.

�� С текстом можно производить несколько действий последовательно, не разжимая клавишу-модификатор. Например, выделить весь текст Ctrl + A и, продолжая удерживать Ctrl зажатым, сразу нажать X.

Выделить символ — Shift + ► или Shift + ◄
Помогает, если нужно быстро скорректировать слово, заменив одни символы другими. На всякий случай: для замены не нужно удалять выделенное, просто вводите (ну, вдруг не знали).

Скакнуть курсором через слово — Ctrl + ► или Ctrl + ◄
Просто быстрое перемещение внутри предложения.

Выделить слово — Ctrl + Shift + ► или Ctrl + Shift + ◄
Помогает, когда нужно удалить несколько слов подряд или написать вместо них другие.

Выделить всю строку — Ctrl + Shift + ▲
Удобно, когда надо грохнуть абзац или несколько.

Суммирую несколько команд: выделение символов, слов и строк

Отменить действие — Ctrl + Z
Британские ученые нашли способ вернуться в прошлое, хе-хе.

Вернуть отмененное действие — Ctrl + Y
Немногие знают о том, что такое сочетание вообще существует. Работает в мессенджере ВК, Гугл-документах и некоторых блокнотах, а также в графических редакторах.

�� Команда Ctrl + Y не сработает, если вы отменили часть действий, а потом начали делать новые. В этом случае таймлайн будет нарушен: вы как бы начнете создавать новую версию будущего. Впрочем, если вам нужно просто откатиться до определенной версии документа, это ОК.

�� Как сохранить прошлую и текущую версии текста. Отменяйте действия через Ctrl + Z до тех пор, пока не вернется нужная версия текста. Затем вы его копируете, но не вставляете в документ (можете вставить куда-то еще), а потом возвращаетесь к последней версии через Ctrl + Y.

Выделить нужную часть текста — Shift + мышь
Ставите курсор в одно место, держите шифт, ставите в другое — вуаля, текст между двумя курсорами выделен. Если тыкать мышью дальше или ближе, выделенная область тоже будет меняться.

Неразрывный пробел и мягкий перенос

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

Чтобы поставить неразрывный пробел, добавьте между словами:

Случаи, когда используется неразрывный пробел:

  • Инициалы (Пушкин А.С.)
  • Сокращения с точками (и т. д., и т. п.)
  • Числа с последующим словом или единицей измерения (20 котят, 42 км, 1984 г.)
  • Предлоги, союзы и некоторые частицы (ни страны, ни погоста)
  • Тире с предыдущим словом (иду — красивый, двадцатидвухлетний)

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

Чтобы поставить мягкий перенос, добавьте между символами:

Плагин Typograf для Figma

Bicoz Svetlana

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

Больше кнопок.

Просматривают тему сейчас 0 пользователей онлайн

  • Ни одного зарегистрированного пользователя не просматривает данную страницу

Made with remotely from Moscow Powered by Invision Community

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *