Степан Воеводин

Относительно второго скрина, самое просто это собрать через компоненты и автолейауты.

1. Пишем текст и заворачиваем его в Autolayout


2. Задаем внешний вид (заливка, скругление и т.п.)


3. Заворачиваем получивший объект в компонент и добавляем варианты (раскрашиваем их на своё усмотрение)


4. Копируем компонент несколько раз и заворачиваем в Autolayout, чтобы получилась строка из мест


5. Копируем получившуюся строчку несколько раз и так же заворачиваем в Autolayout


6. Добавляем текст слева с номером рядов.


7. Изменяем номер места и вариант компонента

Чтобы заменить один Instance на другой. Открываете панель Assets (справа от вкладки Layers), зажимаете Alt (Cmd на Mac) и мышкой зажимаете нужный компонент, потом перетаскиваете на Instance, который хотите заменить, и отпускаете мышку.


Но как мне кажется проще изменить Instance через правую панель. Просто нажав на название компонент и заменить на другой.

Значок "буби" обозначает что это Компонент.
Подробнее про компоненты можно почитать – тут

Есть несколько способов избавиться от подписи:
1. Если нужно оставить элемент в виде компонента:
• Просто сделать копию элемента (у копии не будет подписи)
• Можно переименовать в списке слоёв, вместо названия поставить пробел (но останутся "буби")
• Обернуть элемент в группу (Ctrl+G)
• Вставить в макет (во Frame, Group, Auto Layout)

2. Если нет необходимости сохранять компонент:
• Скопировать элемент, у копии сделать Detach instance (Ctrl+Alt+B или через меню по правому клику), справа в меню нажать на "Frame▼" и выбрать там "Group"

У самой фигмы такого эффекта нет. Можете воспользоваться плагином, например Pixels

Всё, понял вас. То что вы хотите можно сделать через маску. Кладём под картинку нужного размера объект. Выделаем оба и жмём правой кнопкой, выбираем Use as mask (Ctrl+Alt+M).
У нижнего объекта цвет заменяем на градиент с прозрачностью, так как вам это нужно. Результат:

Можно на фреймы, группы и автолэйауты дергать ссылки.
Для этого надо правой кнопкой мыши нажать на объект (вызвать меню) и там Copy/Paste as - Copy link.


Так же можно на любой текст навесить ссылку. При наведении будет появляться тултип, если нажать "Go to frame", то переместитесь по ссылке.

Не так давно появилась такая возможность «Absolute position» в Auto Layout

Вам подойдёт плагин Rename It.
С его помощью можно переименовать все слои массово. Можно выделить все фреймы и нажать на Enter - тогда выделятся все слои внутри фреймов. Далее запускаете плагин и выбираете Parent Name (будет наследовать название фрейма) + Num (чтобы была нумерация). Не забудьте поставить между ними "/", чтобы при экспорте для каждой группы создались отдельные папки по названию фрейма.

На скрине пример конечного имени


Когда все переименуете, можно опять выделить все фреймы, нажать Enter чтобы выбрались слои внутри, ну и уже экспортируйте в нужном вам формате

1. Рисуем круг, добавляем черный фон


2. Добавляем на круг градиент


3. Добавляем кругу размытие


4. Рисуем прямоугольник поверх круга


5. Добавляем прозрачность цвету и обводку


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


Если необходимо добавить шум, то можно сделать это через плагин - Noise

Если у вас есть полноправный доступ к макету, то заменить % на px можно в правой панели Design выбрав нужный слой.


А вообще Figma позволяет задавать line-height тремя вариантами.

Текст 1 – если на вкладке Design ставите Auto, то в Inspect отображается px
Текст 2 – если на вкладке Design ставите точное значение px, то в Inspect отображается px
Текст 3 – если на вкладке Design задаёте в %, то и в Inspect отображается %