Текст в Фигма. Работа с текстом в Figma
В Фигме есть хорошие возможности для работы с текстом через специальный тип слоёв. Чтобы создать текстовый слой, нажимаем T и кликаем в нужное место, либо растягиваем блок как прямоугольник или фрейм и в нем уже можно писать.
Шрифты из Google Web Fonts
Круто: в Фигме по умолчанию доступна вся библиотека шрифтов Google Fonts,
Не круто: нельзя динамически просматривать как будут выглядеть эти шрифты. Чтобы увидеть, как будет выглядеть шрифт в проекте его обязательно нужно применить. не удобно — факт. Лично я просматриваю шрифты на самом сайте гуглфонтс, копирую название подходящего и применяю его в Figma.
Если ты используешь десктопную версию, то все шрифты с твоего компьютера подтянуться автоматически в фигму. подробно о загрузке локальных шрифтов в браузерную версию программы описано в отдельной статье http://figmaweb.ru/kak-zagruzit-v-figma-shrifty/
Режимы текстового слоя в Figma
• Horizontally — Текстовый блок обволакивает текст по горизонтали( если нет перехода на новую строку — текст выстроится в линию)
• Vertical — обводка текста по вертикали
• Fixed -фиксированный размер текстового блока вне зависимости от количества текста.
Так же ты можешь всегда уменьшить размер текстового блока до размера самого текста дважды кликнув по обводке
Основные настройки текста
Если выделен текстовый слой, справа мы увидим панель работы с текстом.
Справа вверху блока иконка Text Styles — всплывающее меню стилей текста. Подробнее о создании стилей для текста читай в отдельной статье.
Далее идут поля:
• Typeface — само название шрифта
• Weight – выбор начертания
• Size не знаю что это такое))
• Line Height – межстрочное расстояние. В мае 2019 пофиксили баги этой настройки и теперь она работает, как нужно.
• Letter Spacing — трекинг, межбуквенное расстояние или разрядка.
• Paragraph Spacing — отступ между параграфами, разделёнными обрывом строки, Enter
• Paragraph Indentation — красная строка, абзац.
Заходи на телеграмм канал — там еще больше полезного
Нравится Figma? — подпишись на нас в вк и инстаграме
Так же тут у нас есть возможность выравнивать текст по левому краю, центру и по правому краю. Но что более примечательно — есть настройки по вертикальному выравниваю, что просто невероятно круто и полезно.
В доп меню за тремя точками скрывается более подробная настройка выравнивания текста внутри блока по вертикали и горизонтали
Красным выделен блок в котором можно настроить все буквы заглавные, строчные, каждое слово с большой буквы, подчеркнутый и зачеркнутый текст.
Блок Font Features Содержит дополнительные возможности шрифта для…. блин, я не знаю для кого)) Это супер редко используемые фишки. Discretionary and historical ligatures — использовать ли дискретные и исторические лигатуры. Fractions – дроби. Соединять ли такие значения как 1/2 в один глиф с дробью. Выставление степеней и числовых подписей Numbers Тут можно выбрать размеры ячейки для каждой буквы. Например, сделать так, чтобы каждая буква занимала определенную ширину или чтобы занимала ширину равную своему размеру. полезно для табличек и перфекционистов, имхо.
Как создать стиль текста в фигме
В начале тебе нужно выставить все настройки текста(выбрать шрифт, его размер, начертание и тд). После этого кликаешь на вот эту иконку (выделена красным) после кликаешь на плюсик и даешь название своему стилю текста в Figma.
Полезные статьи по типографике для новичков Термины в типографике Основа типографики
Горячие клавиши в работе с текстом в Фигма
В начале ответы на популярные вопросы: Как вставить текст в Фигма? — CTRL+v (удивительно)
Как растянуть текст в Фигме? — выбирай scale tool (K) и растягивай текст, как нужно. Он будет растягиваться пропорционально.
ctrl+с копировать
ctrl+v вставить
ctrl+d сделать дубль (дубль появляется мгновенно поверх копируемого элемента)
ctrl+alt+c копировать свойства текста(цвет, тени, обводку, для шрифта — размер, начертание, керлинг и тд.)
ctrl+alt+v вставить свойства
ctrl+shift+v вставить текст со свойствами текстового блока, в который ты вставляешь сам текст
ctrl+b текст станет жирным
ctrl+i текст станет наклонным
ctrl+u текст станет подчеркнутым
Как в Figma скопировать цветовые и текстовые стили из одного проекта в другой?
Как в Figma скопировать цветовые и текстовые стили из одного проекта в другой?
Не сделать привязку через библиотеку, а именно скопировать все стили (цвет + текст), чтобы их можно было править в новом проекте?
- Вопрос задан более трёх лет назад
- 18607 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 3
Степан Воеводин @melpnz Куратор тега Figma
UX/UI дизайнер
очень стал интересен твой вопрос, долго искал и капался, но вроде нашёл.
Если сделать просто Dublicate файла, то он скопирует и файл и стили, при это без привязки к Team Library
Ответ написан более трёх лет назад
Нравится 1 1 комментарий
Старт в Figma для верстальщика
Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.
Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.
Регистрация и добавление нового макета
Чтобы начать пользоваться редактором, нужно зайти на https://www.figma.com/ и зарегистрироваться. Можно войти через Google или просто создать аккаунт на сайте.
Вы попадёте в менеджер проектов, где увидите образцы макетов. Их можно использовать для знакомства с приложением. Здесь же можно добавить свой проект, нажав на соответствующую иконку Import file. Макет проекта должен иметь расширение .fig или .sketch . При импорте из Sketch нужно не забыть дополнительно загрузить нестандартные шрифты, если они используются в проекте.
После добавления макет появится в общем списке.
Структура макета и рабочие инструменты
Интерфейс в разделе работы с макетом состоит из нескольких блоков.
- Боковая панель. Здесь показана вся структура проекта. Можно проследить вложенность элементов и найти нужный. Каждый тип элемента обозначен отдельной иконкой — текст, изображение, составной блок.
- Основная рабочая область в центре — для непосредственного взаимодействия с макетом.
- Основное меню в верхней части страницы. Большая часть инструментов в нём предназначены для дизайна, но вам точно пригодится меню масштабирования, расположенное справа.
- Боковая панель справа включает три вкладки, но нам будут нужны только две из них — Design и Inspect, в которой расположены разделы Code и Local Styles. В этих вкладках находится вся доступная информация об элементе.
Работа с параметрами элементов
Основная задача верстальщика при работе с макетом — узнать параметры элементов и перенести их в вёрстку. Давайте разберём по пунктам, как это сделать в Figma.
Параметры текста
Чтобы узнать все текстовые параметры, нужно выделить элемент и открыть вкладку Inspect — Code в правой боковой панели. Там в списке свойств отобразятся все используемые параметры — название, размер, насыщенность и цвет шрифта, высота строки и остальные.
Изображение
Свойства width и height во вкладке Inspect — Code расскажут о размере изображения.
Также можно скачать любое изображение из макета. Для этого нужно кликнуть по вкладке Design и там найти последний пункт Export. Далее в выпадающем меню выбрать формат, в котором вы хотите экспортировать изображение — PNG, JPG, SVG или PDF.
Цвет элемента
В разделе Code вкладки Inspect можно узнать фоновый цвет элемента — значение background .
Размеры и расстояние между элементами
Размер определяется несколькими способами.
Например, во вкладке Code можно посмотреть значения свойств width и height . Или просто выделить нужный блок — размер отобразится внизу элемента. Также можно узнать расстояние между двумя любыми элементами. Для этого нужно выделить первый элемент, а затем наводить курсор на остальные — будет появляться направляющая и значение.
Figma — это удобный и простой инструмент для верстальщика, и мы предлагаем вам попробовать его в деле. Заходите в магазин макетов, выбирайте любой и практикуйтесь.
Пригодится верстальщику:
- Дизайн для верстальщиков
- Вёрстка для дизайнеров
- Топ-20 лучших плагинов для Figma в 2023
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Как можно скопировать текстовую информацию из макета figma
10 лайфхаков Figma, чтобы сделать работу эффективнее
В прошлом году мы полностью перешли со Sketch на Figma, уже обжились в новом редакторе и очень его любим. Статья будет полезна как новичкам, так и уже опытным пользователям.
Product Design
Business System
Product Management
1. Делаем структуру страниц
На небольших проектах мы всю работу ведем в одном файле: храним в нем черновики, концепты и чистовые макеты с компонентами. Чтобы разработчик и заказчик понимали, где лежит готовый для верстки макет, а где концептуальный черновик, мы делим файл на страницы.
Список страниц дробим на условные разделы. Для лучшего считывания используем эмодзи, а названия страниц отбиваем пробелами от начала строки. Получается что-то вроде структуры с вложенностью.
На самом деле эта структура лишь визуальное решение, так как Figma не позволяет создавать дополнительные уровни вложенности в станицах. В качестве названия раздела используется пустая страница
Ниже несколько примеров такой структуры.
С помощью эмодзи �� или �� можно отмечать степень готовности раздела для передачи в разработку.
2. Называем одинаково слои на двух связанных компонентах
Чтобы при смене состояний элемента сохранялись тексты, слои текстовых элементов должны быть названы одинаково. Это удобно при изменении состояний кнопок, элементов списка и инпутов.
Мы меняем пустое состояние инпута на состояние фокуса, лейбл «Address» переезжает на верх инпута и сохраняет название, а не сбрасывает его на дефолтное.
Чтобы так работало, слои текстовых элементов должны быть названы одинаково, например, Title и Title, как в примере ниже.
3. Все картинки заводим в цветовые стили
Чтобы быстро сделать заливку фигуры логотипом, флагом или аватаром, удобно хранить эти картинки в качестве цветовых стилей.
4. Быстро находим все элементы с похожими свойствами
Можно в два клика найти на странице все элементы с похожими свойствами, например, заливкой, обводкой или шрифтом. Для этого нужно выделить элемент, нажать системный Edit > Select All with the Same… и выбрать, с каким конкретно свойством выделить элементы.
Это удобно, если нужно найти и заменить неактуальный цвет, шрифт или заменить все экземпляры компонента на другие.
Также этот способ можно использовать, чтобы перенести мастер-компонент в другой файл. Как — читайте в следующем совете.
5. Переносим мастер-компонент в другой файл
В Figma нет встроенной возможности перенести используемый мастер-компонент в другой файл, поэтому вам придется делать это вручную. Но есть надежный способ, как ускорить этот процесс.
Для этого нужно:
- Скопировать мастер-компонент в нужный файл;
- Присоединить этот файл в качестве библиотеки к текущему;
- Выбрать любой экземпляр старого мастер-компонента;
- Нажать Edit > Select All with the Same Instance;
- Через меню Instance на панели инструментов заменить выделенные экземпляры на новый компонент;
- Готово! Осталось просмотреть все экземпляры на предмет слетевших текстов и стилей, а чтобы тексты при замене компонента сохранялись, называйте одинаково слои на двух связанных компонентах (об этом мы писали выше).
По такому же принципу можно перенести из одного файла в другой цветовые и текстовые стили. Для цветовых стилей также можно использовать плагин Style Organizer или его аналог.
6. Делаем автолейауты из списков
Если список сделать автолейаутом, то работать с ним становится гораздо удобнее: можно быстро увеличить количество строк через Cmd+D или удалить строки из середины списка, при этом отступы между элементами сохранятся
7. Делаем автолейауты из всего
Все это очень просто решается созданием автолейаута из всех трех элементов.
Еще пара примеров:
Такой прогресс-бар создается из автолейаута и невидимого текста. Такой способ пригодится, когда прогресс находится внутри компонента и нужно показать несколько состояний без детача.
8. Растягиваем автолейауты
Чтобы при растягивании блоков контент внутри них адаптировался под размер, нужно при настройке автолейаута использовать параметр «Strech Left & Right» сверху на панели инструментов.
9. Открываем больше одного окна в десктопном клиенте
Не все знают, что можно открывать несколько окон десктопного приложения Figma. Делается это простым шорткатом Cmd+Shift+N.
Это удобно, если вы работаете одновременно с несколькими файлами, например, iOS, Android и библиотекой компонентов.
Кстати, почему большие проекты лучше держать в разных файлах, читайте в другой нашей статье.
10. Не считаем в уме
Поля, в которых можно редактировать значения, понимают простейшие арифметические операции. Можно увеличить ширину элемента в два раза или прибавить к значению 50%. Это сильно ускорит процесс и поможет не ошибиться в устных подсчетах.
Мы ввели эти простые правила у себя в Mish. Результат превзошел сам себя: многие задачи стали выполняться сильно быстрее и эффективнее. Также введение единых правил и внутренних гайдлайнов позволили переключать дизайнеров с проекта на проект без потерь времени, что оценили не только коллеги внутри студии, но и клиенты.