Как сделать обводку в фигме
Обновлено: 05.07.2024
Это статья для дизайнеров, но будет полезна и другим членам команды.
Хочу поделиться приемом который облегчит жизнь дизайнерам, фронтендерам и QA.
А главное сократит количество несоответствий верстки к дизайну.
Даже если вы присвоите элементу обводку или присвоите цвет но зададите 0% opacity граница все ещё не будет отображаться.
И так как фронтендеры, QA и другие участники команды зачастую имеют права "can view, подобное поведение фигмы им доставляет много неудобств.
Просто представьте что каждый раз когда вы пытаетесь определить размер элемента или отступ между элементами вам приходится идти в панель слоев и выбирать нужный элемент.
Это неудобно и это то что скорее всего никто делать не будет.
Фронтендеры не могут определить правильный размер элемента или отступ между элементами и в лучшем случае уточняют размеры у дизайнера, но чаще всего верстают на свое усмотрение. Как показывает практика размеры и отступы в таком случае не будут соответствовать дизайну.
Вторая проблема это экспорт слоя иконки без фрейма в котором она находятся. Это приводит к тому что иконка неправильно позиционируется в элементе или имеет неправильный размер.
Подробнее о иконках в дизайн системе я писал в предыдущей статье.
Теперь примените этот стиль ко всем элементам где вы хотите чтоб граница фрейма отображалась при наведении курсора.
Для примера я подготовил два фрейма с элементами. В одном я применил стиль к компонентам кнопки и иконки а в другом нет. Просто попробуйте выделить элементы и почувствуйте то что чувствуют ваши фронты каждый день 🤯
Прозрачный png файл 1x1px можно экспортировать по этой ссылке (в красной рамке, смотрите панель слоев)
Я присваиваю данный стиль к прозрачным элементам типа basic кнопкам, stroke кнопкам, табам, айтэмам списка, компонентам иконки, ячейкам таблицы и тд, а так же использую этот стиль для разметки структуры страницы.
Я присваиваю данный стиль не ко всем прозрачным фреймам а только к тем где я считаю что фронтендеру важно видеть границы блока или элемента.
Некоторым фреймам я умышлено не присваиваю данный стиль, так как понимаю что у фронтендера больше возможностей и они не так часто оборачивают элементы в контейнеры как дизайнеры. Так как фигма не идеальна нам иногда приходится оборачивать элемент в 100500 фреймов чтоб добиться нужного поведения.
Если вы используете прием когда компонент иконки оборачивается в union то если вы покрасите компонент иконки в этот стиль вы сможете быстро выделять иконку комбинацией ctrl+ЛКМ. Вам больше не нужно проваливаться через несколько слоев или нажимать Enter чтобы добраться до иконки.
Если вы узнали что-то новое или статья была вам полезна — жмите ^
А если хотите узнать больше фишек — подписывайтесь, чтобы не пропустить новые статьи.
Если вы фронтендер и вы испытываете подобную проблему покажите эту статью вашему дизайнеру, возможно он облегчит вам жизнь 😊
Это очень плохой совет. Для того чтобы границы объекта отображались достаточно установить значение frame для группы.
Я думаю ты не понял проблему полностью. Перейди в проект по ссылке и посмотри примеры.
Я использую только фреймы и границы все равно не отображаются когда у тебя права "Can View" и например кнопка лежит внутри другого фрейма.
Чтобы в режиме can view выделить фрейм (границы) нужно зажать cmnd. Чтобы выделить фрейм внутри фрейма нужно нажать cmnd+дабл клик.
Я согласен, что это ломает мозг, т.к. в редакторе логика обратная, но не уверен что устанавливать прозрачную текстуру это хороший выход. Достаточно объяснить верстальщикам как с этим жить :)
Я в курсе как это работает, и разработчики в курсе, но пока я не сделал так чтоб им было удобно работать, было много несоответствий в верстке.
И я их понимаю, потому что одно дело докликаться до элемента во время создания дизайна а другое дело когда ты фронт и тебе надо постоянно переключатся между элементами.
В публикации говорится о том, что определить размер фрейма можно только с помощью панели слоев. Это не так, поэтому я написал про метод с зажатым cmnd.
да, я не сказал об этом, но и не говорил что только так можно, я скорей хотел сказать то как действуют фронты в такой момент
Не поможет. Попробуйте открыть файл с правами view only и потыкать во фреймы. У разработчиков будто бы зажат по-умолчанию cmd и они проваливаются вглубь элементов.
что такое view only, где это устанавливается?
can view это не одно и то же?
В любом случае это уже сработало. Я показал как. У нас разработчики работают только под правами Can View и у них теперь отображаются границы
А не проще дать фронтендеру права Can edit?
Нет, потому что работая с макетами кто-то обязательно что-то сдвинет или удалит
Можно например на 2 странице создать резервную копию, или отдельным файлом. Но данный пример не работает если фигма командная, там на каждого редактора цена плюсуется к подписке.
Я думаю в копировании нет особо смысла, есть же версионирование.
Да у нас professional план и как то платить за каждого разработчика 15 баксов в месяц просто так не хочется. Мне куда легче один раз применить этот стиль к элементам дизайн системы и забыть.
Всегда даю разрабам права на редактирование. Они сдвигают и удаляют не больше, чем я сам.
Тоже сталкивался, когда передавал разработчикам макеты. Но вообще выглядит как неудачное решение разработчиков фигмы. Может, зарепортить им проблему?
Не так давно работаю с фигмой, но тоже уже успел с этим столкнуться. Выглядит, как и правда неудачное решение
А пробовали автолейаут? Там совсем все удобнее отображается
конечно)
в примере автолейаутом и сделано
Ничего из этого не работает, границы кнопки не будут отображаться по наведению когда смотришь с правами can view и когда эта кнопка лежит внутри ещё одного фрейма
Просто знаю о чем говорю, тк когда-то обсуждали на проекте эту штуку. По нашей градации, мидл — челики, фронты / ios/android девы и выше, должны это (что кнопка имеет фрейм а не просто кусок текста) понимать на интуитивном уровне.
скрин который ты скину либо сделан c аккаунта c правами can edit, либо ты не понял в чем суть проблемы выделения
То что кнопка должна иметь фрейм и джуны знают, дело не в знаниях, а в удобстве и сложности определения размеров.
Фронт знает что кнопка имеет фрейм, но какого он размера не может определить. В итоге размеры и отступы не соответствуют дизайну.
И помимо кнопок есть и другие элементы в которых это совсем не очевидно
Я тоже знаю о чем говорю)) и сравнивал результат верстки без этого стиля и со стилем. У фронтов меньше вопросов, верстка в большенстве случаев пиксель в пиксель
Кажется ты не понял суть проблемы, выделить фрейм возможно из панели слоев, или с зажатым контролом проваливаясь уровень за уровнем. Невозможно выделить некоторые фреймы срезу в один клик. Если ты посмотришь гифки или прочитаешь внимательно что я писал - то возможно поймешь)
Второй вариант у тебя особенная фигма и у тебя одного это работает)
А вкладку Inspect религия не позволяет нажать?
Перед тем как умничать в комментариях - статью внимательно прочитай. Тогда может быть ты поймёшь проблему которую я описал.
Показать проще, и фронты это знают, другое дело что им так не удобно работать.
Это и есть костыль, но благодаря ему несоответствий стало меньше, по крайней мере у нас.
Применять его или нет, дело каждого, мое дело - поделится им.
В Фигме есть хорошие возможности для работы с текстом через специальный тип слоёв. Чтобы создать текстовый слой, нажимаем T и кликаем в нужное место, либо растягиваем блок как прямоугольник или фрейм и в нем уже можно писать.
Шрифты из Google Web Fonts
Круто: в Фигме по умолчанию доступна вся библиотека шрифтов Google Fonts,
Не круто: нельзя динамически просматривать как будут выглядеть эти шрифты. Чтобы увидеть, как будет выглядеть шрифт в проекте его обязательно нужно применить. не удобно — факт. Лично я просматриваю шрифты на самом сайте гуглфонтс, копирую название подходящего и применяю его в Figma.
Режимы текстового слоя в Figma
• Horizontally — Текстовый блок обволакивает текст по горизонтали( если нет перехода на новую строку — текст выстроится в линию)
• Vertical — обводка текста по вертикали
• Fixed -фиксированный размер текстового блока вне зависимости от количества текста.
Так же ты можешь всегда уменьшить размер текстового блока до размера самого текста дважды кликнув по обводке
Основные настройки текста
Если выделен текстовый слой, справа мы увидим панель работы с текстом.
Справа вверху блока иконка Text Styles — всплывающее меню стилей текста. Подробнее о создании стилей для текста читай в отдельной статье.
Далее идут поля:
• Typeface — само название шрифта
• Weight – выбор начертания
• Size не знаю что это такое))
• Line Height – межстрочное расстояние. В мае 2019 пофиксили баги этой настройки и теперь она работает, как нужно.
• Letter Spacing — трекинг, межбуквенное расстояние или разрядка.
• Paragraph Spacing — отступ между параграфами, разделёнными обрывом строки, Enter
• Paragraph Indentation — красная строка, абзац.
Так же тут у нас есть возможность выравнивать текст по левому краю, центру и по правому краю. Но что более примечательно — есть настройки по вертикальному выравниваю, что просто невероятно круто и полезно.
В доп меню за тремя точками скрывается более подробная настройка выравнивания текста внутри блока по вертикали и горизонтали
Красным выделен блок в котором можно настроить все буквы заглавные, строчные, каждое слово с большой буквы, подчеркнутый и зачеркнутый текст.
Блок 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 текст станет подчеркнутым
Чтобы в разы ускорить разработку - использование клавиатурных сокращений обязательно.
Найти все клавиатурные сокращения вы можете, нажав в левом нижнем углу на знак вопроса и, перейдя во вкладку “Keyboard Shortcuts”. Или вы можете использовать клавиатурное сокращение “Ctrl + Shift + ?”.
Ниже я привел скриншоты с разделами, а также с переводом.
Вкладка №1 (Основные параметры)
Вкладка №2 (Инструменты)
Столбец №1:
- 1 - Стандартный инструмент выделения
- 2 - Инструмент создания фреймов
- 3 - Инструмент “Перо”
- 4 - Инструмент “Карандаш” (Как “Перо” только рисовать можно любые формы)
Столбец №2:
- 1 - Инструмент “Текст”
- 2 - Инструмент “Прямоугольник”
- 3 - Инстурмент “Элипс”
- 4 - Инструмент “Линия”
- 5 - Инструмент “Стрелка”
Столбец №3:
- 1 - Добавить или показать комментарии к текущему макету
- 2 - Инструмент “Пипетка”
- 3 - Инструмент “Нож” (Вырезает область в виде картинки)
Вкладка №3 (Просмотр):
Столбец №1:
- 1 - Показать/Скрыть “Линейки”
- 2 - Показать/Скрыть “Обводки всех элементов”
- 3 - Показать/Скрыть “Пиксельный просмотр”
Столбец №2:
- 1 - Показать/Скрыть “Сетку”
- 2 - Показать/Скрыть “Пиксельную сетку”
Столбец №3:
- 1 - Показать/Скрыть “Боковые панели”
- 2 - Показать/Скрыть “Курсоры других пользователей”
- 3 - Показать/Скрыть “Только слои”
- 4 - Показать/Скрыть “Только компоненты”
- 5 - Показать/Скрыть “Многопользовательская библиотека”
Вкладка №4 (Масштабирование):
Столбец №1:
- 1 - Перемещение по рабочему пространству
- 2 - Увеличение масштаба
- 3 - Уменьшение масштаба
- 4 - Включить отображение 1:1 к экрану
Столбец №2:
- 1 - Масштабировать все рабочее пространство
- 2 - Масштабировать выделенный элемент
- 3 - Масштабировать предыдущий фрейм
- 4 - Масштабировать следующий фрейм
Столбец №3:
- 1 - Предыдущая страница
- 2 - Следующая страница
- 3 - Предыдущий фрейм
- 4 - Следующий фрейм
Вкладка №5 (Инструмент “Текст”):
Столбец №1:
- 1 - Выделить жирным
- 2 - Выделить курсивом
- 3 - Подчеркнуть
- 4 - Вставить и сопоставить элемент
Столбец №2:
- 1 - Выровнять текст по левому краю
- 2 - Выровнять текст по центру
- 3 - Выровнять текст по правому краю
- 4 - Выровнять текст по ширине
Столбец №3:
- 1 - Изменение размера текста
- 2 - Изменение расстояния между символами
- 3 - Изменение расстояния между строками
Вкладка №6 (Векторные изображения):
Столбец №1:
- 1 - Перо
- 2 - Карандаш
- 3 - Заливка
Столбец №2:
- 1 - Удалить заливку
- 2 - Удалить обводку
- 3 - Поменять местами обводку и заливку
- 4 - Преобразовать в кривые
- 5 - Также преобразование в кривые (но функция отличается, я ей не пользуюсь)
Столбец №3:
Работа с точками векторных изображений (Эти функции я не использую)
Вкладка №7 (Выделение):
Столбец №1:
- 1 - Выделить все
- 2 - Выделить все, кроме…
- 3 - Отменить выделение
- 4 - Выделение слоев, которые находятся под другими слоями
- 5 - Выделение слоя на боковой панели
Столбец №2:
- 1 - Выделить дочерний элемент
- 2 - Выделить родительский элемент
- 3 - Выделить следующий по порядку элемент
- 4 - Выделить предыдущий по порядку элемент
Столбец №3:
- 1 - Сгруппировать элементы
- 2 - Разгруппировать элементы
- 3 - Преобразовать в фрейм
- 4 - Показать/Скрыть элемент
- 5 - Заблокировать/Разблокировать элемент
Вкладка №8 (Курсор):
Столбец №1:
- 1 - Выделение элемент при клике
- 2 - Копирование элемент при движении
Столбец №2:
- 1 - Выделение слоев, которые находятся под другими слоями
- 2 - Показывается иерархия выделенного элемента
Столбец №3:
- 1 - Изменение размера относительно центра элемента
- 2 - Изменение размер пропорционально
- 3 - Перемещение во время изменения размеров элемента
Вкладка №9 (Редактирование):
Столбец №1:
- 1 - Копировать
- 2 - Вырезать
- 3 - Вставить
- 4 - Вставить поверх выделенного элемента
Столбец №2:
- 1 - Создание копии
- 2 - Переименование
- 3 - Экспорт элемента
Столбец №3:
- 1 - Копировать свойства элемента
- 2 - Вставить скопированные свойства
Вкладка №10 (Трансформирование):
Столбец №1:
- 1 - Отразить по горизонтали
- 2 - Отразить по вертикали
- 3 - Создать маску
Столбец №2:
- 1 - Включить редактирование векторных объектов или изображений
- 2 - Вставить изображение
- 3 - Обрезать изображение
Столбец №3:
- 1 - Задать прозрачность элементу - 10%
- 2 - 50%
- 3 - 100%
Вкладка №11 (Выравнивание):
Столбец №1:
- 1 - Переместить на 1 уровень ближе к переднему плану
- 2 - Переместить на 1 уровень дальше от переднего плана
- 3 - Переместить на передний план
- 4 - Переместить на задний план
Столбец №2:
- 1 - Выровнять по левой стороне
- 2 - Выровнять по правой стороне
- 3 - Выровнять по верхней стороне
- 4 - Выровнять по нижней стороне
Столбец №3:
- 1 - Выровнять согласно горизонтальной линии элементов
- 2 - Выровнять согласно вертикальной линии элементов
- 3 - Не пользуюсь функцией
- 4 - Выравнивание с распределением горизонтального пространства
- 5 - Выравнивание с распределением вертикального пространства
Вкладка №12 (Компоненты):
Также очень важный вопрос: как отменить действие в фигма? Для того чтобы отменить действие в Figma - нужно всего лишь нажать клавиатурное сокращение "Ctrl + Z". И в зависимости от количества нажатий, вы отмените предыдущие действия.
Важно! Когда вы изучили все клавиатурные сокращения в Figma - рекомендую для закрепления отработать их на реальных макетах. По этой и этой ссылкам вы можете найти готовые макеты для оттачивания своих навыков.
Как назначаются текстовые стили в Figma? Как поместить изображение в форму и создать дизайн галереи, используя маски? Узнайте это и многое другое, продолжив работу над приложением Proper Nutrition вместе со мной.
Данная статья является продолжением цикла статей, посвященных разработке мобильного приложения Proper Nutrition:
При создании страницы будем ориентироваться на ранее разработанный прототип .
Стили текстовых заголовков
Если у вас не включены линейки – включите их (Shift + R).
Как в Photoshop вытяните горизонтальную направляющую, обозначив границу status bar и вертикальные направляющие с отступами 24 px слева и справа. Это 3 клеточки по 8px в нашей сетке.
Используем стандартный шрифт Google Fonts – Comfortaa 14 Bold.
Для того, чтобы сохранить данные настройки текста и использовать их для всех заголовков второго уровня, необходимо создать стиль.
В группе Text на панели свойств щелкните на значок Style и нажмите + (Create Style)
Задайте имя стиля – H2.
После нажатия Create Style данный стиль появится в списке стилей текста, а настройки текущей записи будут выглядеть следующим образом.
Открепить данный стиль от текста и изменит его параметры можно, нажав иконку Detach Style напротив названия стиля.
Стили можно создавать не только для текста. В них можно сохранять эффекты, настройки теней, цветовую палитру проекта и так далее. Стили позволяют многократно использовать настройки для однотипных объектов, что очень удобно и экономит время.
Галерея картинок (слайдер)
Теперь нарисуем слайдер. В нем будут помещаться изображения популярных блюд (тех, которые пользователи открывают чаще всего).
Заливка фигуры растровой картинкой
О загрузке изображений в Figma мы уже говорили, когда создавали дизайн страницы SplashScreen .
Сейчас поместим изображение другим методом. Сделаем заполнение фигуры растром.
Таким образом фигура будет служить рамкой для фотографии.
Под заголовком разместите прямоугольник. Потянув за точки рядом с углами – закруглите их. Размер прямоугольника – 325 x 216. Это соотношение сторон 3×2.
На панели свойств найдите пункт Fill (заполнить) и вместо цвета выберите Image (изображение).
В появившемся окне нажмите на кнопку Choose Image и выберите изображение. (Я, например, скачала изображения на одном из бесплатных фотостоков )
Там же в настройках можно поменять режим заполнения фигуры. Их 4:
- Fill (по умолчанию). Изображение полностью заливает фигуру и подстраивается под большую из сторон. Если изменить размер прямоугольника, картинка будет менять свои размеры. Центр растра совпадает с центром фигуры.
- Fit: Картинка заполняет фигуру и подстраивается под меньшую из сторон. Если пропорции фото и изображения не совпадают – появятся пустоты.
- Crop: Изображение вписывается в фигуру в своих точных размерах, а фигура обрезает его. Она служит маской (рамкой) картинки. В этом режиме можно двигать изображение в рамке, зажав CMD (Ctrl)
- Tile: данный режим используется для заполнения фигуры бесшовными, повторяющимися паттернами.
Мы оставим режим Fill.
Мы специально преобразовали фигуру с картинкой в компонент, так как еще ни раз будем использовать его в нашем проекте.
Кнопки индикаторов изображений на слайдере
Теперь нарисуйте три эллипса с диаметром 8 пикселей, это будут индикаторы переключения картинок на слайдере. Примените к ним следующие настройки:
Блок с описанием картинок на слайдере – изучаем маски
Заметно, что края этого прямоугольника заходят за фигуру с картинкой. Чтобы этого избежать сделаем следующее:
Разместите следующий текст с описанием блюда.
Послесловие
Данный этап работы с приложением завершен. Далее вас ждет создание кнопок для выбора категории блюд и еще раз поговорим о компонентах.
по e-mail или социальных сетях
и мы обязательно опубликуем для вас еще больше полезных бесплатных уроков и материалов!
Читайте также: