BlockFlow

About this plugin

👉👉 Turn your Figma designs into a native WordPress block theme, ready to install.🚀 Blockflow Pro is coming — join the waitlist to get early access.BlockFlow is a Figma plugin that allows you to easily convert your designs into WordPress blocks. This plugin is designed to simplify the process of transforming your visual projects into functional WordPress code. The exported blocks do not contain inline styles and rely solely on the logical attributes of the supported blocks.Playground file https://www.figma.com/community/file/1414876266658754316/blockflow-playgroundUsageSelect the design elements you want to convert into WordPress blocksOpen the BlockFlow plugin from the Figma toolbarClick the "Convert to blocks" button in the plugin interfaceThe plugin will automatically convert the selected elements into WordPress blocksOnce the conversion is complete, the HTML code of the blocks will be copied to your clipboardPaste the copied code into your WordPress editor or HTML fileSupported blocksGroupSeparatorImageButtonsParagraphHeadingsCoverColumnsListMedia & TextBlockquotePullquoteDetailsIcon block - third party pluginAdvanced Columns – third party pluginTips for optimal useFollow instructions on the Playground file https://www.figma.com/community/file/1414876266658754316/blockflow-playgroundOrganize your Figma design logically, grouping related elements using the auto-layout feature when necessary.If you need to create a list, you can use a group by naming the block list and the child elements list-item.A list can also be created by applying the text list style and naming the element list.The aspect ratio from rectangles with an image layer will be automatically extracted and adjusted to the closest WordPress predefined default ratio.The list item block in WordPress only supports text, so any other element in your list group will not be exported.Configure the layout size in the advanced settings panel according to your theme settings.NoteIn this early experimental phase, the plugin does not provide controls to define or import the information found in the theme.json file.