paint-brush
Tutorial: Ki jan yo vire fichye Figma nan SVG ak eleman Rectpa@skriv
10,269 lekti
10,269 lekti

Tutorial: Ki jan yo vire fichye Figma nan SVG ak eleman Rect

pa Aleksandr Krivov
Aleksandr Krivov HackerNoon profile picture

Aleksandr Krivov

@skriv

Working around the World. Share my thoughts and experiences.

2 min read2024/10/18
Read on Terminal Reader
Read this story in a terminal
Print this story
tldt arrow
ht-flagHT
Li istwa sa a an kreyòl ayisyen!
en-flagEN
Read this story in the original language, English!
es-flagES
Lee esta historia en Español!
ja-flagJA
この物語を日本語で読んでください!
fa-AF-flagFA-AF
این داستان را به زبان دری بخوانید!
sq-flagSQ
Lexojeni këtë histori në shqip!
it-flagIT
Leggi questa storia in italiano!
uz-flagUZ
Bu hikoyani o'zbek tilida o'qing!
mk-flagMK
Прочитајте ја оваа приказна на македонски!
pl-flagPL
Przeczytaj tę historię po polsku!
iw-flagIW
קרא את הסיפור הזה בעברית!
bg-flagBG
Прочетете тази история на български!
be-flagBE
Прачытайце гэтае апавяданне па-беларуску!
HT

Twò lontan; Pou li

Dènyèman te vini yon travay enteresan, chanje SVG koutim, nan yon pwojè Webflow pou animasyon an. Mwen te panse se pa yon gwo zafè, ouvri yon Figma, pran kòd sous SVG la, jete li epi .... pa travay 😔 Rechèch pwoblèm nan, li te tounen soti ke bibliyotèk la ki anime SVG travay dirèkteman ak eleman rect andedan menm SVG la. Oke ankò pa gen pwoblèm mwen te panse :), ann jis chanje non tout kouch yo Rect epi nou pral kontan. Chanje non, mwen gade kòd sous SVG la epi mwen pa wè rect :(
featured image - Tutorial: Ki jan yo vire fichye Figma nan SVG ak eleman Rect
Aleksandr Krivov HackerNoon profile picture
Aleksandr Krivov

Aleksandr Krivov

@skriv

Working around the World. Share my thoughts and experiences.

0-item

STORY’S CREDIBILITY

Guide

Guide

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.


Dènyèman te vini yon travay enteresan, chanje SVG koutim, nan yon pwojè Webflow pou animasyon an.


Mwen te panse se pa yon gwo zafè, ouvri yon Figma, pran kòd sous SVG la, jete li epi .... pa travay 😔


Rechèch pwoblèm nan, li te tounen soti ke bibliyotèk la ki anime SVG travay dirèkteman ak eleman rect andedan menm SVG la. Oke ankò pa gen pwoblèm mwen te panse :), ann jis chanje non tout kouch yo Rect epi nou pral kontan.


Chanje non, mwen gade kòd sous SVG la epi mwen pa wè rect :(


Svg mwen an premye men mwen bezwen yon eleman rect olye de yon chemen

Svg mwen an premye men mwen bezwen yon eleman rect olye de yon chemen


Lè sa a, mwen te chita pi alèz nan chèz mwen an epi mwen te kòmanse fè rechèch pi efikas.


Li te tounen soti ke pou SVG konprann eleman yo nou vle anime kòm recr nou bezwen trase yo .... woulo liv tanbou - atravè ankadreman.

Te kòmanse tès, ak tout bagay ap mache.


image


Men koulye a, gen yon lòt pwoblèm:

Ki jan yo otomatize pwosesis sa a?

Nou deja gen anpil ilistrasyon trase, epi nou pa vle refè yo.

Oke, depi nou ap travay nan ankadreman, nou te jwenn yon fason soti, bezwen kreye Plugin a ki pral vlope tout eleman nan ankadreman.


Kòd sous Plugin la:


 const selectedNodes = figma.currentPage.selection; if (selectedNodes.length === 0) { figma.notify("Please select at least one layer."); } else { selectedNodes.forEach(node => { const frame = figma.createFrame(); frame.resize(node.width, node.height); frame.x = node.x; frame.y = node.y; frame.appendChild(node); node.x = 0; node.y = 0; }); figma.notify("All selected layers are wrapped in frames!"); } figma.closePlugin();


oswa telechaje pwojè a sou GitHub :-)

Rezilta:

30 minit nan kòd ak tout animasyon travay, travay pou lavni an fini.

Konklizyon:

si ou pa ka jwenn travay enteresan, yo pral jwenn ou tèt yo. Otomatik tout bagay :)

L O A D I N G
. . . comments & more!

About Author

Aleksandr Krivov HackerNoon profile picture
Aleksandr Krivov@skriv
Working around the World. Share my thoughts and experiences.

KANDYE TAGS

ATIK SA A TE PREZANTE NAN...

Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
X REMOVE AD