Почему при верстке из figma получается не так как в ней?

Question

[Denis9999]

Указываю font-size, font-weight, размеры кнопки купить как в фигме, но в результате получается выглядит не как в ней. Слишком большие текста и кнопка. Почему так получается?
В фигме:

Результат на сайте:

Comments

[Semantic.Moscow]

возможно я просто не понимаю фигму и не умею ей пользоваться (не очень то и пытался),
но ИМХО, это не инструмент верстальщика,
это скорее удобная среда для дизайнера, с возможностью создания прототипа для того, чтобы показать верстальщику наглядно чего именно хочется,
но брать код из фигмы и слепо переносить на сайт, это очень и очень плохо.

[archelon]

Semantic.Moscow,

брать код из фигмы и слепо переносить на сайт, это очень и очень плохо

все так.
при этом фигма — отличный инструмент для верстальщика, если он умеет верстать, конечно.
из кода фигмы можно брать отдельные значения и строки, которые без этого пришлось бы подбирать на глаз, например, box-shadow или какие-нибудь градиенты.

Denis9999,
дайте ссылку на макет и на ваш код

[Semantic.Moscow]

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

в контексте фигмы, я сейчас начну "фронтпейдж экспресс" нахваливать - держите меня семеро!

[Denis9999]

archelon, Frame 2 https://www.figma.com/file/WHZ7MMxzZd0jHRDdOmjKnu/...

код только тут в инспекторе можно посмотреть - https://orionmbrick.ru/my-predlagaem/kirpich-polno...

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

[Elena Fire]

Denis9999, в фигме все нормально с размерами и с px. Нужно учитывать размер экрана, на который рассчитывал дизайнер. Если верстать с rem, то вообще на любом экране выглядеть будет, как в дизайне. Правда, и видно будет на мелких экранах примерно так же мелко.

Answer 1

[Dymok]

Все хорошо с размерами в фигме.
Экспортировал всю страницу из фигмы, наложил на верстку, получилось так.
То есть начать стоит с того, что взят неверный размер контейнера.

Допустим, возьмем размер шрифта 50px для цены и сверим, получится полное совпадение:

Comments

[Denis9999]

а как вы экспортировали страницу и сделали наложение?

[Петр]

Denis9999, это плагин для браузера.
PerfectPixel в него можно сгрузить пнг и через прозрачность смотреть, совпадает дизайн с версткой или нет.

[Denis9999]

Петр, спасибо