Спасибо, хороший вопрос! Действительно, Anima и ряд других плагинов решают похожую проблему.
Но на мой скромный взгляд, у такого похода есть недостатки: – Фигма или Скетч ориентированы на создание статических изображений, что противоречит динамической и адаптивной природе веба. Например, нельзя использовать размеры в процентах или относительно ширины вьюпорта (vh, vw); недоступны в полной мере возможности margin и padding и множество других деталей. Конечно, функция Auto Layout помогает в этом, но до полноценных возможностей CSS еще далеко. – Структура макета может сильно отличаться от структуры HTML документа. В разметке документа должна быть семантика. Например, поле ввода – это тег input, а кнопка тег button, а в макете это просто два прямоугольника. И здесь возникает проблема интерпретации того что нарисовал дизайнер, и того как это должно быть перенесено в код. И еще, многие элементы должны иметь атрибуты, например alt или title, что также трудно отразить в макете. – В макете может быть недостаточно данных для переноса в код. Например, в одном фрейме нельзя задать разное поведение для разной ширины экрана, что затрудняет создание адаптивной версии сайта. Бывает даже так, что технически нельзя реализовать часть макета. – Связка двух инструментов всегда усложняет работу. При внесении изменений в исходный макет приходится каждый раз делать экспорт, что замедляет скорость итераций дизайна.
Поэтому, чтобы после экспорта из Фигмы получился качественный сайт, приходится дорабатывать его руками, иногда очень сильно. И мне кажется, что инструмент, изначально ориентированный на природу веба, ускорит работу дизайнера и сделает результат его работы более предсказуемым и качественным.
А почему из Фигмы сразу через плагин Anima вёрстку не получить? Это же удобнее. Или я чего-то не понял?
Спасибо, хороший вопрос! Действительно, Anima и ряд других плагинов решают похожую проблему.
Но на мой скромный взгляд, у такого похода есть недостатки:
– Фигма или Скетч ориентированы на создание статических изображений, что противоречит динамической и адаптивной природе веба. Например, нельзя использовать размеры в процентах или относительно ширины вьюпорта (vh, vw); недоступны в полной мере возможности margin и padding и множество других деталей. Конечно, функция Auto Layout помогает в этом, но до полноценных возможностей CSS еще далеко.
– Структура макета может сильно отличаться от структуры HTML документа. В разметке документа должна быть семантика. Например, поле ввода – это тег input, а кнопка тег button, а в макете это просто два прямоугольника. И здесь возникает проблема интерпретации того что нарисовал дизайнер, и того как это должно быть перенесено в код. И еще, многие элементы должны иметь атрибуты, например alt или title, что также трудно отразить в макете.
– В макете может быть недостаточно данных для переноса в код. Например, в одном фрейме нельзя задать разное поведение для разной ширины экрана, что затрудняет создание адаптивной версии сайта. Бывает даже так, что технически нельзя реализовать часть макета.
– Связка двух инструментов всегда усложняет работу. При внесении изменений в исходный макет приходится каждый раз делать экспорт, что замедляет скорость итераций дизайна.
Поэтому, чтобы после экспорта из Фигмы получился качественный сайт, приходится дорабатывать его руками, иногда очень сильно.
И мне кажется, что инструмент, изначально ориентированный на природу веба, ускорит работу дизайнера и сделает результат его работы более предсказуемым и качественным.