Как да експортирате код във Figma

Една от най-добрите характеристики на Figma е, че ви позволява бързо да прехвърляте дизайните, които правите с нея, в код. Ако сте разработчик на приложения или работите с дизайнери, това е ценно умение, което трябва да научите. С помощта на вградени инструменти и множество плъгини, Figma ви позволява да експортирате своя дизайн на различни платформи.

Ако искате да научите повече за преобразуването на вашия дизайн на Figma в код, попаднали сте на правилното място. В тази статия ще обсъдим как да експортирате код във Figma и какви инструменти ще трябва да използвате.

Как да експортирате код във Figma на компютър с Windows

Ако сте потребител на Windows и искате да експортирате код във Figma, ще се радвате да знаете, че можете да използвате множество опции.

Figma Инспектирайте

Един от методите, които можете да използвате за експортиране на код във Figma, е Figma Inspect. Тази функция ви позволява лесно да конвертирате дизайните си в Android, iOS или уеб код. Тъй като е вграден, не е необходимо да инсталирате плъгини или приложения на трети страни.

Ето как да го използвате:

1. Изберете елементите, които ви интересуват, и отидете в раздела Проверка.
2. В секцията „Код“ изберете кода, който искате да експортирате (CSS за уеб, Swift за iOS или XML за Android).

Инструментът ще генерира кода в зависимост от избраната от вас опция и след това можете да го експортирате. Въпреки че това е чудесен инструмент, той има някои ограничения. А именно, не можете да експортирате SVG в HTML. За целта ще трябва да използвате плъгин.

Добавки за Figma

Figma включва стотици полезни добавки. Ще споменем няколко, които можете да използвате, за да експортирате своя дизайн в HTML.

Figma към HTML

The плъгин ви позволява да конвертирате вашия дизайн в HTML или CSS, в зависимост от вашите нужди. Следвайте стъпките по-долу, за да инсталирате плъгина и кода за експортиране:

1. Достъп до главното меню чрез натискане на иконата в горния ляв ъгъл.
   
2. Натиснете „Приставки“.
   
3. Натиснете „Преглед на приставките в общността“.
   
4. Въведете „Figma към HTML“ и изберете „Добавки“ в горната част.
   
5. Натиснете „Инсталиране“.
   
6. Върнете се към вашия дизайн и изберете желаните елементи.
7. Върнете се в главното меню, изберете „Добавки“ и след това изберете „Figma към HTML“.
   
8. Изберете HTML или CSS.
   
9. Натиснете „Копиране“ или „Изтегляне“ в зависимост от вашите нужди.
   

Анима за Figma

Друг полезен плъгин е Anima за Figma. С този плъгин можете да конвертирате своя дизайн в HTML, CSS, React и Vue. Следвайте тези стъпки, за да използвате приставката:

1. Отворете главното меню, като изберете горната лява икона.
   
2. Натиснете „Приставки“.
   
3. Изберете „Преглед на приставки в общността“.
   
4. Въведете „Anima for Figma“.
   
5. Натиснете „Инсталиране“.
   
6. Изберете елементите, които искате да експортирате.
7. Отворете главното меню, натиснете „Plugins“ и изберете „Anima for Figma“. Регистрирайте се, ако нямате акаунт.
   
8. Изберете типа код и натиснете „Експортиране на код“.

Как да експортирате код във Figma на Mac

Експортирането на вашия дизайн в код на Mac устройство може да се извърши по няколко начина.

Figma Инспектирайте

Този вграден инструмент ви позволява да проверявате и експортирате код и други стойности за вашите проекти. С Figma Inspect можете да избирате между три опции за код: Android, iOS или Web (само CSS).

Следвайте стъпките по-долу, за да използвате Figma Inspect на Mac:

1. Изберете елементите, които искате да експортирате.
2. Отворете раздела „Проверка“ вдясно.
3. Изберете между CSS, iOS или Android.
4. Копирайте вашия код.

Ако се интересувате само от CSS, iOS и Android, това е отличен инструмент за използване. Ако обаче искате да експортирате своя дизайн в HTML, ще трябва да използвате различен метод.

Добавки за Figma

Ако искате да конвертирате вашите проекти в HTML, Figma предлага десетки добавки, които служат за тази цел. Процесът на инсталиране е прост. Ще изброим някои от най-популярните.

Figma към HTML

Това плъгин ви позволява да конвертирате дизайна си в CSS или HTML. Ето как да го инсталирате:

1. Изберете горната лява икона, за да отворите главното меню.
   
2. Натиснете „Приставки“.
   
3. Изберете „Преглед на приставки в общността“.
   
4. Въведете „Figma към HTML“ в лентата за търсене и изберете „Добавки“ в горната част.
   
5. Натиснете „Инсталиране“.
   
6. Върнете се към вашия дизайн и изберете елементите, които искате да експортирате.
7. Отворете главното меню, изберете „Добавки“ и след това изберете „Figma към HTML“.
   
8. Изберете HTML или CSS.
   
9. Натиснете „Копиране“ или „Изтегляне“.
   

Figma to Code

С тази плъгин, можете да конвертирате своя дизайн на Figma в HTML, Tailwind, Flutter или Swift UI. Следвайте стъпките по-долу, за да го инсталирате и използвате:

1. Натиснете горната лява икона за достъп до главното меню.
   
2. Изберете „Добавки“.
   
