17 |
18 | ### ✐ Contribution
19 |
20 | ---
21 |
22 | To contribute, you just have to submit a pull request by following these rules:
23 |
24 | * Search for previous suggestions before making a new one to prevent duplication.
25 | * If you want to submit a widget, make sure you put it in the right alphabetical order.
26 | * Don't forget to add the creator's name.
27 | * Check spelling and grammar.
28 | * Please, add appropriate tags.
29 | * Try to make your Pull Request descriptive and check all questions in the PR template
30 |
31 | * New assets are welcomed if you have 2+ ressources to submit.
32 |
33 | ### ⏍ Links & Tag
34 |
35 | * Please, use the following format for the links : ``[Repo](link) | [Widgets on Figma](link)``.
36 |
37 | * Please, add the appropriate tag :
38 | * Widgets related
39 | *  for widgets available in figma & figjam
40 | *  for widgets available in figma only
41 |
42 | *  for widgets available in figjam only
43 |
44 | * Ressources related
45 | *  for vue js
46 | *  for react js
47 |
48 | *  for svelte js
49 |
50 | ### ⚲ Review Workflow
51 |
52 | We will do our best to review your submission as soon as possible. Depending on our availability, we will generally try to process pending submissions each weekend.
53 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 mrstev3n
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Open source Figma widgets related projects on GitHub
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | A list of Figma widgets and resources for building them.
13 |
14 |
15 | ---
16 |
17 | ## How to Use and Contribute
18 |
19 | * For Widget source code, go to [Widgets ⏎](#widgets)
20 | * For useful resources on widget building, go to [Resources ⏎](#resources)
21 |
22 | To contribute you just have to make a pull request according to the [Contribution_Guidelines](Contribution_Guidelines.md) rules. Only widgets working in figma/figjam files can be submitted here, for plugins you can [submit them here](https://github.com/thomas-lowry/figma-plugins-on-github).
23 |
24 | > Notice these tags -ㅤㅤfor widgets working only in Figma file,ㅤㅤfor widgets working only in FigJam file andㅤ ㅤfor widgets working on figma and figjam file.
25 |
26 | ---
27 |
28 | ## Widgets
29 |
30 | A collection of widgets that have been open-sourced.
31 |
32 | ---
33 |
34 | [A](#A) [B](#B) [C](#C) [D](#D) [E](#E) [F](#F) [G](#G) [H](#H) [I](#I) [J](#J) [K](#K) [L](#L) [M](#M) [N](#N) [O](#O) [P](#P) [Q](#Q) [R](#R) [S](#S) [T](#T) [U](#U) [V](#V) [W](#W) [X](#X) [Y](#Y) [Z](#Z)
35 |
36 | ---
37 |
38 | ### A
39 |
40 | #### widget name (by john doe) 
41 |
42 | lorem ipsum dolor sit amet, consectetur adipis
43 |
44 | [Repo](https://github.com/mrstev3n/figma-widgets-on-github) | [Widget on Figma](https://www.figma.com/community/widgets)
45 |
46 | ---
47 |
48 | ### B
49 |
50 | ### C
51 |
52 | #### Clock (by Sai Rakshit) 
53 |
54 | A simple clock widget which tells time in hours, minutes and seconds format.
55 |
56 | [Repo](https://github.com/rak-shit/Figma-Clock-Widget) | [Widget on Figma](https://www.figma.com/community/widget/1124078327536043967/Clock)
57 |
58 | #### Contrast Checker (by Zach Inglis) 
59 |
60 | Test any frame and any color against WCAG AA or AAA Contrast Guidelines. Great for creating
61 | design systems and easily being able to keep your scores up to date.
62 |
63 | [Repo](https://github.com/zachinglis/figma-contrast-check) | [Widget on Figma](https://www.figma.com/community/widget/1123669584321839030/Contrast-Checker)
64 |
65 | ### D
66 |
67 | ### E
68 |
69 | ### F
70 |
71 | ### G
72 |
73 | ### H
74 |
75 | ### I
76 |
77 | #### Interactive Figmaland (by Golf Sinteppadon) 
78 |
79 | Widget intended to be used with [Interactive Figmaland](https://www.figma.com/community/file/1118658708951135857?fuid=765561188849749568) file
80 |
81 | Made during Figma's June 2022 Maker Week
82 |
83 | [Repo](https://github.com/minigolf2000/figmaland) | [Widget on Figma](https://www.figma.com/community/widget/1117473220251961046/Interactive-Figmaland)
84 |
85 | ### J
86 |
87 | ### K
88 |
89 | ### L
90 |
91 | #### Live Code Block (by Cole Bemis) 
92 |
93 | Turn FigJam into a collaborative JavaScript canvas
94 |
95 | [Repo](https://github.com/colebemis/figjam-live-code-block) | [Widget on Figma](https://www.figma.com/community/widget/1037859737715704794/Live-Code-Block)
96 |
97 | ### M
98 |
99 | ### N
100 |
101 | ### O
102 |
103 | ### P
104 |
105 | ### Q
106 |
107 | ### R
108 |
109 | ### S
110 |
111 | ### T
112 |
113 | #### Table (by Gavin McFarland) 
114 |
115 | Create, import, manage and display tabular data.
116 |
117 | [Repo](https://github.com/gavinmcfarland/figma-widget-table) | [Widget on Figma](https://www.figma.com/community/widget/1027585818512741999/Table)
118 |
119 | #### Timeline (by Michael Yong) 
120 |
121 | A timeline widget that is useful for making gantt charts in FigJam!
122 |
123 | [Repo](https://github.com/ymichael/WidgetTimeline) | [Widget on Figma](https://www.figma.com/community/widget/1038507134198748761/Timeline)
124 |
125 | ### U
126 |
127 | ### V
128 |
129 | ### W
130 |
131 | #### Whose turn is it? (by Elynn Lee) 
132 |
133 | A FigJam widget to help your group take turns! Keep track of whose turn it is, who’s already gone, and who’s left.
134 |
135 | Allow people to “popcorn” to others and choose who goes next, or use the “next” button to randomly choose the next person. As people join or leave, you can also “refresh” the list of people to reflect who’s still in the file.
136 |
137 | [Repo](https://github.com/elynnlee/WidgetTurnPicker) | [Widget on Figma](https://www.figma.com/community/widget/1044279368528763372/Whose-turn-is-it%3F)
138 |
139 | ### X
140 |
141 | ### Y
142 |
143 | #### Youtube Embed (by Tekeste Kidanu) 
144 |
145 | A Widget to embed youtube video into FigJam
146 |
147 | [Repo](https://github.com/iamtekeste/figjam-youtube-embed)
148 |
149 | ### Z
150 |
151 | ## Resources
152 |
153 | A collection of resources to help accelerate the development process of Figma widgets.
154 |
155 | ---
156 |
157 | #### create-widget
158 |
159 | Create new [Figma & FigJam widgets](https://www.figma.com/widget-docs/) with a single command.
160 |
161 | [Repo](https://github.com/figma/create-widget)
162 |
163 | This is a fork of the awesome [party-js](https://party.js.org/) library to work inside of Figma.
164 |
165 | [Repo](https://github.com/ymichael/party-figma)
166 |
167 | #### Gif example
168 |
169 | A demo about how to add Gif type element into FigJam canvas
170 |
171 | [Repo](https://github.com/lichin-lin/figjam-gif-example)
172 |
173 | #### Party Figma
174 |
175 | This is a fork of the awesome [party-js](https://party.js.org/) library to work inside of Figma.
176 |
177 | [Repo](https://github.com/ymichael/party-figma)
178 |
179 | #### Widget API typings
180 |
181 | This repository contains the typings for the Figma Widget API.
182 |
183 | [Repo](https://github.com/figma/widget-typings)
184 |
185 | #### Widget Samples
186 |
187 | Figma and FigJam Widget Samples
188 |
189 | [Repo](https://github.com/figma/widget-samples)
190 |
191 | ---
192 |
193 |
211 |
212 | ### ✐ Contribution
213 |
214 | ---
215 |
216 | To contribute, you just have to submit a pull request by following these rules:
217 |
218 | * Search for previous suggestions before making a new one to prevent duplication.
219 | * If you want to submit a widget, make sure you put it in the right alphabetical order.
220 | * Don't forget to add the creator's name.
221 | * Check spelling and grammar.
222 | * Please, add appropriate tags.
223 | * Try to make your Pull Request descriptive and check all questions in the PR template
224 |
225 | * New assets are welcomed if you have 2+ ressources to submit.
226 |
227 | ### ⏍ Links & Tag
228 |
229 | * Please, use the following format for the links : ``[Repo](link) | [Widgets on Figma](link)``.
230 |
231 | * Please, add the appropriate tag :
232 | * Widgets related
233 | *  for widgets available in figma & figjam
234 | *  for widgets available in figma only
235 |
236 | *  for widgets available in figjam only
237 |
238 | * Ressources related
239 | *  for vue js
240 | *  for react js
241 |
242 | *  for svelte js
243 |
244 | ### ⚲ Review Workflow
245 |
246 | We will do our best to review your submission as soon as possible. Depending on our availability, we will generally try to process pending submissions each weekend.
247 |
--------------------------------------------------------------------------------
/assets/contrib-b.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/assets/contrib-w.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/assets/figjam-only.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/assets/figma-only.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/assets/react.svg:
--------------------------------------------------------------------------------
1 |
14 |
--------------------------------------------------------------------------------
/assets/svelte.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/assets/universal.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/assets/vue.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
6 | 
8 |