Привет еще раз.
Когда последний раз я делал сайт на фронте, то это были макеты в фотошопе.
Сейчас мне дали фигму макеты.
Можно конечно поискать в сети как нарезать фронт из макетов, но хочется кто точно в теме получить ЦУ, как макеты фигмы перевести во фронт.
Коллега тут говорил что вначале надо UI Kit сделать из макетов фигмы, но я думал фигма сама нарезает в html + css.

В общем советы и первичное погружение очень хотелось бы услышать как макеты перевести во фронт.

Здравствуйте, peer, Вы писали:

P>Привет еще раз.
P>Когда последний раз я делал сайт на фронте, то это были макеты в фотошопе.
P>Сейчас мне дали фигму макеты.
P>Можно конечно поискать в сети как нарезать фронт из макетов, но хочется кто точно в теме получить ЦУ, как макеты фигмы перевести во фронт.
P>Коллега тут говорил что вначале надо UI Kit сделать из макетов фигмы, но я думал фигма сама нарезает в html + css.

P>В общем советы и первичное погружение очень хотелось бы услышать как макеты перевести во фронт.


Мне коллега на работе посоветовал поставить для фигмы такой плагин — Builder.io — AI-Powered Figma to Code. Вроде работало.

P>Коллега тут говорил что вначале надо UI Kit сделать из макетов фигмы, но я думал фигма сама нарезает в html + css.

Наверное коллега имел ввиду, что сначала из макетов в Фигме надо сгенерить свой набор компонент под React/Vue/Svelte/что у вас там. А потом уже из этих атомарных блоков строить весь остальной UI.

Дело в том, что в Фигме при хорошей проработке достаточно сложного UI помимо самих экранах форм и страниц есть еще и описание всех UI-компонент, используемых для сборки UI. Выглядит примерно так https://cdn.sanity.io/images/599r6htc/regionalized/af40567d438bc80110cc5b85747a5503ca78b9d9-2914x1478.jpg?w=2914&h=1478&q=75&fit=max&auto=format

Здравствуйте, peer, Вы писали:

P>Можно конечно поискать в сети как нарезать фронт из макетов, но хочется кто точно в теме получить ЦУ, как макеты фигмы перевести во фронт.
P>Коллега тут говорил что вначале надо UI Kit сделать из макетов фигмы, но я думал фигма сама нарезает в html + css.

А ты уверен, что дизайнер на фигме вообще понимает как оно потом работать будет? А то иногда накидают дивов в фигме, которые там тупо по каким-то правилам раскиданы — напрямую в коде такое точно не стоит повторять.

P>В общем советы и первичное погружение очень хотелось бы услышать как макеты перевести во фронт.

Хороший вариант (у нас сейчас так):
1. Дизайнер использует в фигме UI-кит фирменной либы
2. На фронте тоже используется фирменная либа, поэтому когда повторяешь верстку — просто накидываешь компоненты и настройки шрифтов смотришь чтобы совпадали, цвета и значения падингов и прочего тоже обычно указаны константами из CSS — которые и используются.

Поэтому в целом нужна договоренность с дизайнером, а если оно без этого — то тут уже все зависит от того, как оно там нарисовано