Как сделать в Figma так, чтобы рамка растягивалась вместе набираемым текстом?
Как сделать в Figma так, чтобы рамка растягивалась вместе набираемым текстом? Чтобы не происходит перенос строк как в Paint’e. Ужасно неудобная и непривычная логика после Photoshop. Помогите, пожалуйста)
- Вопрос задан более года назад
- 1473 просмотра
Простой 1 комментарий
- Вконтакте
По всей вероятности, судя по приложенному скриншоту, выставлен третий тип выравнивания текста «Fixed Size» — см. иконки на скриншоте ниже:
чтобы рамка адаптировалась по высоте набираемого текста, но оставалась фиксированной ширины, которую можно изменять вручную, надо выбрать вторую иконку «Auto height». А чтобы рамка полностью подстраивалась под текст и по ширине тоже, надо выбрать первую иконку «Auto width».
- Вконтакте
Нажми букву K на клавиатуре, она активирует пропорциональное масштабирование
.
Как сделать обводку в Фигме. Сплошную или пунктирную.
Как создать пунктирную или сплошную обводку в Figma? Инструкция для начинающих пользователей программы.
Инструкция как сделать сплошную или пунктирную обводку вокруг фигуры, фрейма, текста или любого другого объекта в Фигме.
Чтобы сделать обводку в Figma нужно:
- Выбрать какой-либо элемент. Это может быть фигура, текст, фрейм или что-то ещё.
- В правой панели напротив надписи «Stroke» нажмите иконку плюсика.
- После этого вы сможете изменять цвет обводки, задавать толщину, делать обводку пунктиром.
Как сделать пунктирную обводку в Фигме?
Пунктирную обводку можно создать после добавления обычной. Нажмите внизу надписи «Stroke» (в правой панели) на иконку с тремя точками. Перед вами появится окно с заголовком «Advanced stroke». Это расширенные настройки обводки. Измените значение параметра «Dashes». Например можно поставить 50, 40. Первая цифра (50) — это размер пунктирных линий. Вторая цифра (40) — размер разрыва между пунктирными линиями.
Параметры обводки в Figma
Рассмотрим основные параметры обводки, которые вы можете изменять.
Такие как: цвет, прозрачность, видимость, удаление, толщина обводки, тип, преобразование сплошной линии обводки в пунктирную.
1. Цвет
Чтобы изменить цвет обводки нажмите на цвет внизу надписи «Stroke» или введите код какого-либо цвета (например FF2A54).
Также вы можете изменять тип обводки. Если откроете панель цвета, то сверху по умолчанию стоит надпись «Solid» — это сплошная обводка. В списке есть другие типы обводки.
Linear — линейный градиент.
Radial — радиальный градиент.
Angular — угловой градиент.
Diamond — градиент в виде кристала.
Image — изображение.
2. Добавление нового стиля цвета
Напротив надписи «Stroke» есть иконка с 4 точками в виде квадрата. Если на неё нажать, то появится возможность выбирать цвет из цветовой палитры. Если вы хотите создать новый цвет в вашей палитре и использовать его повторно, то нажмите на плюсик (как показано на картинке выше).
Дайте имя новому цвету и нажмите на кнопку «Create style». После этого вы сможете исползовать этот цвет повторно и он появится в панели справа.
3.Видимость
Можно временно отключить видимость обводки. Для этого нажмите иконку глаза с правой стороны.
4. Как сделать обводку в фигме более прозрачной
Изменение прозрачности обводки в Figma
Чтобы изменить прозрачность обводки, измените цифры с процентами. Изначально по умолчанию стоит 100%. Если поставить 50%, то прозрачность измениться.
5. Как удалить обводку в фигме
Чтобы удалить обводку в фигме, нажмите на иконку минуса.
6. Толщина.
Толщина обводки в фигме
Изменение толщины обводки интуитивно понятно. Для того, чтобы это сделать нужно изменить цифру под цветом, напротив иконки с 3 линиями разной толщины. Изначально создается обводка толщиной 1 px.
7. Выбор типа обводки
Можно сделать обводку внутри (Inside), по центру (Center), снаружи (Outside).
Хотите лучше освоить программу Figma? Получите бонусный урок в подарок + материалы для создания дизайна сайта (Landing Page) по этой ссылке.
Фигма как создать рамку для карточек алиэкспресс
Как сделать в Figma так, чтобы рамка растягивалась вместе набираемым текстом?
Как сделать в Figma так, чтобы рамка растягивалась вместе набираемым текстом? Чтобы не происходит перенос строк как в Paint’e. Ужасно неудобная и непривычная логика после Photoshop. Помогите, пожалуйста)
- Вопрос задан более года назад
- 416 просмотров
- Вконтакте
- Вконтакте
Нажми букву K на клавиатуре, она активирует пропорциональное масштабирование.
Хардкорные карточки на Auto Layout – Figma-компоненты, часть вторая
Продолжаем оптимизировать UI-kit и дизайн-систему необычными способами. В прошлый раз мы разбирали хардкорные ячейки, многим зашла эта тема, поэтому продолжаем делать разборы компонентов, следующий на очереди — карточки.
Всё из статьи упаковано в этом Figma-проекте, тыкайтесь на здоровье. А пока вот краткое превью, как работают карточки:
Как видишь, всё работает внутри одного scroll-блока и нам не нужно множество компонентов Scroll Block/Small, Medium, Horizontal и так далее, а размеры картинок у нас и так должны быть в ките, если ты добрался до систематизации размеров изображений, конечно.
Все изображения можно менять через инстансы, а не удаление/проявление слоёв, значит наш проект будет в разы меньше весить и не будет лагать (особенно актуально для больших проектов).
Прежде чем у меня получился гибкий и лёгкий в использовании компонент, я потратил не одну попытку, а весь секрет карточки на auto layout оказался в одном НЕ auto layout слое, вот так вот.
Чтобы менять размер изображения в auto layout через instanse и не потерять саму заливку изображения, нужно добавить отдельный обычный слой внутрь него, который и будет отвечать за размер карточки.
Позже оказалось, что этот слой не останется пустышкой, внутрь него можно положить различные контролы (например, таймер для видео) и обводку, чтобы белые карточки имели чёткие границы, если тебе это нужно, конечно.
После того, как мы разобрались с изображениями, просто засовываем один из вариантов картинок и слой c заголовком и подзаголовком в один auto layout компонент. Для текстового слоя включите режим Stretch left and right, чтобы при смене размера изображения текстовый слой тоже расширялся или сужался до нужного размера автоматически.
Теперь без всяких извращений можешь использовать готовую карточку где угодно, а сменять изображение по Ctrl + нажатие и смена инстанса на нужный, всё легко и просто.
На этом всё. Рассказать об этой карточке, оказалось, намного проще, чем к ней прийти, обычно наоборот. Поэтому пробуйте и тыкайтесь в этом Figma-проекте, если будут какие-нибудь предложения, допиливайте и оставляйте ссылки в комментариях. Туда же пишите вопросы и пожелания, обсудим.
А если хочется ещё хардкорных статей по компонентам и дизайн-системам, залетайте в мой Telegram-канал 😉
Где ты был месяц назад.
Я месяц назад был в Москве, а вы?)
Разве самоизоляции тогда не было? По-моему мы уже по домам сидели))
Тире, минус или дефис?)
там был коммент, что не очень понятно зачем 2 раза оборачивать в автолайаут, но потом понял на больших размерах)
но не кажется, что это несколько оверкилл и проще всё же создавать определенные пресеты каруселей/ячеек?
Возможно, это разные подходы к формированию процесса создания дизайна интерфейсов, у каждого свои плюсы и минусы: с одной стороны моими способом кажется сложнее пользоваться, но я постарался сделать такую систему, что сменить карточки в пресете можно за один клик, а сэкономленное место в облаке фигмы поможет сохранить нервы, когда проект просто вырубится из-за большого количества синхронизируемых компонентов. У нашей команды недавно случился такой трабл и сейчас поддержка фигмы просто восстанавливает нам проект своими силами, поэтому сейчас я пытаюсь выжать максимум из каждого слоя и упаковать всё в один дополнительный контейнер вместо разделения на несколько компонентов)