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

Връзки към устройства

• Android
• iPhone
• Mac
• Windows
• Устройството липсва?

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

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

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

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

Figma Inspect

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

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

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

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

Figma Plugins

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

Figma към HTML

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

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

Анима за Figma

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

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

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

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

Figma Inspect

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

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

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

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

Figma Plugins

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

Figma към HTML

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

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

Figma към код

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

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

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

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

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

Figma също предлага Figma Mirror приложение в 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. Можете да станете тестер, като изтеглите приложението от Магазин за игри и достъп до това връзка . Можете да разглеждате, преглеждате и споделяте своите дизайни и да проследявате промените в приложението, дори когато не сте близо до компютъра си.

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

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

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

къде е бутонът за търсене на дистанционното управление vizio smart tv

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

Как да експортирам цветове от 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. Натиснете Plugins.

3. Изберете Browse Plugins in Community.

4. Въведете Figma to HTML в лентата за търсене и се уверете, че Plugins е избран в горната част.

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

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

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

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

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

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

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

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