Quick table
<p>Paste CSV, choose your preferred table layouts and generate a clean table in seconds. Smart cell selection maximizes styling freedom without the need for repetitive clicks.</p><p><br></p><p>25s Demo: <a href="https://twitter.com/kakax114/status/1559070703219273731?t=-NyaGkeouvsfQswkYxhkKw" rel="noreferrer noopener nofollow ugc" target="_blank">https://twitter.com/kakax114/status/1559070703219273731?t=-NyaGkeouvsfQswkYxhkKw</a></p><p><br></p><h2>🔥Get started</h2><ol><li>Copy your source data from CSV, Excel, Google Sheet, and <code>cmd/ctrl + v</code> to the first text box.</li><li>Pick <strong>Column</strong> or <strong>Row</strong>, it will decide the Autolayout direction to group the cells.</li><li><strong>Create table</strong>. (Done! To get the most out of Quick table, dive into the following steps 👇🤿)</li><li>Select <strong>All cells</strong>, then head to the Figma panel to customize the table look & feel, such as vertical or horizontal paddings, underline borders, colors etc.</li><li>Toggle <strong>Text mode</strong>, allow you to drill into text layers of the selected cells, where you can style the font type, font size, and resizing options (eg truncation).</li><li>Select <strong>Top header</strong>, and apply a different style to the table header. You can also use the <strong>↑</strong> and <strong>↓</strong> buttons to step through each row, ie design a zebra stripe.</li><li>Select <strong>Side header</strong>, style the vertical header, or more commonly to style each column, use <strong>←</strong> and <strong>→</strong> buttons to traverse. Useful for changing column widths, or right-align number columns.</li></ol><p><br></p><h2>✅Summary</h2><ul><li>It's always been a challenge select table cells against your Autolayout direction. Quick Table makes duplicating rows easy for a column-based table and selecting columns on a row-based table is a breeze.</li><li>Quick Table is a CLEAN plugin, it only creates necessary layers, no pre-defined styles. Also, it's front-end-only processing, developer will never get your data.</li></ul><p><br></p><p><br></p><p>Enjoy!</p><p><br></p><p><br></p><p>-------------</p><p><br></p><h2>⚙️Change log</h2><p>Bug fix on row select - 12 Aug</p>
Plugin Preview
About this plugin
Paste CSV, choose your preferred table layouts and generate a clean table in seconds. Smart cell selection maximizes styling freedom without the need for repetitive clicks.
25s Demo: https://twitter.com/kakax114/status/1559070703219273731?t=-NyaGkeouvsfQswkYxhkKw
🔥Get started
- Copy your source data from CSV, Excel, Google Sheet, and
cmd/ctrl + v
to the first text box. - Pick Column or Row, it will decide the Autolayout direction to group the cells.
- Create table. (Done! To get the most out of Quick table, dive into the following steps 👇🤿)
- Select All cells, then head to the Figma panel to customize the table look & feel, such as vertical or horizontal paddings, underline borders, colors etc.
- Toggle Text mode, allow you to drill into text layers of the selected cells, where you can style the font type, font size, and resizing options (eg truncation).
- Select Top header, and apply a different style to the table header. You can also use the ↑ and ↓ buttons to step through each row, ie design a zebra stripe.
- Select Side header, style the vertical header, or more commonly to style each column, use ← and → buttons to traverse. Useful for changing column widths, or right-align number columns.
✅Summary
- It's always been a challenge select table cells against your Autolayout direction. Quick Table makes duplicating rows easy for a column-based table and selecting columns on a row-based table is a breeze.
- Quick Table is a CLEAN plugin, it only creates necessary layers, no pre-defined styles. Also, it's front-end-only processing, developer will never get your data.
Enjoy!
-------------
⚙️Change log
Bug fix on row select - 12 Aug
Plugin Details
Version | 2 |
---|---|
Created | August 6, 2022 |
Last Updated | August 12, 2022 |
Category | Uncategorized |
Creator | carter |
Stats | 1324 installs, 171 likes |
Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/code.js
- Editor Types:figma
More Like This
Discover other plugins in the same category.