3. Натиснете „Преглед на приставките в общността“.
   
4. Въведете „Figma to Code“ в лентата за търсене и изберете „Plugins“ в горната част, за да получите подходящи резултати.
   
5. Натиснете „Инсталиране“.
   
6. Отидете до вашия дизайн и изберете желаните елементи.
7. Влезте отново в главното меню, изберете „Plugins“ и след това изберете „Figma to Code“.
8. Изберете желания код.
9. Натиснете „Копиране в клипборда“.

Мога ли да експортирам код във Figma на iPhone?

Новото приложение Figma за iPhone беше достъпно само като бета версия през Пробен полет за първите 10 000 iPhone, но компанията заявява, че пълното внедряване ще дойде скоро. Приложението ви позволява да преглеждате и осъществявате достъп до вашите дизайни и да проследявате промените на живо на вашия iPhone, докато редактирате дизайна на вашия компютър.

По това време не е възможно да се редактират дизайни чрез приложението за iPhone, което означава, че няма начин да се експортира код през него.

Figma също предлага Фигма огледало приложение в App Store. Това приложение ви позволява да дублирате вашите дизайни на всяко iOS устройство, без да сте свързани към същата мрежа. По този начин можете да проверите как изглежда вашият дизайн на конкретно устройство (в този случай iPhone) и да следите промените. Въпреки че е полезно, приложението не ви позволява да експортирате код на вашия iPhone. За целта ще трябва да вземете компютъра си.

Можете също така да получите достъп до вашите проекти през вашия браузър. Все пак ще можете само да преглеждате своя дизайн и да проследявате промените на живо.

Мога ли да експортирам код във Figma на iPad?

За съжаление, не е възможно да експортирате код във Figma, ако използвате iPad. Figma работи върху мобилното приложение и има бета версия, но тя не беше достъпна за таблети, а само за iPhone и Android.

Приложението Figma Mirror се предлага на iPad. Приложението ви позволява да проследявате промените, които правите във вашия дизайн през компютъра, и да проверявате как изглеждат на екрана на iPad. За съжаление, опцията за експортиране на код в приложението не е налична.

Ако не искате да инсталирате приложението, можете да получите достъп до Figma през вашия браузър и да проследите промените в дизайна. Но експортирането на код във Figma е възможно само на компютър.

Мога ли да експортирам код във Figma на Android

В момента Figma работи върху приложението за Android и предлага бета версия за 10 000 телефона с Android. Можете да станете тестер, като изтеглите приложението от Магазин за игри и достъп до това връзка. Можете да преглеждате, преглеждате и споделяте своите дизайни и да проследявате промените в приложението, дори когато не сте близо до компютъра си.

Въпреки че приложението е полезно за много цели, то засега не ви позволява да експортирате код.

The Фигма огледало приложението е достъпно и за Android. Основната му цел е да проследява промените, които правите в дизайните си на вашия компютър, и да гарантира, че те изглеждат добре на всички устройства с Android. Опцията за експортиране на код не е налична.

Можете също да използвате Figma във вашия браузър, ако не искате да инсталирате приложението. Все още обаче няма да можете да експортирате кода. За целта ще трябва да използвате компютъра си.

Допълнителни ЧЗВ

Как да експортирам цветове от Figma към Xcode?

За съжаление, не е възможно да експортирате цветове от Figma към Xcode, тъй като Figma не го поддържа. Но има заобиколно решение, което можете да използвате, наречено Figma Export. Следвайте стъпките по-долу, за да го използвате:

1. Ако още не сте го направили, инсталирайте Figma Export.

2. Отворете „Terminal.app.“

3. Отворете папката с файла “figma-export”.

4. Стартирайте „figma-export“.

5. Експортирайте цветове с помощта на “./figma-export colors -i figma-export.yaml”.

Как да експортирам HTML код от Figma?

Както споменахме по-рано, вграденият инструмент, наречен Figma Inspect, ви позволява да получите CSS, но не и HTML. Ако имате нужда от HTML кода, ще трябва да инсталирате плъгин.

Figma разполага с десетки добавки, които служат за тази цел. Нашата препоръка е Figma към HTML. Ето как да го използвате:

1. Отворете главното меню. Това е иконата в горния ляв ъгъл.

2. Натиснете „Добавки“.

3. Изберете „Преглед на добавките в общността“.

4. Напишете „Figma to HTML“ в лентата за търсене и се уверете, че „Plugins“ е избрано в горната част.

5. Изберете „Инсталиране“.

6. Върнете се към вашия дизайн и изберете елементите, които искате да конвертирате в HTML.

7. Отидете в главното меню, изберете „Plugins“ и отворете „Figma to HTML“.

8. Натиснете HTML.

9. Изберете между „Копиране“ или „Изтегляне“.

Вземете кода, от който се нуждаете

Figma ви позволява да експортирате различни видове кодове, като използвате няколко метода. Можете да използвате вградени инструменти или да изтеглите различни добавки, в зависимост от вашите нужди. Засега експортирането на кодове е възможно само през компютри. Figma пусна бета версията на мобилното приложение (ограничена до 10 000 iPhone или Android устройства), но не разполага с тази опция. За щастие, експортирането на код на компютри е бързо и лесно.

Как експортирате код във Figma? Използвате ли някой от методите, които споменахме в тази статия? Кажете ни в секцията за коментари по-долу.