{"id":14275,"url":"\/distributions\/14275\/click?bit=1&hash=bccbaeb320d3784aa2d1badbee38ca8d11406e8938daaca7e74be177682eb28b","title":"\u041d\u0430 \u0447\u0451\u043c \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u044b \u0430\u0432\u0442\u043e?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"f72066c6-8459-501b-aea6-770cd3ac60a6"}

Что важно знать для уверенной работы в фигма?

Статья о функционале фигмы, необходимом для изучения. Когда начинаешь осваивать новый софт, иногда даже не знаешь за что схватиться. Здесь как раз краткая выжимка о ключевых темах

1. Основные инструменты
Это база. Важно понимать как рационально пользоваться возможностями программы. Изучите каждую кнопку на панели инструментов. Узнайте как сделать пятиугольник и чем отличается инструмент Move (v) от Scale (k).

Главная панель инструментов Figma

2. Горячие клавиши

Здесь все просто, это вопрос привычки. Горячие клавиши многократно ускорят вашу работу, когда вы к ним привыкните. Не пугайтесь объема, очевидно в горячих клавишах вы будете использовать в среднем всего 10 популярнейших инструментов

Все горячие клавиши на русском по ссылке 

3. Компоненты и стили

Главное правило IT гласит: не повторяй себя. Если элемент повторяется больше двух раз, сделайте из него шаблон. В чем польза? Внося правки в главный компонент или стиль (текста, цвета, эффекта, etc) будут изменяться все элементы, имеющие эту настройку

Работа с большими проектами становится невыносимой, если своевременно не оформить компоненты и стили

4. Автолэйаут

Это новая функция в Фигме, позволяющая адаптировать элемент под любые размеры макетов. Представьте, что у вас есть календарь и вам нужно сделать его шире на 30 px. Автоскейл позволяет сделать это одним движением, а не через настройки отдельных элементов
Скриншоты из макета под видео о создании календаря через компоненты и статьи о библиотеках

5. Научитесь упорядочивать элементы

Это важно как минимум с иконками. Упорядочивание позволит быстро их заменять при необходимости. Для этого нужно упаковать иконку в компонент и прописать "путь" к ней вида Block name / icon_name (хотя в прочем какого хотите вида)

Скриншот из обучающего видео от Дмитрия Варфоломеева

Порядок в слоях также необходим. Объединяйте элементы в группы (или фреймы), делите макеты по страницам (например, страница для мудборда, еще одна под UI-kit и третья под разработку), давайте корректное название группам и шейпам

Варфреймы одного из заказчиков были оформлены так

6. Прототипирование

Самая интересная и объемная (на мой взгляд) тема в изучении фигмы. Прототипирование позволяет анимировать макет. Почему это важно? Верстальщики должны понимать какую анимацию вы планируете на сайте. Как должна крутиться галерея и откуда выскакивают звездочки. Прототипирование как раз это и показывает

Гифка взята из вводной статьи Skillbox об основных функциях прототипирования

Думаю, путь к сеньору лежит через глубинное изучение каждой из этих тем. Штож... Я в пути.

Рекомендую прочитать статьи-источники. Есть дополнения или замечания? Пиши в комментарии

0
Комментарии
-3 комментариев
Раскрывать всегда